{"id":23722,"date":"2021-08-13T10:06:44","date_gmt":"2021-08-13T14:06:44","guid":{"rendered":"https:\/\/plumrocket.com\/docs\/?p=23722"},"modified":"2021-11-18T05:33:16","modified_gmt":"2021-11-18T10:33:16","slug":"how-to-configure-magento-2-amp-homepage","status":"publish","type":"post","link":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/userguides\/amp-homepage","title":{"rendered":"How to Configure Magento 2 AMP Homepage"},"content":{"rendered":"\n

After installing the Magento 2 AMP Theme One<\/a>, you get a template for AMP Homepage. In the template, we provide you with widgets, static banners, and carousel examples. Moreover, you can edit and customize all AMP content according to your needs. Please follow the steps below to learn how to configure Magento 2 AMP Homepage.<\/p>\n\n\n\n

\n

Step-by-step guide:<\/p>\n\n\n\n

  1. In the main Magento menu, go to Content<\/strong> -> Elements -> Pages<\/strong>. You will find a grid with the available CMS pages.<\/li>
  2. Search for “amp” in the search field.<\/li>
  3. Find the Amp Theme One Homepage 1<\/strong> in the grid. This is the AMP Homepage template provided with the Magento 2 AMP Theme One. By clicking Select<\/strong> -> Edit<\/strong> in the corresponding record, you will get on the Homepage edit page. <\/li><\/ol>\n<\/div><\/div>\n\n\n\n
    \"Magento<\/figure>\n\n\n\n

    Once you selected Amp Theme One Homepage 1, you can set all the required settings set custom AMP content. <\/p>\n\n\n\n

    \n

    Step-by-step guide:<\/p>\n\n\n\n

    1. Enable Page<\/strong>: enable or disable AMP Theme One Homepage in this option.<\/li>
    2. Page Title<\/strong>: if necessary, enter a recognizable AMP Home Page title to be displayed in theMagento backend.<\/li><\/ol>\n<\/div><\/div>\n\n\n\n
      \"Magento<\/figure>\n\n\n\n

      Content<\/h3>\n\n\n\n
      \n

      Step-by-step guide:<\/p>\n\n\n\n

      1. Content Heading<\/strong>: this option is not currently used in AMP.<\/li>
      2. The Magneto 2 AMP extension converts simple CMS page content into AMP format if the AMP Content field<\/a> is empty. However, you need to specify AMP content manually for complex pages, where you want to display banners, sliders, or AMP widgets. In this case, the extension will use your custom AMP content<\/a> and ignore this Content section.<\/li><\/ol>\n<\/div><\/div>\n\n\n\n
        \"Magento<\/figure>\n\n\n\n

        Search Engine Optimization<\/h3>\n\n\n\n
        \n

        Step-by-step guide:<\/p>\n\n\n\n

        1. URL key<\/strong>: this is the default URL key for the AMP Theme One Homepage 1.<\/li>
        2. When the Magento 2 AMP extension generates AMP Homepage, it copies all metadata from your website Homepage. You can edit it if necessary in this field.<\/li><\/ol>\n\n\n\n

          <\/p>\n<\/div><\/div>\n\n\n\n

          \"Magento<\/figure>\n\n\n\n

          Page in Websites<\/h3>\n\n\n\n
          \n

          Step-by-step guide:<\/p>\n\n\n\n

          1. Store View<\/strong>: select the store view(s) the AMP Homepage will be visible at.<\/li><\/ol>\n<\/div><\/div>\n\n\n\n
            \"Magento<\/figure>\n\n\n\n

            AMP Content<\/h3>\n\n\n\n
            \n

            Step-by-step guide:<\/p>\n\n\n\n

            1. AMP Content<\/strong>: in this field, you can specify AMP content for your AMP Theme One Homepage 1. Currently, the WYSIWYG editor is not supported, so we recommend using the online AMP playground<\/a> to write valid AMP HTML code and paste it here.<\/li>
            2. Click Save Page<\/strong>.<\/li>
            3. Now you can validate your AMP Homepage by clicking AMP Validation<\/strong>.<\/li><\/ol>\n\n\n\n

              <\/p>\n<\/div><\/div>\n\n\n\n

              \"Magento<\/figure>\n\n\n\n

              How to Use the Same CMS Page for Both Regular and AMP Homepage<\/a><\/h2>\n\n\n\n

              In the previous section, you learned how to customize the demo AMP Homepage provided with AMP Theme One. However, you may facilitate the AMP Homepage maintenance by using one CMS page with different content for regular and AMP websites. Follow the steps below to learn how to use the same CMS Page for both regular and AMP Homepage.<\/p>\n\n\n\n

              Step 1. Add AMP content to the default Magento Homepage<\/h3>\n\n\n\n

              First of all, find out which CMS page is assigned as your Homepage.<\/p>\n\n\n\n

              \n

              Step-by-step guide:<\/p>\n\n\n\n

              1. In the main Magento menu, go to Stores<\/strong> -> Settings -> Configuration<\/strong>.<\/li>
              2. Navigate to General<\/strong> tab -> Web<\/strong>.<\/li>
              3. Under the Default Pages<\/strong>, see which CMS page is selected for the CMS Home Page<\/strong> option. This Homepage is used on your main website.<\/li><\/ol>\n<\/div><\/div>\n\n\n\n
                \"Magento<\/figure>\n\n\n\n

                Then, you need to add AMP content to this Homepage.<\/p>\n\n\n\n

                \n

                Step-by-step guide:<\/p>\n\n\n\n

                1. In the main Magento menu, go to Content<\/strong> -> Elements -> Pages<\/strong>. <\/li>
                2. In a grid with the available CMS pages, find the Homepage you use for your regular website and click Select<\/strong> -> Edit<\/strong> in the corresponding record. <\/li><\/ol>\n<\/div><\/div>\n\n\n\n
                  \"Magento<\/figure>\n\n\n\n
                  \n

                  Step-by-step guide:<\/p>\n\n\n\n

                  1. Scroll down to the AMP Content<\/strong> section and specify your AMP content in this field. Please note that you have to keep the AMP HTML specification and text formatting<\/a>.<\/li><\/ol>\n<\/div><\/div>\n\n\n\n
                    \"Magento<\/figure>\n\n\n\n

                    You can specify the AMP content yourself (we recommend checking AMP HTML code in AMP playground<\/a>) or use fragments from the demo AMP Theme One Homepage. <\/p>\n\n\n\n

                    Step 2. Assign Homepage in the Magento 2 AMP extension<\/h3>\n\n\n\n
                    \n

                    Step-by-step guide:<\/p>\n\n\n\n

                    1. In the main Magento menu, go to Plumrocket<\/strong> -> AMP<\/strong> -> Configuration<\/strong>.<\/li>
                    2. Switch to the AMP Theme One Settings<\/strong> tab.<\/li>
                    3. In the CMS Page<\/strong> field, under the Homepage<\/strong> tab, select the Homepage you use for your regular Magento website. If you select the — Use Magento Homepage —<\/em> option, the extension will automatically use Homepage from the Magento Homepage configuration<\/a>.<\/li>
                    4. Click Save Config<\/strong> to apply changes.<\/li><\/ol>\n\n\n\n

                      <\/p>\n<\/div><\/div>\n\n\n\n

                      \"Magento<\/figure>\n\n\n\n

                      How to Translate Magento 2 AMP Homepage<\/h2>\n\n\n\n

                      If you have two or more store views (e.g., English and German), you can translate your AMP Homepage into German and apply it for the German store view: <\/p>\n\n\n\n

                      1. Enable AMP Homepage for English store view only.<\/li>
                      2. Create a new CMS page with the same URL key and enable it for German store view. <\/li>
                      3. Specify AMP content in the German language, change metadata if necessary, etc.<\/li><\/ol>\n\n\n\n

                        How to Add AMP Widgets to Magento 2 AMP Homepage<\/h2>\n\n\n\n

                        The Magento 2 AMP extension also provides AMP widgets that you can insert into the Homepage and other CMS pages\/blocks. Follow the instruction to add AMP widgets in Magento 2<\/a>.<\/p>\n\n\n\n

                        How to Use AMP v2 Homepage Template<\/h2>\n\n\n\n

                        When you install AMP v3 extension, the new Homepage template is set. It contains more dynamic elements and looks differently. However, if you used the AMP v2 extension, you can also use a similar template on your new AMP Homepage.<\/p>\n\n\n\n

                        To implement it, you need to add a Subcategory<\/strong> widget with a List Template<\/strong> to your new AMP Homepage (see the article on adding AMP widgets in Magento 2<\/a>):<\/p>\n\n\n\n

                        \n

                        Step-by-step guide:<\/p>\n\n\n\n

                        1. Set the Widget Type<\/strong> option to AMP – Subcategories<\/em>.<\/li>
                        2. Choose the Default Category<\/em> to show all main categories in the widget.<\/li>
                        3. Make sure to select List Template<\/em> for the Default Category.<\/li>
                        4. Click Insert Widget<\/strong> to save changes. <\/li><\/ol>\n<\/div><\/div>\n\n\n\n
                          \"Magento<\/figure>\n\n\n\n

                          After inserting this widget, you can remove other unnecessary content from the Homepage v3.<\/p>\n","protected":false},"excerpt":{"rendered":"

                          After installing the Magento 2 AMP Theme One, you get a template for AMP Homepage. In the template, we provide you with widgets, static banners, and carousel examples. Moreover, you can edit and customize all AMP content according to your needs. Please follow the steps below to learn how to configure Magento 2 AMP Homepage. … <\/p>\n

                          Continue reading “How to Configure Magento 2 AMP Homepage”<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[330],"tags":[],"yoast_head":"\nHow to Configure Magento 2 AMP Homepage - Plumrocket Documentation<\/title>\n<meta name=\"description\" content=\"After installing the Magento 2 AMP Theme One, you get a template for AMP Homepage. In the template, we provide you with widgets, static banners, and\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/userguides\/amp-homepage\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Configure Magento 2 AMP Homepage\" \/>\n<meta property=\"og:description\" content=\"After installing the Magento 2 AMP Theme One, you get a template for AMP Homepage. In the template, we provide you with widgets, static banners, and\" \/>\n<meta property=\"og:url\" content=\"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/userguides\/amp-homepage\" \/>\n<meta property=\"og:site_name\" content=\"Plumrocket Documentation\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-13T14:06:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-18T10:33:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/plumrocket.com\/docs\/wp-content\/uploads\/2021\/08\/magento-2-amp-theme-homepage-configuration-2.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Plumrocket\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Configure Magento 2 AMP Homepage - Plumrocket Documentation","description":"After installing the Magento 2 AMP Theme One, you get a template for AMP Homepage. In the template, we provide you with widgets, static banners, and","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/userguides\/amp-homepage","og_locale":"en_US","og_type":"article","og_title":"How to Configure Magento 2 AMP Homepage","og_description":"After installing the Magento 2 AMP Theme One, you get a template for AMP Homepage. In the template, we provide you with widgets, static banners, and","og_url":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/userguides\/amp-homepage","og_site_name":"Plumrocket Documentation","article_published_time":"2021-08-13T14:06:44+00:00","article_modified_time":"2021-11-18T10:33:16+00:00","og_image":[{"url":"https:\/\/plumrocket.com\/docs\/wp-content\/uploads\/2021\/08\/magento-2-amp-theme-homepage-configuration-2.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"Plumrocket","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/plumrocket.com\/docs\/#website","url":"https:\/\/plumrocket.com\/docs\/","name":"Plumrocket Documentation","description":"Extensions docs, troubleshootings etc.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/plumrocket.com\/docs\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/userguides\/amp-homepage#primaryimage","inLanguage":"en-US","url":"https:\/\/plumrocket.com\/docs\/wp-content\/uploads\/2021\/08\/magento-2-amp-theme-homepage-configuration-2.png","contentUrl":"https:\/\/plumrocket.com\/docs\/wp-content\/uploads\/2021\/08\/magento-2-amp-theme-homepage-configuration-2.png","width":1206,"height":549},{"@type":"WebPage","@id":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/userguides\/amp-homepage#webpage","url":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/userguides\/amp-homepage","name":"How to Configure Magento 2 AMP Homepage - Plumrocket Documentation","isPartOf":{"@id":"https:\/\/plumrocket.com\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/userguides\/amp-homepage#primaryimage"},"datePublished":"2021-08-13T14:06:44+00:00","dateModified":"2021-11-18T10:33:16+00:00","author":{"@id":"https:\/\/plumrocket.com\/docs\/#\/schema\/person\/c96fccdb89342ae6804272265723eca8"},"description":"After installing the Magento 2 AMP Theme One, you get a template for AMP Homepage. In the template, we provide you with widgets, static banners, and","breadcrumb":{"@id":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/userguides\/amp-homepage#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/userguides\/amp-homepage"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/userguides\/amp-homepage#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Magento 2 Extensions","item":"https:\/\/plumrocket.com\/magento-extensions"},{"@type":"ListItem","position":2,"name":"Magento 2 AMP","item":"https:\/\/plumrocket.com\/magento-amp"},{"@type":"ListItem","position":3,"name":"Documentation","item":"https:\/\/plumrocket.com\/docs\/magento-amp"},{"@type":"ListItem","position":4,"name":"v3","item":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3"},{"@type":"ListItem","position":5,"name":"How-to Guides","item":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/userguides"},{"@type":"ListItem","position":6,"name":"How to Configure Magento 2 AMP Homepage"}]},{"@type":"Person","@id":"https:\/\/plumrocket.com\/docs\/#\/schema\/person\/c96fccdb89342ae6804272265723eca8","name":"Plumrocket","image":{"@type":"ImageObject","@id":"https:\/\/plumrocket.com\/docs\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/10c44aa45aab391250913d982e552e53?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/10c44aa45aab391250913d982e552e53?s=96&d=mm&r=g","caption":"Plumrocket"}}]}},"_links":{"self":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/23722"}],"collection":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/comments?post=23722"}],"version-history":[{"count":25,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/23722\/revisions"}],"predecessor-version":[{"id":25104,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/23722\/revisions\/25104"}],"wp:attachment":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/media?parent=23722"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/categories?post=23722"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/tags?post=23722"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}