X hide

Magento 2 Accelerated Mobile Pages v2.x Configuration

From Plumrocket Documentation

You are viewing:  Accelerated mobile pages - 32.png  Accelerated Mobile Pages

Contents

Configuring Magento 2 Accelerated Mobile Pages

Information Sign sm.png Step-by-Step action:
  1. Go to "Plumrocket" tab in the main menu.
  2. Select "Accelerated Mobile Pages" extension.
  3. Navigate to "Configuration" option.
  4. Enable Extension: Select "Yes" to enable the extension or "No" to disable it.
  5. Option "Serial Key": enter unique serial key provided after the purchase for legitimate and proper functioning of your extension. Note: In most cases this field will be pre-filled with serial key automatically and the green check mark will be displayed. Otherwise please read article Serial Key Activation in order to find and paste your serial key manually.
  6. AMP Enabled On: select the required pages to enable AMP for.
  7. "Force AMP on Mobile Devices": if enabled - this option allows to display 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 onto the website directly (not from Google Search Results).
  8. "Force AMP on Tablet Devices": if enabled, this option allows to automatically display AMP version of a site to all tablet users who opened your store directly.
  9. "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.
  10. "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").
  11. Press "Save Config" to save the changes.


1 magento 2 accelerated mobile pages configuration v.2 up.jpg


Information Sign sm.png 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.


Amp social sharing v.2.2.3.jpg


Information Sign sm.png Step-by-Step action:
  1. These options allow you to configure the color scheme of the AMP pages.
  2. These fields allow you to upload the custom logo for the AMP pages.
  3. Press "Save Config" button to save your settings.


2 magento 2 accelerated mobile pages configuration v.2 up.jpg


Information Sign sm.png Step-by-Step action:
  1. This option allows to activate the RTL language support.
  2. Set "Yes" to enable or "No" to disable Zendesk Chat on all AMP pages.
  3. Enter the key required to display the Zendesk button.
  4. Specify button label in this field.
  5. Choose the background color of the button.
  6. Select color of the text on the Zendesk button.


Amp rtl template and amp zendesk chat.jpg


Follow the instructions below in order to configure Magento AMP Display Mode.

Information Sign sm.png 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.


Amp display mode v.2.2.3.jpg


Magento 2 AMP Home Page Configuration

Setting Magento 2 AMP Category Images for AMP Homepage

Magento 2 AMP Home Page is being generated dynamically - it bases on the categories you have. If for some reason the homepage does not have any category images displayed - you will have to set the AMP Homepage Image for these categories manually.


Information Sign sm.png Step-by-Step action:
  1. Go to "Products" tab in the main menu of your Magento 2 > select "Categories" > navigate to the required category.
  2. Go to "AMP Homepage Image" section in the "Content" tab, and upload the need image to be displayed on AMP Homepage.
  3. Press "Save" button to save the category and make sure to clear Magento 2 cache.


11 magento 2 accelerated mobile pages configuration v.2.jpg


Now, if you need, you can proceed with the next steps Magento 2 AMP Homepage setting up.

Information Sign sm.png Step-by-Step action:
  1. In the main menu go to "Content" tab.
  2. Select "Pages" section.


2a magento 2 accelerated mobile pages configuration v.2.jpg


Information Sign sm.png Step-by-Step action:
  1. Search for "AMP" page in the search field.
  2. Go to "Amp Home Page".


Once you selected "Amp Home Page" you can set all the required settings.


3 magento 2 accelerated mobile pages configuration v.2.jpg


Information Sign sm.png 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.


4 magento 2 accelerated mobile pages configuration v.2.jpg


Information Sign sm.png 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.


5 magento 2 accelerated mobile pages configuration v.2.jpg


Information Sign sm.png Step-by-Step action:
  1. "Store View": option allows to select the store view the AMP home page will be visible at.


6 magento 2 accelerated mobile pages configuration v.2.jpg


Information Sign sm.png Step-by-Step action:
  1. "Layout": option allows to select the page layout, based on your requirements. Best suggested option is "1 column".
  2. "Layout Update XML": option allows to paste your layout XML code in order to update your layout.
  3. "Custom Design Update": use this block to create custom layout for a specified period of time.
  4. Press "Save Page" in order to save your changes.


7 magento 2 accelerated mobile pages configuration v.2 up.jpg


Configuring Footer Links AMP Block

Information Sign sm.png Step-by-Step action:
  1. In the main menu go to "Content" tab.
  2. Navigate to "Blocks" section.


9 magento 2 accelerated mobile pages configuration v.2.jpg


Information Sign sm.png Step-by-Step action:
  1. Search for "AMP" page in the search field.
  2. Go to "Footer Links AMP" block.


9a magento 2 accelerated mobile pages configuration v.2.jpg


Information Sign sm.png 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.


10 magento 2 accelerated mobile pages configuration v.2.jpg


Testing Accelerated Mobile Pages

After the extension is configured, make sure it is tested to ensure it is validated and working properly.
Please, check the Next Step > Testing Magento 2 Accelerated Mobile Pages Extension.

Accelerated Mobile Pages Extension for Magento 2 Accelerated Mobile Pages Extension for Magento 2

Buy Magento 2 Accelerated Mobile Pages Extension on Plumrocket Store
Click below to check key features of this extension, view live demo and screenshots:
Navigation