Magento 2 AMP v2.x Configuration

Step-by-Step action:

1. Enable Extension: Select “Yes” to enable the extension or “No” to disable it.
2. Option “Serial Key”: enter the unique serial key provided after the purchase for the legitimate and proper functioning of your extension. Note: In most cases, this field will be pre-filled with a serial key automatically, and the green check mark will be displayed. Otherwise, please read the Serial Key Activation article in order to find and paste your serial key manually.

Step-by-Step actions:

3. “AMP Enabled On“: select the required pages to enable AMP on them.
4. “AMP Disabled On“: you can disable AMP on specific pages on your Magento store. Enter each URL in a new line.
5. “Force AMP on Mobile Devices”: if enabled – this option allows displaying the AMP version of a site automatically to all mobile users, who opened your store directly. If this option is disabled, the user will see non-amp pages when landing on the website directly (not from Google Search Results).
6. “Force AMP on Tablet Devices”: if enabled, this option allows to automatically display the AMP version of a site to all tablet users who opened your store directly.
7. “Enable AMP Iframe With Product Options“: enable this option to activate AMP Iframe (allows to display product custom options) on your Magento 2 Product Page.
8. “AMP Iframe Path“: this option allows to specify the URL to amp-iframe for product options. Note: in most cases, you do not need to change this path. In some cases Iframe is inaccessible by default path, depending on the server settings or if your Magento is located in the subfolder (under these circumstances, the amp-iframe path should be formed like “/magento-subfolder-name/ampiframe.php”).

Step-by-Step action:

1. Select “Yes” to enable “Social Sharing” or “No” to disable it.
2. Choose social buttons that will be active on your Magento AMP pages.
3. Enter Facebook ID, in “Facebook App ID” – this parameter is required for the Facebook Share dialog.

Step-by-Step action:

1. These options allow you to configure the color scheme of the AMP pages.

Step-by-Step action:

1. Select “Yes” to enable display of the Search Box in header, or “No” to display the magnifying icon in the header.
2. Enter the Contact Phone to be displayed in header.
3. Enter the Contact Email to be displayed in header.
4. Enable or disable the display of the Store View Switcher .
5. Enable or disable the display of the Currency Switcher .
6. “Google Tag Manager Snippet”: copy the code for the tag from your Google Tag manager account.

Step-by-Step action:

1. Copy the code from this field of your Google Tag Manager account.
2. The code from this field will be added automatically to your Magento 2 AMP extension pages.

Step-by-Step action:

1. Upload the image of your custom logo.
2. Configure the width of your logo.
3. Configure the height of your logo.

Step-by-Step action:

1. “Enable RTL Template“: This option allows activating the RTL language support.
2. “Enable“: Set “Yes” to enable or “No” to disable Zendesk Chat on all AMP pages.
3. “Domain“: enter your domain in order to display the Zendesk Button.
4. “Key“: this parameter is deprecated, you do not need to enter the Key.
5. “Button Label“: Specify the button label in this field.
6. “Button Background Color“: Choose the background color of the button.
7. “Button Text Color“: Select the color of the text on the Zendesk button.
8. Press the Save Config button to save changes.

Step-by-Step action:

1. Select “Yes” to enable Google Analytics on your AMP pages, or “No” to disable it.
2. Enter your Google Analytics account number. You can setup a separate Google Analytics AMP account for AMP pages, or use the existing one.

Step-by-Step action:

1. Select “Yes” to enable Facebook Pixel ID on your AMP pages, or “No” to disable it.
2. Enter your Pixel ID. It can be found at you Facebook Ads Manager account > “Tools” tab.

Step-by-Step action:

1. In the main menu go to the “Catalog” section > select “Categories”.
2. “AMP Display Mode” option allows you to select the way your AMP page content will be displayed on the frontend: you can choose “Default Mode”, “Products Only”, “Static block only” or “Static block and products” modes.

Step-by-Step action:

1. Go to the “Products” tab in the main menu of your Magento 2 > select “Categories” > navigate to the required category.
2. Go to the “AMP Homepage Image” section in the “Content” tab, and upload the needed image to be displayed on AMP Homepage.
3. Press the “Save” button to save the category and make sure to clear Magento 2 cache.

