Accelerated Mobile Pages v1.x Configuration for Magento 1 From Plumrocket Documentation

Transcription

1 Accelerated Mobile Pages v1.x Configuration for Magento 1 From Plumrocket Documentation Contents 1. Configuring Accelerated Mobile Pages 2. AMP Home Page Configuration 2.1. Setting AMP Category Images for AMP Homepage 3. Configuring Footer Links AMP Block 4. Testing Accelerated Mobile Pages Configuring Accelerated Mobile Pages In this article you will learn how to configure our Accelerated Mobile Pages Extension for Magento 1 correctly. Please, follow the instructions below. Go to the main menu and select "Plumrocket" tab > "Accelerated Mobile Pages" section.

2 1. Enable Extension: Select "Yes" to enable the extension or "No" to disable it. 2. 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. 3. AMP Enabled On: select the required pages to enable AMP for. 4. "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 nonamp pages when landing onto the website directly (not from Google Search Results). 5. "Force AMP on Tablet Devices": if enabled, this option lets you automatically display AMP version of a site to all tablet users who opened your store directly. 6. "Load All AMP Pages Over CDN": if enabled, this option allows to load all AMP pages directly from Google AMP CDN (cdn.ampproject.org), not from your server. It allows to speed up pages load time, however page caching might take longer to be completed. 7. "Enable AMP Iframe With Product Options": enable this option in order to activate AMP Iframe (allows to display your product custom options) on the Product Page. 8. "AMP Iframe Path": this option allows to enter 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") 9. Press "Save Config" to save the changes.

3 1. Enable Social Sharing: Select "Yes" to enable the option or "No" to disable it. 2. "Active Share Buttons" option: allows admin to select the social buttons to be displayed on the AMP Product Pages. 3. Enter Facebook App ID in the relevant field in order to be able to use the Facebook "Share" button on AMP product pages.

4 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.

5 1. Option "Google Tag Manager Snippet": enter the code for the tag from your Google Tag Manager account in order to quickly add and update site tags from the GTM. 2. "Enable RTL Template": this option allows to enable or disable RTL template (right to left language e.g. Hebrew). AMP Home Page Configuration Here you will learn how to setup the Accelerated Mobile Homepage. Setting AMP Category Images for AMP Homepage AMP Home Page is being generated dynamically, based on the categories you have. If for some reason the homepage does not have any category images displayed - you will need to manually set the AMP Homepage Image for these categories. 1. Navigate to Admin Panel > Catalog > Manage Categories > select the required category. 2. Go to "General Information" tab and choose "AMP Homepage Image" section.upload the required image you need to be displayed on AMP Homepage. 3. Save your changes by pressing "Save Category" button and make sure to clear Magento cache. Also, please perform complete Magento Reindex.

6 Now, if needed, you can proceed with the next steps AMP Homepage configuration. 1. In the main menu go to "CMS" tab. 2. Select "Pages" section. 3. Search for "AMP" page in the "Title" field. 4. Go to "Amp Home Page". Once you selected "Amp Home Page" you can set all the required settings.

7 1. Go to "Page Information" tab. 2. "Page Title": option allows to specify the name of page. 3. "URL key": field shows URL key that identifies this page. Note: Do not change this URL key. 4. "Store View": option allows to select the store view the AMP home page will be visible at. 5. "Status": option allows to enable or disable the page. 1. Go to "Content" tab. 2. "Content Heading": option allows to specify the heading of the home page content. 3. Edit or add the content as you need, and paste it here.

8 1. Go to "Design" tab. 2. Layout": option allows to select the layout of the page, based on your requirements. 3. "Layout Update XML": option allows to paste your layout XML code in order to update your layout. 4. "Custom Design": use this block to create custom layout for a specified period of time. In case you need to change links and/or add images on your Magento Home Page, you need to edit the following file: app/design/frontend/base/default/template/pramp/head/css/index.phtml Please note, before making any changes - you need to copy this file to your theme directory: app/design/frontend/my_theme/default/template/pramp/head/css/index.phtml 1. "Meta Data": option allows to enter meta keywords for this page. 2. "Meta Description": allows to enter meta description of this page. 3. Press "Save Page" in order to save your changes.

9 Configuring Footer Links AMP Block 1. In the main menu go to "CMS" tab. 2. Select "Static Blocks". 3. Search for "AMP" page in the "Title" field. 4. Go to "Footer Links AMP block". 1. "Block Title": option allows to specify the name of the block. 2. "Identifier": field shows an identifier for this block. Note: Do not change this identifier. 3. "Store View": option allows to select the store view the AMP home pages will be visible at. 4. "Status": option allows to enable or disable the block. 5. "Content": option allows to enter the links that will be displayed in the footer of the page.

10 This is how the Accelerated Mobile Pages will look like on the frontend of your Magento store. 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 Accelerated Mobile Pages Extension.