Read More
Read More
Menu Close

    Prestashop AMP (With Checkout)

    Nowadays, every eCommerce merchant wants to provide an unparalleled user experience to customers. For this, they are always in search of the features that can help in achieving their dream of providing a great user experience. Thinking about our trusted base of eCommerce merchants & with a motive to help them in realizing their dream, we bring you the Prestashop AMP module.

    The module helps you to increase your website performance on mobile devices. Easily create the AMP for the home page, category page, product page, cart page, checkout page, and CMS page. AMP pages load faster & also help in decreasing the bounce rate.

    Prestashop AMP module is compatible with PrestaShop framework version 8.x.x.

    Note: AMP pages will only support standard Prestashop features. It will not support third-party modules.

    Check the overview of the plugin in the video mentioned-below –

    Searching for an experienced
    Prestashop Company ?
    Read More
    k0VJWBuLAwY

    How AMP Module Works

    Our module provides AMP pages for your website and the display of AMP page totally depends on Google. You can validate your AMP pages on AMP validator tool here: https://validator.ampproject.org/

    Google automatically calls AMP page of your website, you do not need to call any amp page by yourself. After crawling the AMP pages, you can check your website amp pages in google console. Keep in mind, it may take some time for Google to index your AMP pages. You will not see them appear in your search results right away.

    Also, something to note, the first users to implement Google AMP will probably take precedence over small publishers. Many of the bigger publishers were using AMP in its beta testing days and therefore have a stronger foundation.

    Another thing to keep in mind is that much of your visibility depends on the user’s search query and the algorithms of Google – even if you’ve passed all Google AMP validation tests.

    You can also check the AMP page from the module back office, but that does not mean that the AMP has been created for that page, it will only show, how it will look. Creation on the AMP page will depend on Google, as explained earlier.

    Features

    1}

    • The module supports PrestaShop MultiShop feature.
    • Admin can create AMP pages for Homepage, Category pages, Product pages, Cart page, checkout page, and CMS page.
    • Display GDPR consent in AMP pages.
    • Display the products from same category on AMP product page.
    • Option to display the products from same category on AMP product page in Carousel view.
    • Option given to create menu for AMP Pages.
    • Check AMP pages even when pages are disabled from module configuration.
    • Enable/Disable the display of website logo, search bar, contact details, and social media links in the main menu.
    • Admin can choose to autoplay the slider images on Home AMP page and even set the slider speed.
    • Enable/disable the display of best sellers, featured, and new products on AMP home page.
    • Option to display the best sellers, featured products, and new arrivals on AMP home page in Carousel view.
    • Add banners for featured, best sellers and new arrivals section on AMP homepage
    • Configure the positions of best sellers, featured products and new arrivals on AMP home page.
    • Admin can add YouTube, Dailymotion and Vimeo video on AMP home pages.
    • Supports Facebook Pixels, Google Adsense, and Google Analytics.
    • Enable/Disable the display of category image and subcategories on Category AMP page.
    • Show product’s short description, description, features, related products, social media links on AMP product page.
    • Add Custom Text on AMP product page.
    • Multiple theme options for AMP pages to choose from.
    • Admin can upload AMP page header logo and customize the selected theme using color settings.
    • Provision to set the dimensions for the header logo.
    • Revamped Menu features according to amp standards.
    • Automatically generate AMP sitemap through Cron.
    • Users can easily search for a product from the AMP page.
    • Option for customers to browse categories from the AMP page.

    2}

    • User can manage login/logout from the main menu.
    • User can Sign Up in AMP page.
    • Language and currency dropdown added to the main menu.
    • Admin can create AMP pages for cart and checkout page.
    • Quantity badge added to cart icon which displays number of products added to cart.
    • Website font family added to “Color Settings” with the help of which admin can now change the font of text on AMP pages.
    • Cart popup where a customer can view product details, quantity of product added to cart, and price details.
    • Now a customer can make payment at AMP end using default payment methods cheque and bank wire or make payment on the main website using the available payment methods.
    • Whole checkout process has been implemented so that a customer can place an order at AMP end.
    • Slider caption text gets displayed on the images in a slider.
    • Sorting options are shown on AMP category page.
    • Choose template for the AMP product page and AMP category page.

    How to install the module

    1. Firstly, go to the module manager in the back-office and click on ‘upload a module’.
    2. After that, drag and drop the module file or select the file from the system.
    3. In this way, the module installation will be successful.
    Click to install Prestashop AMP module
    Upload the file of Prestashop AMP module
    Prestashop WooCoomerce Connector module is successfully installed

    How to configure the Prestashop AMP

    After successful installation, admin can configure the module settings.

    Module-configure

    General Settings

    Documentation

    Admin can check the user manual for more information on the module. Also, admin can check the whole layout of website AMP page. Please note that this manual will show how the AMP pages for your website would look. It does not mean that the AMP pages have been created for your website.

    2-6

    General Settings

    After the successful installation of the module, admin can create AMP pages for the following pages:

    • Home Page
    • Category Page
    • Product Page
    • Cart Page
    • Checkout Page
    • CMS Page

    The display of AMP pages depends on Google. They also show the statistics of the AMP pages separately.

    Note: Admin can also check the AMP pages for the above-mentioned pages even if the AMP for these has been disabled. However, the actual AMP page will not be available for those pages which have been disabled. Admin can also set the image type as per the resolution of their images as desired.

    3-5

    If “Demo Mode” has been enabled, then the search engines will not able to detect the AMP page but admin can check his AMP pages by adding “?ampdemo=1” at the end of your website Url.

    Cookie Consent

    If admin has choosen to display the cookie consent, then it will appear on all AMP pages in the front.

    4-4
    1-14

    Menu Settings

    Menu-Settings

    Main Menu Structure

    Under this, the admin will need to select the Menu type for the AMP pages.
    There are 3 types available.

    1- Main Menu
    2- Custom Menu
    3- PrestaShop Category Tree

    Let’s understand all the 3 type one by one.

    1- Main Menu – In this option, AMP follows the menu structure from PrestaShop main menu module (ps_mainmenu).

    9-3

    2- Custom Menu – In this option, the admin can create the Menu as per his requirement.

    7-3

    In Custom Menu, there are further following types are available.
    1- Category
    2- Manufacturer
    3- Supplier
    4- CMS
    5- CMS Category
    6- Product
    7- Custom Link

    8-4

    Let’s begin with the type Category.

    Here, you will need to select the categories that you want to add in the Menu. Furthermore, you can set the positions of the categories as per your needs.
    Note, the title field will get automatically fill once you will select any category. If you wish you can enter the title and then select a category however, in that case, the category will be added with the Title name.

    10-3

    Type: Manufacturer

    11-4

    Product

    12-3

    Type: Custom Link

    Custom-link

    3- PrestaShop Category tree – With this option, PrestaShop category tree fill display in menu.

    14-3


    Front End View – Main Menu

    Click-here-to-view-main-menu

    Custom Menu at Front End.

    Custom-menu-added-by-admin

    Main Menu

    15-3

    Prestashop AMP Pages Settings

    Home Page Setting

    homepage

    Slider Setting

    Under “Slider Settings”, admin can enable/disable the display of slider on homepage.

    17-3

    Front End View

    Admin-can-change-the-slider-image

    Home AMP Page Setting

    Homepage-BO

    Front End View

    Banner-FO

    Home Video Setting

    Home-Video

    Front End View

    video-at-the-top-position

    Category Page Settings

    Category-page-BO
    category-page-template-FO

    Also, sorting option is given on the Category AMP pages.

    Sorting-FO

    Product Page

    Product-settings-BO

    Short description displaying on the AMP product page.

    Short-description-FO

    Product description is showing on the AMP product page.

    Product-Description

    Product features showing on AMP product page.

    Product-features-FO-1

    Related Products showing on AMP product page in carousel view as set by admin.

    Related-Products-FO

    Display of custom text appearing on AMP product page.

    Custom-Text-FO

    Products of same category displayed on the AMP product page.

    Products-from-the-same-category-appearing

    Social Media options are displaying as configured by admin.

    Social-media-links-displaye

    The AMP product page is displaying as per the selected template.

    Template-FO

    Checkout Page Settings

    checkout-1

    Proceed payment in AMP – If enabled, then payment for an order will be processed at AMP end.

    Payment-options-availabe-at-AMP

    If disabled, then payment will not be processed at AMP end and the user has to go to website payment page for completing the purchase.

    A-user-has-to-go-to-website

    SEO & URLs

    Admin can manage the SEO URLs for Home AMP page, category AMP page, product AMP page, CMS AMP page, cart AMP page, and checkout AMP page.

    SEO-and-URLs

    Analytics and Adsense in Prestashop AMP

    Facebook Pixel: It helps to track conversions from Facebook ads to qualified leads. The Facebook pixel allows you to monitor, how people interact with your website after viewing the Facebook Ads.

    Google Analytics: Tracks and reports AMP website traffic. Enter your Google analytics client ID to configure.

    Google

    Google Adsense: Admin can display Google Adsense on Home AMP, Category AMP, Product AMP, CMS AMP, Checkout AMP, and cart AMP pages. Admin has control over the display of Google Adsense on various positions on the AMP pages. Admin will need to have the Adsense Client ID in order to configure this feature.

    Theme Settings

    Image Settings: Now, the admin will have the option to choose different themes for the AMP Pages.

    Admin can use a different header logo on the AMP page than the website logo. Simply upload a new header logo and customize your AMP page logo as per your needs.

    logo-width

    Color Settings:  Personalize your website AMP colors as per your needs. Want to change the AMP page colors according to your theme and preferences, well go ahead and try out and play with colors, choose your color combinations. Control the display of colors on your AMP website with ease.

    AMP Sitemap settings

    Sitemap

    CRON SETTINGS: Automatically generate AMP sitemap through Cron.

    Front End – Display & Features of Prestashop AMP

    Let see how the AMP pages will be reflected at the Front-end.

    Group-147

    Logo: The logo is shown on the AMP page in the selected dimension.

    AMP-Demo3

    Menu: A whole new drop-down style menu layout is available to enhance the user experience. From here, a customer can manage login/logout, view product categories & subcategories, and select language & currency.

    Language-and-Currency-dropdown

    Search Bar

    Simplified yet effective search bar helps customers to easily find what they are looking for.

    Enhanced-search-bar

    Product Page

    On the product AMP page, customers can view all the available product combinations and add product to cart.

    Customer-can-choose-combination

    Cart Popup

    When a customer clicks on “Add to cart” button, a popup will appear on the product AMP page where he can view product details, quantity of product added to cart, and price details.

    Group-151

    Cart AMP Page

    When a customer clicks on the “Proceed to checkout” button on the cart popup, he gets redirected to the cart AMP page. Here he can view product details, remove a product from the cart and apply voucher code.

    remove-product-from-cart

    Checkout Process

    On clicking the “checkout” button on the cart page, he lands on to the Checkout AMP page. Here a customer needs to select address, shipping method, and payment method in order to complete the purchase.

    Select-delivery-address-from-here-1
    Select-shipping-method-from-here-3

    If enabled by admin from the backend, only then the payment methods will be available and payment will be processed at AMP end.

    Select-a-payment-method-from-here

    Order Confirmation Page

    On the order confirmation page, a customer can view order reference, order total, payment & shipping method selected while placing an order.

    Group-154

    Sign Up

    The complete SignUp process can be done on AMP page.

    SignUp-FO
    Sign-Up-form-FO
    Sign-Up-done

    So, this was all about Prestashop AMP Module. I hope this document will help you in checking the functionality of the module in a better way. Also, do let us know about your views in the comments.

    Support

    For any kind of technical assistance or query, please raise a ticket or send us a mail at [email protected]

    Also, please explore our Prestashop development services and vast range of quality Prestashop addons.

    Current Product Version - 6.2.1

    Supported Framework Version - 1.7.x.x

    Blog Version - 1.7.x.x
    • Version 1.7.x.x
    • Version 1.6.x.x
    . . .
    Discuss on Helpdesk

    Leave a Comment

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


    4 comments

  • Alejandro Orviz
    Hello Folks,

    Has this module connection with Google Analytics for AMP Pages?

    Thanks

  • A.C. Velioglu
    Why shown full adress of the module on adress bar like this? instead of clear adress of the page

    http://xxxx.com/module/wkamp/homeamp?id_shop=1

  • Priyanka
    Hi Xavier,

    Kindly raise ticket at https://webkul.uvdesk.com/ regarding your issue, so that we can look into it and resolve it as soon as possible.

  • Xavier Risselin
    Testing it on a test shop and amp pages didn’t work at all.
    Can you help me. Thanx
    http://compagnon-meuble.com
  • Back to Top

    Table of Content