GOOGLE AMP EXTENSION FOR MAGENTO 2 USER GUIDE

Transcription

1 1 GOOGLE AMP EXTENSION FOR MAGENTO 2 USER GUIDE 1

2 2 Contents 1. Google AMP Extension for Magento 2 Overview How Does Google AMP Extension for Magento 2 Work? How to create and customize Magento 2 AMP pages AMP Product List Widget AMP Slide Widget AMP Iframe Widget AMP Social Share Widget AMP Youtube Widget AMP Image Widget General Configuration Note Contact Us

3 3 1. Google AMP Extension for Magento 2 Overview Google AMP - Accelerated Mobile Pages is the hottest trending technology for a faster and smoother loading for mobile web pages. With the ability to be loaded in just few seconds, the new mobile pages will increase user engagement on your store and drop the exit rate. Google AMP Extension for Magento 2 by BSSCommerce is an effective tool to generate and customize AMP pages for your site as your wishes. 2. How Does Google AMP Extension for Magento 2 Work? 2.1 How to create and customize Magento 2 AMP pages The module will auto-generate the category page and product page for your Magento 2 store. For the Homepage, CMS pages and parent category, admins will have to create by themselves using the AMP widgets provided by the extension. Please follow the steps below to create and customize your own AMP pages in Magento 2 3

4 4 Please go to Admin Content Pages Add New Page and start configuration. Set a name for the Page in Page Title. In Content, create the content normally for the desktop version of the Page In AMP Content, choose Insert Widget. In Widget Type, please select among 6 AMP Widget Types including: Product list, Slide, Iframe, Social Share, Youtube and Image. 4

5 5 In the following parts, we will introduce how to configure each type of AMP widgets provided by the extension. 5

6 6 2.2 AMP Product List Widget In Title: Fill in the text displaying above the products. In Height: Choose height for product slider. In Number of Products to Display: Choose the number of products which will be shown. In Image Height: Choose the height of product image. In Image Width: Choose the width of product image. 6

7 7 In Condition: Choose the condition for products which will be shown. 2.3 AMP Slide Widget Please go to Admin BSS AMP Slide AMP Slide Create New Banner and start configuration. In Enable: Choose Yes. In Name: Choose the name for the slide (for management purpose at backend only, not to be displayed at frontend). In Autoplay: Choose Yes for the slide to be auto played, otherwise choose No. In Width: Choose the width for the slide. In Height: Choose the height for the slide. 7

8 8 In the next step, we will create items for the above slide. Please go to Admin BSSCommerce AMP Slide Items Create New Slide Item and start configuration. In Enable: Choose Yes. In Slide: Choose the slide which you just created In Title: Choose the title for the slide items (displayed in frontend). In Link: Choose a link where customer will be directed to once clicking on the slide items. In Caption: Choose the caption which will be displayed under the image. 8

9 9 In Open Url in a New Window: Choose Yes for the link to be displayed in a new window, otherwise choose No. In Sort Order: Choose the order of the image in the slide items. In Image: Upload the image you want to display. Repeat these steps for all the images you want to be displayed in the slide item. The slide item can include many images. Below is an example of the images we put in the slide items for homepage. 9

10 10 After finishing making the slide for the AMP banner, insert the banner in the AMP page. 10

11 AMP Iframe Widget In Link: Choose the link to the Iframe. Please fill in a link with https. The link must be enabled to display at Iframe In Width: Choose the width for the Iframe. In Height: Choose the height for the Iframe. 2.5 AMP Social Share Widget There are 8 types of available social share including Facebook, , Gplus, Linkedin, Pinterest, Tumblr, Twitter and Whatsapp. Choose Yes to enable otherwise choose No. For Facebook, please fill in app ID. 11

12 AMP Youtube Widget In Youtube ID: Choose the text after In Autoplay: Choose Yes for the video to be auto played, otherwise choose No. In Width: Choose the width for the video. In Height: Choose the height for the video. 12

13 AMP Image Widget In Image: Choose the image you want to display. In Alt: Choose Alt text for the image. In Width: Choose the width for the image. In Height: Choose the height for the image. 13

14 General Configuration Please go to Store Configuration BSS COMMERCE Accelerated Mobile Pages and start configuration. 14

15 15 In Enabled: Choose Yes to enable the module, otherwise choose No. In AMP Homepage: Choose the page you created to be AMP Homepage. In AMP Analytics Account: Fill in the ID of your Google Analytics account to integrate AMP pages to Analytics. In Use Https: This configuration works for https website only. Choose Yes to display search box and subscription box, otherwise choose No. If your site is not using https, please choose No. In Button Background Color: Choose the background color for button on AMP pages. In Button Background Color (Hover): Choose the background color for button on AMP pages when hovering. In Button Text Color: Choose the color for text on button on AMP pages. In Button Text Color (Hover): Choose the color for text on button on AMP pages when hovering. In Custom CSS: Set the CSS for all AMP pages. 15

16 16 In Custom CSS for Home Page/ Category Page/Product Page/: Set the CSS for each type of AMP page. 16

17 Note - All the configuration is under store view scope. You can set up AMP version separated for each store view. - AMP is a separated version of your website (not depend on theme). Hence, customization may be needed. - All the CSS configuration must follow AMP standard. Please visit to know more details about the standard. - After making new AMP content / changes to AMP content, please submit the link of the content to Google Search Console for changes to be displayed - To validate your AMP pages, please use these three tools: AMP Validator Extension available for Chrome and Opera 17

18 18 3. Contact Us Any questions or concern about us, feel free contact: Website: Support: Skype: support.bsscommerce BSS Support team is always ready to aid you with any issue related to our products. Additionally, we also give you Website development and Administration Support. We do offer: 1. Free installation services for commercial products. 2. Free updates within offered support period. Our duties: 1. Responsibility for resolving product bugs. 2. Help with technical queries. 3. Technical support in installation and product usage. 18