Magento 2 AMP v3.x Configuration

Step-by-Step actions:

1. Enable Extension: this option allows you to enable or disable this Magento 2 AMP plugin.
2. Serial Key: enter the unique serial key provided to you after purchasing the extension. Please note: in most cases, this field will be pre-filled with a serial key automatically, and the green checkmark will be displayed. To find and paste your serial key manually, read the Serial Key Activation article.

Step-by-Step actions:

1. Mode: two modes are available for AMP pages:
   • Sandbox mode allows you to hide AMP pages from visitors and prevent them from crawling & indexing by Google Bots. You can use this mode when creating and testing AMP pages until you make them valid. We also recommend disabling the Force AMP On Mobile Devices option to avoid displaying invalid AMP pages to customers.
   • Switch to the Production mode when the AMP pages are valid and ready to go live.

Step-by-step guide:

2. AMP URL Preview: this GET parameter displays the URL of the AMP version of your website’s homepage. This URL automatically changes when the AMP URL Style and its parameters (Param Name, Param Value, Path Prefix) change.
3. AMP URL Style: this is the style of the AMP version of your website pages. We strongly recommend not to change this option after switching to production mode, as this may lead to Google Console errors. The following AMP URL styles are available:
   • ?amp=1 – this option is set by default. It is most useful when you upgraded the AMP extension from version 2, since the AMP URL Style was exactly ?amp=1. Now, you can change Param Name (amp) and Param Value (1).
   • /amp/ – this URL style is more user-friendly. If you use the Store Code, the amp identifier is added after it (https://your-domain.com/us/amp/).
4. Param Name (for AMP URL Style set to ?amp=1): this is the parameter name of the AMP URL Style. We do not recommend changing this option after switching to production mode, as this may lead to Google Console errors.
5. Param Value (for AMP URL Style set to ?amp=1): this is your AMP pages value of AMP parameter. Please note that changing this option after switching to production mode may result in Google Console errors.
6. Path Prefix (for AMP URL Style set to /amp/): enter the AMP identifier of your AMP pages. Make sure the same path is not used for CMS pages or custom extensions.

Step-by-Step actions:

7. Force AMP On Mobile Devices:
   • Set to Yes to make the AMP version of your website as default for mobile devices. Both visitors who opened your website from a direct link, and those who came from Google Search Results, will arrive on the AMP version of the website.
   • Set to No to show non-amp pages for visitors who open your website from a direct link on mobile devices. Those who arrive from Google Search Results Page will see AMP pages.
8. Force AMP on Tablet Devices:
   • Set to Yes to make the AMP version of your website as default for tablet devices. Both visitors who opened your website from a direct link, and those who came from Google Search Results, will arrive on the AMP version of the website.
   • Set to No to show non-amp pages for visitors who open your website from a direct link on tablet devices. Those who arrive from Google Search Results Page will see AMP pages.
9. Enable RTL Template: this option allows you to switch your AMP pages script to Right-To-Left.

Step-by-Step actions:

1. Set to Yes for those pages, where you want to enable the AMP mode.
2. Deny List: please enter page paths where you want to disable AMP mode. This list has a higher priority over the page type configurations specified in the previous option. The Deny List is useful, for instance, when you want to disable AMP mode for a specific product, category, etc., in case custom functionality is not supported in AMP.
3. Allow List: please enter the paths for pages where you want to allow the AMP mode. The Allow List has a higher priority over the Deny List. Moreover, it is useful when enabling AMP only for a specific product/category/CMS page to test.

Step-by-Step actions:

1. AMP Product Options Type: please select the type for the AMP product options display. Each type is suitable for a specific type of product:
   • The Configurable AMP Swatches option is recommended for most Magento stores. It allows displaying product options in AMP swatches to look like native Magento functionality. Although AMP Swatches are designed to increase the Core Web Vitals score, all custom product options must be implemented manually.
   • Set to Choose Options Button to send your visitors to non-amp pages in order to continue selecting product options. This option is useful if custom functionality cannot be implemented in AMP swatches or AMP iFrame takes too long to load product options.
   • AMP iFrame allows you to display any custom functionality on your AMP pages in an iFrame, and use any custom javascript. However, this leads to a decrease in the Core Web Vitals score, and the number of products in the cart will not dynamically change.
2. Update Product Price When Options Change: set to Yes to update product price instantly, without the page refresh. Importantly, this will only work for the AMP Product Options Type set to Configurable AMP Swatches. Please note that only specific option types are supported: dropdown menu, multiple select, radio buttons, and checkboxes.

Step-by-Step actions:

1. Enable: set to Yes to enable rich snippets for AMP pages.
2. Brand Attribute: select the brand attribute to

Step-by-Step actions:

1. Use Build-In WebP Image Converter: set to Yes to convert images to a WebP format with a built-in converter.
2. How to Size Images With Unspecified Dimensions: select the action to be executed when converting your website from HTML to AMP HTML, if the image dimensions are missing in the image tags of CMS pages or CMS blocks:
   • Scale to Maintain Aspect Ratio (Object Fit Contain): select this option in order to increase or decrease the size of images with unknown dimensions to fill the container while preserving the image’s aspect ratio.
   • Fill Entire Content Box (Object Fit Cover): select this option to crop images with unknown dimensions to fill the height and width of its container, but maintain the aspect ratio.

Step-by-Step actions:

1. Font Family: select the Font Family you want to use in your AMP theme.
2. Base Font Size: by default, the system value is used. If you want to specify a different font size for AMP pages, uncheck the Use System Value box, and enter the font size in pixels. The font size will be applied for the CMS page content, product and category descriptions, review details, certain CMS block contents, etc.

Step-by-Step actions:

1. Configure the appearance of buttons on your Magento AMP theme. Check the Use System Value box if you want to use the default AMP Theme One settings.
2. Border Size: specify the size of the button border.
3. Border Radius: specify the radius of the button border.
4. Font Family: select the font family to use in the button text.

Step-by-Step actions:

1. Configure the appearance of Add to Cart buttons on your Magento AMP theme. By checking the Use System Value box, you will use the default AMP Theme One settings.
2. Border Size: specify the size of the button border.
3. Border Radius: specify the radius of the button border.
4. Font Family: select the font family to use in the button text.

Step-by-Step actions:

1. Base Color: select the color for the price displayed on products. By checking the Use System Value box, you will use the default AMP Theme One settings.
2. New Price Color: select the color for the new price when the discount is applied.
3. Old Price Color: select the color for the old price.

Step-by-Step actions:

1. Logo: follow the instructions in order to set your website’s logo for AMP pages. Check the Use System Value box if you want to use the default AMP Theme One settings.
2. Specify colors for the header’s background and icons (menu, wishlist, cart).

Step-by-Step actions:

3. Layout: select the layout template of the header with a different arrangement of search, menu, wishlist, cart, and other icons.

Step-by-Step actions:

1. Please specify the background and text colors for the top panel of your AMP theme. By checking the Use System Value box, you will use the default AMP Theme One settings.

Step-by-Step actions:

1. Please specify the text and background color of the search bar that opens when clicking on the search icon in the header. By checking the Use System Value box, you will use the default AMP Theme One settings.
2. Border Radius: Please specify the border radius of the search bar in pixels.
3. Please select the colors of the border, buttons, and icons displayed on the search bar.

Step-by-Step actions:

1. CMS Block: here, you can select your custom CMS block displayed in the menu below the website navigation.

Step-by-Step actions:

1. CMS Block: you can build your own website footer by selecting four custom CMS blocks.

Step-by-Step actions:

1. CMS Page: select the CMS page that will be displayed in the AMP version of your AMP pages. If you choose to use Magento Homepage, the content will be automatically converted to the AMP format. Also, you can choose the AMP Theme One Homepage template that will display the content directly in the AMP format.
2. Click on the provided link to edit the selected CMS page. There, you can specify different content for AMP pages.

Step-by-Step actions:

1. Layout: please select the template for the Product Page layout.

Step-by-Step actions:

2. Short Information: select the template for product short information display. Please note that Template 1 should not be used whe Template 2 for the Add to Cart Button option is selected, as the two wishlist buttons will not work correctly.

Step-by-Step actions:

3. Gallery: please choose the template for product gallery. Template 3 is the most lightweight and helps reach a higher Core Web Vitals score.

Step-by-Step actions:

4. Options: please select the template for product custom options.

Step-by-Step actions:

5. Add to Cart Button: select the template for Add to Cart button display. Please note that Template 2 should not be used with Template 1 for the Short Information option, as the two wishlist buttons will not work correctly.

Step-by-Step actions:

6. Details: please choose the template for the display of product details.

Step-by-Step actions:

7. Social Share: please select the display of social share buttons on the AMP Theme One.

Step-by-Step actions:

1. Layout: here, you can select the layout template of the product list display.

Step-by-Step actions:

2. Pager: please select the pager template for the Magento AMP Theme One.

Step-by-Step actions:

1. Template: please choose the display of the site toolbar.

Step-by-Step actions:

2. You can customize the look of the toolbar by changing the colors of the background, text, and border.
3. Border Size: specify the toolbar border size in pixels.
4. Border Radius: select the border radius of the toolbar in pixels or percentages.
5. Wrapper Background Color: you can change the background color of the toolbar wrapper.

Step-by-Step actions:

1. Rating Stars: you can select or change the template for the rating stars in the AMP Theme One.