Step-by-Step action:

1. In the main menu go to “Content” tab.
2. Select “Pages” section.

Step-by-Step action:

1. Search for “AMP” page in the search field.
2. Go to “Amp Home Page”.

Step-by-Step action:

1. Option “Enable Page”: allows you to enable or disable AMP Home Page.
2. Option “Page Title”: allows to enter the AMP Home Page title.
3. Option “Content Heading”: lets you specify content heading for your AMP Home Page.
4. Edit or add the content as you need.

Step-by-Step action:

1. “URL key”: option allows to enter URL key for AMP Home Page.
2. “Meta Title”: option allows to enter meta title for this page.
3. “Meta Data”: option allows to enter meta keywords for this page.
4. “Meta Description”: allows to enter meta description of this page.

Step-by-Step action:

1. “Store View”: option allows to select the store view the AMP home page will be visible at.

Step-by-Step action:

1. “Layout”: option allows you to select the page layout, based on your requirements. The best-suggested option is “1 column”.
2. “Layout Update XML”: option allows admin to paste your layout XML code in order to update your layout.
3. “Custom Design Update”: use this block to create a custom layout for a specified period of time.
4. Press “Save Page” in order to save your changes.

Step-by-Step action:

1. “AMP Content”: this option allows the admin to enter the content that will be displayed on the AMP website version CMS page.
2. Press the “Save Page” button in order to save your changes.

Step-by-Step action:

1. Navigate to the “Content” tab > “Pages” section.
2. “AMP Validation”: option allows admin to validate the page you are currently on.

Step-by-Step action:

1. In the main menu go to the “Content” tab.
2. Navigate to “Blocks” section.

Step-by-Step action:

1. Search for “AMP” page in the search field.
2. Go to “Footer Links AMP” block.

Step-by-Step action:

1. “Enable Block”: option allows to enable or disable the block.
2. “Block Title”: option allows to specify the title of the block.
3. “Identifier”: field shows an identifier for this block. Note: Do not change this identifier.
4. “Store View”: option allows to select the store view the AMP home pages will be visible at.
5. “Content” : option allows to enter the links that will be displayed in the footer of the page.
6. Press “Save Block” in order to save your changes.

Step-by-Step action:

1. Go to the “Content” tab in the main menu > select “Widgets” section.
2. Press the “Add Widget” button.

Step-by-Step action:

1. “Type”: select the type of your widget from the drop-down list.
2. “Design Theme”: choose the design theme.
3. Press the “Continue” button to proceed.

Step-by-Step action:

1. “Type”: the widget type has been already set.
2. “Design Package/Theme”: the design theme has been already set.
3. “Widget Title”: enter the title of the widget.
4. “Assign to Store Views”: select the store view(s) to assign the widget to.
5. “Sort Order”: specify the sort order of this widget.
6. “Add Layout Update”: press this button to be able to configure the layout update.
7. “Display On”: select the page(s) to display the widget on.
8. “Container”: select the container position to display the widget in.

Step-by-Step action:

1. “Title”: specify the title of the widget
2. “Number of Products to Display”: enter the products quantity that will be displayed in the widget.
3. “Category”: select the category from which the products will be selected to display in this widget.
4. “Assign to Store Views”: select the store view(s) to assign the widget to.
5. “Sort By”: select an option to sort the products by.
6. “Sort Order”: select the “Ascending” or “Descending” sort order from the drop-down.
7. “Display Add To Cart Button”: select “Yes” to enable or “No” to disable the option.

Step-by-Step action:

1. Navigate to the “Content” tab in the main menu > select “Pages” > select the needed page or press the “Add New” button.
2. Press the “Insert Widget” button in the “Content” section.

Step-by-Step action:

1. “Widget Type”: select the widget type from the drop-down list.
2. Press the “Insert Widget” button to proceed.

Step-by-Step action:

1. “Widget Type”: has been already selected.
2. “Widget Options”: use the instructions provided above to set the widget options.
3. Press the “Insert Widget” button to proceed.

Step-by-Step action:

1. Once the widget is inserted, the information will be displayed in the visual editor.
2. Press the “Save Page” to save your changes.

Step-by-Step action:

1. This is how the created widget looks on the Magento 2 frontend.