User Guide for Prestashop AMP (With Checkout)

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.

• Create AMP pages for Homepage, Category pages, Product pages, Cart page, checkout page, and CMS page.
• Display GDPR consent in AMP pages.
• Display 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.
• 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.
• 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.
• 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.
• Upload AMP page header logo and customize the selected theme using color settings.
• Set the dimensions for the header logo.
• Automatically generate AMP sitemap through Cron.
• Users can easily search for a product from the AMP page.
• Customers can 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.
• 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.
• 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.
• Choose template for the AMP product page and AMP category page.

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.

After successful installation, admin can configure the module settings.

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.

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.

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.

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).

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: Manufacturer

Product

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.

Home Page Setting

Slider 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.

Product Page

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.

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.

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.

CRON SETTINGS: Automatically generate AMP sitemap through Cron.

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.

Search Bar

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

Product Page

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

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.

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.

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.

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.

Sign Up

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.

For any kind of technical assistance or query, please raise a ticket or send us a mail at support@webkul.com

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