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 –
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.
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.
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
Firstly, go to the module manager in the back-office and click on ‘upload a module’.
After that, drag and drop the module file or select the file from the system.
In this way, the module installation will be successful.
How to configure the Prestashop AMP
After successful installation, admin can configure the module settings.
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.
After the successful installation of the module, admin can create AMP pages for the following pages:
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.
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.
If admin has choosen to display the cookie consent, then it will appear on all AMP pages in the front.
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).
2- Custom Menu – In this option, the admin can create the Menu as per his requirement.
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
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.
Type: Custom Link
3- PrestaShop Category tree – With this option, PrestaShop category tree fill display in menu.
Front End View – Main Menu
Custom Menu at Front End.
Prestashop AMP Pages Settings
Home Page Setting
Under “Slider Settings”, admin can enable/disable the display of slider on homepage.
Front End View
Home AMP Page Setting
Front End View
Home Video Setting
Front End View
Category Page Settings
Also, sorting option is given on the Category AMP pages.
Short description displaying on the AMP product page.
Product description is showing on the AMP product page.
Product features showing on AMP product page.
Related Products showing on AMP product page in carousel view as set by admin.
Display of custom text appearing on AMP product page.
Products of same category displayed on the AMP product page.
Social Media options are displaying as configured by admin.
The AMP product page is displaying as per the selected template.
Checkout Page Settings
Proceed payment in AMP – If enabled, then payment for an order will be processed at AMP end.
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.
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.
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 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.
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.
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
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.
Logo: The logo is shown on the AMP page in the selected dimension.
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.
Simplified yet effective search bar helps customers to easily find what they are looking for.
On the product AMP page, customers can view all the available product combinations and add product to cart.
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.
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.
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.
If enabled by admin from the backend, only then the payment methods will be available and payment will be processed at AMP end.
Order Confirmation Page
On the order confirmation page, a customer can view order reference, order total, payment & shipping method selected while placing an order.
The complete SignUp process can be done on AMP page.
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.