1.0 Introduction of Knowband Prestashop Accelerated Mobile Pages (AMP) Addon:
Accelerated mobile pages or AMP can effortlessly boost the performance of the websites on the mobile devices. AMP provides convenient access to information on the Internet from the screens of smartphones and tablets. AMP is an advance Google technology which reduces the load time of the mobile website. With the introduction of mobile-first indexing, the goal of every eCommerce store owner should be to reduce the load time of their websites for the mobile users. High load time increases the bounce rate of the website. For increasing the performance of Prestashop store website on mobiles, Knowband offers the Prestashop Accelerated Mobile Pages (AMP) Module.
Prestashop AMP module allows the admin to convert the home page, category pages, product pages and CMS pages into fast-loading AMP pages. By limiting the data displayed, Prestashop Accelerated Mobile Pages Module reduces the load time of the mobile sites. Also, with the Prestashop addon, the e-merchant has an ability to enable/disable additional sections on the webpages like Best Sellers, Featured Products, New Arrival. You can now provide amazing user experience to your audience base who browses the site through their handheld devices. In the mobile generation, once your mobile-first customers are happy, sales will happen easily.
1.1 Features of Prestashop Accelerated Mobile Pages Module:
1. Prestashop Accelerated Mobile (AMP) Module allows the store admin to convert web page to AMP without making any core changes in the code of the website. This limits the data displayed on the mobile site, thus, boosting the load time of the same. In short, the Prestashop addon can amp up the load time of the mobile sites by creating accelerated mobile pages of the site. However, it will not affect the load time or performance of the desktop sites.
2. With the help of the Prestashop AMP Module, the store admin can convert the home page, category pages, product pages and CMS pages to AMP.
3. Knowband’s Prestashop Accelerated Mobile(AMP) addon provides an option to the store owner to customize the home page, category pages, product pages and CMS pages settings form the back-office.
4. The admin can upload the Business logo on AMP and they can also fix the width and height of the website.
5. Prestashop AMP Module offers the store merchant an option to add the Custom CSS for adding the additional functionality.
6. Google Accelerated Mobile Pages Module enables the store admin to enable/disable the display of the bestsellers option, featured and new products on home page. Apart from this, they can set the number of featured products to be shown in a particular section. The random products are automatically fetched and displayed to the user.
7. The Prestashop store owner can change the banner of the best sellers, featured and new products on the homepage.
8. Prestashop Accelerated Mobile Pages (AMP) module has provided the social media sharing options on the AMP. Even admin can add more icon by adding the script.
9. The Admin can customize the categories of AMP from the back-end of the Prestashop AMP Module. The customers to browse categories from the AMP page.
10. By using the Google Accelerated Mobile Pages Module, the admin can automatically generate AMP sitemap with the help of CRON.
11. The Admin can generate AMP sitemap by click the button.
12. Knowband’s Prestashop Accelerated Mobile Pages Addon supports Google Analytics. The eCommerce admin can enter the Analytics client Id for tracking the AMP performance.
13. Google Accelerated Mobile Pages Module supports multiple languages.
14. With the help of Prestashop AMP Module, the Prestashop store admin can set color and background color for AMP website and other different blocks of AMP.
15. Prestashop AMP module is easy to use and handle.
16. This Knowband’s Prestashop AMP Module also supports GDPR compatibilty. Admin can map the cookie policy to any CMS page of the website.
17. The eCommerce store owner can show YouTube, Vimeo and DailyMotion videos on the homepage of mobile pages.
18. Google Accelerated Mobile Pages(AMP) Addon provides an option to display Instagram and twitter feeds on the homepage.
19. The e-merchant can manage the look and feel of cookie consent bar from the admin interface without any hassle.
20. The store admin can display advertisement on all the Mobile Pages by including Google adsense from the admin interface of Prestashop Accelerated Mobile Pages module.
21. The store owner can also implement Facebook pixel on the mobile pages. Facebook pixel is an analytic tool which tracks the store visitors.
Technology for Development
Language: PHP
FrameWork: PrestaShop
2.0 Steps For Installation of Prestashop Accelerated Mobile Pages (AMP) Addon:
1.The folder structure of the Prestashop AMP module.
2. Copy the whole folder named as product update into your modules folder of the root directory of your PrestaShop store through FTP.
3. You will be able to find the product AMP plug-in ready to be installed in the Modules in your PrestaShop store as shown below.
4. Click on the Install link to install the plugin.
Now, your Prestashop Accelerated Mobile Pages (AMP) Plugin is ready to use and click on “Configure” link to configure this Prestashop module by Knowband.
3.0 Admin Interface
After installing Google Accelerated Mobile Pages(AMP) Module into the store, the Prestashop addon will provide the following interfaces:
1. General Settings
2. Home Settings
3. Category Page Settings
4. Product Page Settings
5. Menu Settings
6. Look and Feel Settings
7. Social Media Settings
8. Extra Icon Settings
9. Google Settings
10. Sitemap Settings
Each interface of this Knowband’s Accelerated Mobile Pages (AMP) module for Prestashop is explained below.
3.1 General Settings
General Settings tab of this Prestashop AMP addon has following options:
- Enable/Disable: Initially, this field of Prestashop Accelerated Mobile Pages module by Knowband will be disabled. The admin can enable/disable the plugin by toggling the button.
- Enabling this setting will convert the Website Pages into AMP.
- Force AMP on Mobile Device: In this section of Knowband Prestashop AMP addon, the admin can enable the settings to AMP pages on Mobile Device.
- Website Logo: Using this option of the Google Accelerated Mobile Pages(AMP) Module, the store merchant can upload or change the logo of the AMP.
- Logo Width: Here the store admin can set the width of the Logo in Pixel.
- Logo Height: Here the store admin can set the height of the Logo in Pixel.
- Enable GDPR Cookie Consent Bar: Admin can enable/disable this setting to display on AMP pages.
- Cookie Consent Message: Admin can add custom text for cookie consent bar displayed to the user.
- Cookie Policy: Admin can select the page which is to be displayed on Cookie Policy.
- Enable/Disable Home Page AMP: The store admin can enable/disable AMP on the Home Page of the site. After enabling the option, the admin can check the Home page AMP by clicking on the Preview button.
- Enable/Disable Category Page AMP: The store admin can enable/disable AMP on the category pages. After enabling the option, the admin can check category page AMP by clicking on the Preview button.
- Enable/Disable Product Page AMP: Using this option of the Prestashop Accelerated Mobile Page (AMP) addon, the store admin can enable AMP on the product pages AMP of the site and can view the same by clicking on the PREVIEW button.
- Enable/Disable CMS Page AMP: Prestashop AMP Page Module gives an option the store retailer to convert the CMS page to AMP. The look and feel of the pages can be viewed by clicking on the Preview button.
- Custom CSS: Prestashop store admin can add Custom CSS code as per business requirement in this section.
3.2 Home Page Settings
In this tab of the Prestashop Accelerated Mobile Pages (AMP) Addon by Knowband, the admin can enable/disable the display of new arrivals, best sellers and featured products on the AMP Home page of this Prestashop module in various languages. This tab will have the following options:
1. Home Page Settings
2. Featured Product Settings
3. Best Selling Product Settings
4. New Arrival Product Settings
3.2.1 Home Page Settings:
- Display Custom Text: The Admin can enable/disable the Custom Text option here.
- Custom Text: In this Google Accelerated Mobile Pages Addon, the store admin can change the text of the Home page block.
- Display Position: The admin can select the display position that will be reflected the front end of the site.
3.2.2 Featured Products Settings:
- Enable Featured Products: Using this option of the Prestashop AMP extension, the eCommerce store admin can enable/disable the featured products section.
- Display Featured Products in Carousel: Here the store admin can the featured products in the carousel.
- Random Display: The Store admin can enable/disable the Random product display option. After enabling this feature, random product display in the particular section in AMP.
- Number of Featured Products: Knowband’s Prestashop Accelerated Mobile Pages Addon allows the store admin to select the number of products which they want to show in the Feature Product section.
- Display Banner: The eCommerce merchant can enable/disable the display banner option.
- Upload Banner: In this field, the store admin can upload the banner for the featured product.
3.2.2 Best Selling Products Settings:
In this tab, the Prestashop store admin can customize the settings of the best selling product. Refer to the attached screenshot below:
3.2.3 New Arrival Products Settings:
The admin has control over the display of New Arrival Product positions on AMP pages.
3.2.4 YouTube Video
Here, you can apply the settings for showing the YouTube videos.
- Display Youtube Video: The store admin can enable or disable the settings to show youtube videos on the homepage.
- Youtube video id: The online store admin can enter the video id in order to display it on the homepage.
- Enable Youtube header text: The Prestashop Accelerated Mobile Pages Addon provides an option to enable the settings for showing youtube video’s header text.
- Youtube header text: Admin can set the header text in various languages.
- Autoplay: Admin can apply the settings for video autoplay.
- Display controls: Admin can show the display controls by enabling the option.
- Display positions: The store admin can show the display position for the videos.
3.2.5 Vimeo Video
The store admin can also show Vimeo videos on the website’s homepage by applying these settings.
- Enable the settings for showing Vimeo video on the homepage. Customization options are same as youtube videos.
3.2.6 DailyMotion Video
As an eCommerce store admin, you can also show DailyMotion videos on the website homepage by applying these settings.
- Display DailyMotion Video: The store admin can show DailyMotion videos on the homepage.
- DailyMotion Video ID: The online store admin can enter the DailyMotion video id from the admin interface of this Google Accelerated Mobile Pages (AMP) Addon.
- Enable DailyMotion Header Text: The store admin can enable or disable the settings from the admin interface.
- DailyMotion Header text: Enter the header text here.
- Autoplay: Enable to Auto play videos.
- Enable End Screen: Enable the settings to show the end screen.
- Enable video sharing: Allow video sharing by enabling the options.
- Change Highlight color: Admin can also enable the settings in order to change the highlight color.
- Highlight colors in the controls: Set the color from the color picker tool.
- Display DailyMotion Logo: Enable the settings in order to display DailyMotion logo.
- Display Position: Set the video position from the admin interface.
3.2.7 Instagram feed
Admin can show Instagram feeds on the homepage.
- Display Instagram feed: Enable the settings to display Instagram feeds.
- Feed id: Enter the feed id here.
- Enable Instagram Header Text: Switch the button to yes in order to display header text.
- Instagram Header Text: Enter the header text for Instagram.
- Include Instagram Caption: Enter the Instagram caption in order to display it on the website homepage.
3.2.8 Twitter Feed
The online store admin can show twitter feed on the homepage if he wishes to do so.
- Display Twitter Feed ID: Enable the settings in order to display twitter feeds on the homepage of the website.
- Twitter ID: Enter the twitter id here.
- Enable twitter header text: Enable the settings for showing header text.
- Twitter Header text: Set the header text here.
- Disable Twitter cards: By enabling the option you can show twitter cards on the homepage.
3.3 Category Page Settings
The Category Page Settings tab of the Prestashop Accelerated Mobile Pages Addon allows the admin to add the text and images. Apart from this, the admin can also define the position of the text on the Category page. This tab will have the following options:
- Display Custom Text: The Admin can enable/disable the Custom message option.
- Custom Text: Using this option of the Prestashop AMP Module, the eCommerce store admin can set the message of the category Page.
- Display Position: In this tab, the store admin can change the display position as per desires. These changes will be reflected in the front of the store.
- Product Image Size: The Prestashop store admin can set the Image type here.
3.4 Product Page Settings
The admin has control over product page settings on AMP pages. This tab will have the following options:
- Display Custom Text: The Admin can enable/disable the Custom message option.
- Custom Text: Using this option of the Prestashop AMP Module, the eCommerce store admin can set the message of the Category Page.
- Display Position: In this option, the store admin can change the display position as per desires. These changes will be reflected in the front-end of the store.
- Product Image Size: The Prestashop store admin can select the image size to be displayed here.
- Display Short Description: In this option, the store admin can show the short description of the product by enabling this feature.
- Display Long Description: The store owner has an option to show the long description of the product as per the requirement.
- Display Product Review: By using the Prestashop Accelerated Mobile Pages Module, the store admin can enable the Product review option. After enabling this feature, product review will be shown in the front-end of the store.
- Display Additional Info: By enabling this feature, the admin can show the additional info of the products.
- Display Related Products: By enabling this option, the store admin can display related product. These changes will be reflected in the front of the store.
3.5 Menu Settings
In this Tab, the Prestashop store admin can configure the menus on AMP. The admin can even add new menu options. This tab will have the following options:
- Enable/Disable: The admin can enable the AMP in menus by toggling the button.
- Menu Title: Prestashop AMP Addon by Knowband allows the store admin to add the Menu by entering the title here.
- Parent Menu Item: Here the eCommerce merchant can select the Parent menu as per the desire.
- Menu Item Type: The Admin can select the item type of menu.
- Select Category: The Store admin can select the specific page where they want to redirect the user to the defined AMP page.
NOTE: These Changes shown in the Menu Structure section.
3.6 Look and Feel Settings
The Admin can control the color settings, personalize their website AMP colors as per your needs. They can change the AMP page colors according to your theme and preferences. This tab will have the following section:
1. General Settings
2. Product Listing Settings
3. Category Settings
4. Product Settings
5. Cookie Consent Bar Settings
3.6.1 General Settings
In this tab of the Prestashop Accelerated Mobile Pages(AMP) addon by Knowband, the admin can customize the AMP Homepage settings. This tab will have the following options:
- Background Color: The Admin can change the background color of the home page.
- Font Color: The admin can change the font color from this section.
- Header Background Color: This field of Prestashop Accelerated Mobile Pages (AMP) Module allows the admin to set the header background color.
- Header Font Color: Using this option of the Prestashop AMP module, the admin can set the font color of the text displayed in the Header section.
- Header Icon Color: The Prestashop store admin can change the icon color of the.
- Footer Background Color: This option of the Google Accelerated Mobile Pages(AMP) Module allows the admin to set the background color of the Footer.
- Footer Font Color: The admin can change the font color from this section.
- Footer Lower Bar Background Color: The Store merchant can change the background color of the Footer Lower Bar.
- Left Menu Slider Background Color: The Prestashop Merchant can change the Left menu slider background color in this section of Knowband Accelerated Mobile Pages(AMP) For Prestashop.
- Left Menu Header Background Color: The Prestashop store admin can change the left menu header background color as per the requirement.
- Left Menu Slider Font Color: The admin can change the font color from this section.
- Left Menu Sidebar Icon Color: The admin can change the icon color from this section.
- Header Left Background Color: In this section of Prestashop Accelerated Mobile Pages(AMP) Module allows the admin to set the header left background color.
3.6.2 Product Listing Settings
The admin can customize the settings of the Product listing as per the requirement. Below mentioned the option:
- Product Title Color: In this section of Google Accelerated Mobile Pages(AMP) Module allows the admin to change the Product title color.
- Product Title Font Size: The Store admin can set the font size of the Product.
- Add to Cart Button Color: Knowband’s Prestashop AMP Pages module allows the admin to change the Add to Cart Button Color as per desires.
- Add to Cart Button Font Color: The admin can customize the font color of the Add to Cart button.
- Add to Cart Font Size: The Store admin can set the font size of the Add to Cart button.
3.6.3 Category Settings
In this tab, the store admin can customize the settings of the Category pages. These changes will be reflected in the front of the store.
- Category Heading Font Color: The Prestashop store admin can change the category heading font color as per the requirement.
- Category Heading Font Size: The admin can change the font color from this section.
3.6.4 Product Settings
In this section, the Admin can customize the Product settings as per the requirement. The configuration option of this section is same as discussed in the Product listing section.
3.6.5 Cookie Consent Bar
The store admin can set the look and feel of the cookie consent bar.
- Cookie Consent Background color: Select the cookie consent background color with the help of color picker tool.
- Consent message font color: Select the front color for consent message.
- Background color of Accept button: Select the “Accept” button background color.
- Font color of accept button: Set the font color of accept button using color picker tool.
3.7 Social Media Settings
In this section of the Prestashop AMP module, the store admin can enable/disable the social media sharing option on the AMP webpages. All the enabled social media sharing options will be shown on the AMP. This tab will have the following options:
- Display Shop Address in Menu Slider: The Admin can show the Store address by enabling this feature.
- Display Shop Email Address: The Prestashop store owner can show the email address.
- Display Shop Contact Number: In this field, the store admin can display the contact details of the site.
- Display Facebook Icon: The store admin has the option to display a Facebook icon in the menu bar. For this admin need to specify the Facebook page URL in the respective field.
- Display Twitter Icon: This section the admin can enable/disable the Twitter icon.
- Display Google Icon: By using this Option the Prestashop store merchant can display the Google icon in the menu bar. For this admin need to Specify the Google page URL in the respective field.
- Display Linkedin Icon: In this section, the store admin can display the Linkedin icon here. The Store admin must need to enter the URL of the profile.
- Display Tumblr Icon: The Prestashop store owner can show the Tumblr profile here.
- Display Pinterest Icon: The Store admin has the option to display a Pinterest icon in the menu bar. For this admin need to Specify the Pinterest page URL in the respective field.
3.8 Extra Icon Settings
In this section, the admin can add the extra social media icon as per the requirement of the business. This tab will have the following options:
- Enable Extra Icon: The Prestashop store admin can enable/disable the extra icon feature. If they want to add more social media icon then they can add here with an ease.
- Icon Class: The Admin can enter the Icon class.
- Icon URL: In this tab, the store admin can Icon URL as per desires. These changes will be reflected in the front of the store.
3.9 Google Settings
The store admin can apply AMP Google settings from this section.
3.9.1 Google Analytics
Admin will need to have the Analytics Client ID in order to configure this feature.
- Enable Google Analytics: If you want to track the performance of the accelerated mobile pages of your site, this feature allows the admin to enter Google Analytics client.
- Analytics Client Id: The eCommerce merchant can enter your Google analytics client ID to configure.
3.9.2 Google Adsense
- Enable Google Adsense: Activate or Deactivate the functionality from here.
- Adsense ID: Enter the Adsense ID here.
- AMP ad type: Enter the supported AMP ad type. This way the admin can specify an identifier for the ad network. The type attribute selects the template to use for the ad tag.
- Display Google Adsense on Homepage: Enable the option in order to display Google adsense on Homepage.
- Display Position on Homepage: Select the position for showing Google adsense on homepage.
- Display Google Adsense on Product page: Enable the option to show adsense on Product page.
- Display Position on Product page: Select the position for displaying Google adsense on product page.
- Display Google Adsense on Category page: Enable the option to show adsense on category page.
- Display Position on Category page: Select the position for showing Google adsense on category.
- Display Google Adsense on CMS page: Enable the option to show adsense on CMS page.
- Display Position on CMS page: Select the position for showing Google adsense on CMS.
3.9.3 Facebook Pixel
Facebook pixel is a analytic tool which helps to track store visitors. You can also implement this to get store visitor details on the Accelerated Mobile Pages.
- Enable Facebook Pixel: Enable or disable the option from here for implementing Facebook pixel tool to track site visitors.
- Facebook Pixel ID: Enter the Facebook Pixel ID here.
3.10 Sitemap Settings
In this section, the store admin can generate the AMP Sitemap by clicking the button.
Generating the Sitemap are here.
How to Generate Sitemap for AMP?
The Admin can generate Sitemap by running CRON.
Accelerated Mobile Pages(AMP) module allows the store admin to setup Cron via
URLs to Add to Cron via Control Panel
Cron setup via SSH
CRON Configuration:
In order to generate the Sitemap automatically, the Prestashop store admin can set up the cron job. There are two options available in the admin panel of the module.
1. The Admin can run the cron manually.
Add the cron to your store via control panel/putty to generate/update the sitemap. Please find the instructions to setup crons below –
URLs to Add to Cron via Control Panel
Generate Sitemap –
https://psm.knowband.com/amp/16/en/module/kbamppages/cron?action=syncSiteMap&secure_key=09ce2811f9ab619dc4b64f69b134d4d4
Cron setup via SSH
Generate Sitemap – 40 * * * * curl -O /dev/null
‘https://psm.knowband.com/amp/16/en/module/kbamppages/cron?action=syncSiteMap&secure_key=09ce2811f9ab619dc4b64f69b134d4d4’
4.0 Front Interface of the Prestashop Accelerated Mobile Pages Module:
After enabling the Prestashop Accelerated Mobile Pages(AMP) Module by Knowband the store admin can enable the settings for the home page, category pages, product pages and CMS pages. As per the settings enabled by the admin, AMP will look as shown below:
Home Page:
Prestashop AMP Pages allows the admin to show the Best Seller, New Products and Features Product on the Home page. For better user engagement.
Now the online store admin can also show Youtube video, Vimeo video and Dailymotion video on the website homepage.
Apart from that, the store admin can show Instagram feeds and twitter feeds on the homepage.
Category Page
As per the setting enabled by the admin, the Category AMP Pages on the Mobile device will appear like this screenshot.
Product Page
As per the setting enabled by the admin from the back-office the layout of Product AMP Page on the Mobile device will appear like this screenshot.
CMS Page
The Admin can view the CMS page setting like below settings.
Menu Icon
Prestashop Accelerated Mobile Pages shows the Menu icon like this.
Cookie consent bar will be displayed as shown below:
This way the online store admin can increase the speed of mobile website pages and offer a better store experience to the online store visitors and customers. This Prestashop Accelerated Mobile Pages module converts the general pages into accelerated mobile pages. The Prestashop Accelerated Mobile Pages Addon provides simple and easy steps to set up accelerated mobile pages. The e-merchant can separately configure the homepage, product pages and category pages. The Prestashop store admin can easily manage all the settings of Prestashop Accelerated Mobile Pages module without changing even a single line of codes. The e-merchant can also show product videos, menu items and social media icons easily.
For more information about PrestaShop Accelerated Mobile Pages(AMP) Addon:
PrestaShop Accelerated Mobile Pages Module Link
PrestaShop Accelerated Mobile Pages(AMP) Addon Admin Demo Link
PrestaShop Accelerated Mobile Pages(AMP) Addon Front Demo Link