Prestashop Accelerated Mobile Pages (AMP) Addon- User Manual

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.

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.

Installation

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.

Configuration | Prestashop Accelerated Mobile Pages(AMP) Addon

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

screenshot-2018-12-07-15-12-53

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:

Prestashop Accelerated Mobile Pages(AMP) Addon | 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.

Custom Text| Prestashop Accelerated Mobile Pages(AMP) Addon

Display Position: The admin can select the display position that will be reflected the front end of the site.

screenshot_2018-12-07-homepage-settings-%e2%80%a2-fashion-store

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.

Random Display | Prestashop Accelerated Mobile Pages(AMP) Addon

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:

screenshot_2018-12-07-homepage-settings-%e2%80%a2-fashion-store1

3.2.3 New Arrival Products Settings:

The admin has control over the display of New Arrival Product positions on AMP pages.

screenshot_2018-12-07-homepage-settings-%e2%80%a2-fashion-store2

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:

Category Page Settings | Prestashop Accelerated Mobile Pages(AMP) Addon

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:

Product Page Settings | Prestashop Accelerated Mobile Pages(AMP) Addon

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.

Prestashop Accelerated Page Mobiles(AMP) Addon | Product Page Short Description

Display Long Description: The store owner has an option to show the long description of the product as per the requirement.

Long Description | Prestashop AMP Module

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.

Additional Information | Prestashop AMP Module

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:

Menu Settings | Prestashop Accelerated Mobile Pages(AMP) Addon

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.

Prestashop Accelerated Mobile Pages(AMP) Addon

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

3.6.1 General Settings

Prestashop Accelerated Mobile Pages(AMP) Addon | Look and Feel 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 Icon Color: The admin can change the icon 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

Look and Feel Product Settings | Prestashop Accelerated Mobile Pages(AMP) Addon

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.

Prestashop Accelerated Mobile Pages(AMP) Addon

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.

Look and Feel Product Settings | Prestashop Accelerated Mobile Pages(AMP) Addon

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:

Social Settings | Prestashop Accelerated Mobile Pages(AMP) Addon

Display Shop Address in Menu Bar: 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:

Prestashop Accelerated Mobile Pages(AMP) Addon | Extra Icon Settings

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 Analytics Settings

Admin will need to have the Analytics Client ID in order to configure this feature.

Google Analytic | Prestashop Accelerated Mobile Pages(AMP) Addon

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.10 Sitemap Settings

In this section, the store admin can generate the AMP Sitemap by clicking the button.

Sitemap | Prestashop Accelerated Mobile Pages(AMP) Addon

Generating the Sitemap are here.

Sitemap Settings | Prestashop Accelerated Mobile Pages(AMP) Addon

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:

Home Page | Prestashop AMP 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.

Category Page

As per the setting enabled by the admin, the Category AMP Pages on the Mobile device will appear like this screenshot.

screencapture-pstest2-knowband_2-1

Product Page

Prestashop AMP Page | Category 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

Prestashop Accelrated Mobile Page | CMS Pages

The Admin can view the CMS page setting like below settings.

Prestashop Accelerated Mobile Pages shows the Menu icon like this.

Prestashop Accelerated Mobile Pages | Category AMP Page

Joe Parker

We boast of the best in the industry plugins for eCommerce systems and has years of experience working with eCommerce websites. We provide best plugins for platforms like - Magento, Prestashop, OpenCart and Shopify . We also provide custom module development and customization services for the website and modules..

Leave a Reply

Your email address will not be published. Required fields are marked *