The Accelerated Mobile Pages (AMP) is a way by which developers can create mobile-optimized content once and have it load instantly everywhere.
In today’s era smartphones and tablets have revolutionized the way we access information over the internet.
Webstore owners are trying every bit to reach to maximum users but every time a webpage takes too long to load, they lose a user and with it the opportunity to generate more revenue.
Accelerated Mobile Pages aims to dramatically improve the performance of the mobile web by decreasing the webpage loading time and hence keeping the user intact to the website.
Using AMP, the web pages load instantaneously across multiple platforms and devices so that content can appear everywhere in an instant, no matter what type of phone, tablet or mobile device user is using.
AMP relies on AMP HTML, a new open framework built entirely out of existing web technologies, which allows websites to build light-weight webpages.
Using AMP for web pages will not only load that webpage faster but it will also give a higher ranking to that webpage in the Google result list.
All the pages that are accelerated mobile pages will have a small thunder icon on the google list, as shown in the screenshot below.
Another great benefit of using AMP for your website is that, even when the data connection of the user is slow, the AMP web pages will load faster irrespective of the connection speed.
So if these pages load up instantly without any delay then surely it will keep the user interested in the webstore.
This will be super beneficial to store owner, as the more time a user spends on your webstore, the more will be the chances of a user to purchasing some goods.
Features – OpenCart Accelerated Mobile Pages
- Admin can customize color themes for AMP pages.
- Sharing of products on various social media platforms.
- The module support multiple levels of categories.
- Home Page Image Slider.
- Display the footer links on the AMP page.
- Display the Related products on the AMP page.
- Set the Side Bar color.
- Enable/Disable the various Background color.
- Enable/Disable the Background expanded color.
- Faster loading page for mobile users.
- Improved search engine ranking.
- Increase visibility.
- Better user experience.
- Less bounce rate.
- An increase in sales conversions.
- The admin can set a cronjob for fetching CDN URL for their website.
- Admin can configure this module for different stores.
- The customer can register, guest checkout and also can log in at the checkout page of the amp.
- The customers are able to view and add the products to the cart and process for the complete checkout with the amp.
- The admin can enter the google analytics ID from the admin panel for the analytic purpose.
- The admin can manage the PWAs from the admin panel easily.
- New AMP pages for Order history, Wishlist, and Newsletter sections.
- The users can now add the PWAs to their home screen from the APM pages.
- The users can access the PWAs in offline mode too.
Note- The Module support Simple Products and Products with Options Only.
Installation – OpenCart Accelerated Mobile Pages
Installation of the Opencart Accelerated Mobile Pages module is very simple. After you unzip the downloaded zip file. You need to select the folder according to your opencart version. And then in your selected folder, you will find admin, catalog, image and ocmod folders. You just need to move admin, catalog and image folders into the root directory of your opencart website.
Now, navigate to Extensions>Extension Installer. Click the Upload button and browse the XML file, this file is in the ocmod folder. Please select the correct ocmod folder according to Opencart version installed on your system.
After uploading the file navigate to Extensions>Modification and click on Refresh button.
After that, in Admin panel go to System->Users->User Groups and edit ‘Administrator’ and choose to select all for both Access and Modify Permission and save it.
After that under Extension > Module install the module as shown below in the snapshot.
Admin Configuration – OpenCart Accelerated Mobile Pages
The admin can configure the module from the admin panel easily.
From the admin panel, the admin can-
Select Store: The admin can configure this module for each Opencart store that the admin has created. The admin just needs to select the store from the dropdown list.
Get Cron Log: The admin can enable or disable this feature. If it is enabled then the cron log will be generated and it will fetch CDN(content delivery network) URL from the website. This cron log will be sent to the server user email address.
Google API Key: The admin needs to enter google API key for fetching URL for the website. The admin can find API key from their google developer account. Please note it will work only if “get cron log” is enabled.
How to Get Google API
The admin needs to have Google API for sending the URL to Google. The admin will go to the link: https://console.developers.google.com/flows/enableapi. The admin needs to click on “Select A Project” as per the screenshot.
After clicking on this link, the admin needs to click on the “+” button to create a new project or the admin can select a project from the project list.
After this, the admin needs to enter the project name here and click create button.
After that, the admin will redirect to the dashboard page. Here the admin can create credentials by clicking on “create credentials” button.
After clicking on it, the admin can see “API key” link. The admin needs to click on the API key to create the API key.
After clicking on the API key, a popup will appear with the API key. Just copy this key and paste it to the Google API key section of the configuration.
Google Analytics for AMP Pages: The admin can enable or disable google analytics for the amp pages as per need. If enabled the admin will need to enter the analytics client id in the “Analytics Client Id” filed as shown in the image below-
Google Analytics ID can be generated from- https://analytics.google.com
This tool will also help to better understand how the customers are interacting with the website. It can also show the active users on the website and much more-
Now, Under the General configuration, the admin can manage the module accordingly.
Here, the admin can-
- Enable/Disable the Module.
- Enable/Disable the module to show only the parent categories which are marked as the top in the categories section.
- Enable/Disable the module to show the special price of the product.
- Enable/Disable the Sub-menu in the category tab of the amp pages.
- Enable/Disable the footer Links on the amp pages.
- Enable/Disable Related products.
- Enter the number of the review to show on the product page
- Can Add/Remove images to the Homepage slider.
- Can mention Facebook App ID.
- Will select/allow the social sharing platforms using which the customers can share the products.
Admin can also customize the AMP page as per their store theme and choose various colors for different features.
The admin can set the color for –
- Page Background Color
- Header Color
- Anchor Text Color
- Anchor Text Hover Color
- Footer Color
- Footer Text Color
- Button Background Color
- Button Text Color
- Button Border
- Sidebar Background Color
- Accordion Background Color
- Accordion Background Expanded Color
Now the users are able to install the PWA (Progressive Web Applications) to their mobiles from the AMP pages.
Progressive Web Applications allow the users to access the website in a fast and reliable mode. It provide an installable, and app-like experience to the users. The users not only can install the app on desktop but also on mobile that are built and delivered directly via the web.
Even the users can access the webpages using the PWAs in the offline mode too. The pages once cached, the user doesn’t need to load those pages again.
To manage the PWA setting, the admin can navigate to PWA Manifest Setting to configure the PWA setting as shown in the image below –
Here, the admin can decide –
Status: The admin can enable or disable the PWA as per their needs.
Application Name: The admin can decide the Application Name here.
Application’s short name: The admin can enter the Short Name of the app.
Application icon: The admin can select the Application Icon from here. Please note the icon of the app should be in 192*192 if not, then the deafult icon will be displayed for the app.
Splash background colour: The admin can select the Splash Background Colour from here. And it will be diplayed on the PWA app.
Application header colour: The admin can select the Application header color from here.
Accelerated Mobile Pages for OpenCart
An Opencart e-commerce store allows its customers to surf through the home page of the store, navigate through the various categories present in the store, go to any product page either from home page, or by navigating through categories or simply by searching in the Webstore, and various other features.
But the most important thing or feature for any Webstore is that whether it is user-friendly & mobile-friendly or not. If a Webstore takes more time to load up then it’s sure that the users will abandon the page.
So implementing AMP for the most visited pages will attract more users to your Webstore and provides the store owner with the opportunity to earn revenue.
The home page is like the welcome page for your users. So implementing AMP on the home page is a brilliant idea to engage the users on your Webstore. If the home page loads up instantly then users will be able to surf through the page without any delay.
Furthermore the user will see an option as “Add Webkul AMP to Home screen” by clicking which the user will also be able to add the PWA to the homescreen.
Now after clicking on the “Add Webkul AMP to Home screen” a pop-up will appear, the user can click on the “Add” button and in this way the app will also be added to the user’s home screen.
Even the user can access the AMP PWA as a native app and access the complete website using the AMP PWA –
The users can also access the app even in the offline mode too. The pages once cached, the user does not need to load those pages again.
Even if the user visit the website using a desktop, the user will also be able to add the app to their desktop as shown in the image below –
Now when clicked on the “add button” as shown earlier, it will display a message to the users to add the AMP PWA to the desktop –
Now back to the AMP pages:
The customer can search for products from the search bar with the auto search suggestion feature.
After the home page, users generally go to the categories present in the store and implementing AMP in category page allows the users to quickly navigate through the categories.
This module will support categories up to multiple levels.
Here, one must remember if the Display Parent Category is set to disable and the category is not set on Top then the list of the category will have no highlighted category they will all appear the same way.
The most important thing for every e-commerce store are the products that are present in it.
If everything is fast and working great in the Webstore but the product page is slow in loading up the product image, its description, and all other information, and is clunky then it’s frustrating to the user and the user might leave the page or not go for the purchase.
So implementing AMP on a product page is super useful, as a user can go to a product page from anywhere, from the home page, category page, or even from the google or any other search engine’s results page.
A faster loading and mobile optimized webpages for the products of the Webstore will attract and engage more users and henceforth it will generate more purchases from the users.
Opencart Accelerated Mobile Pages module also provides an option for sharing the product across different social media platforms.
The customer just have to click on the social media icon on which one wants to share the product and then the customer will be redirected to that social media platform with the product shareable link and from there one can easily share the link.
The customer can add the product to cart or can add the product to the wishlist as shown in the image below.
Related products are also shown on the product page, as shown in the image below-
The customer can click on the add to cart button to add the products to the cart. After adding the product to the cart the customer can view the details of the product added to the cart.
Here, the customer can also update the quantity of the product, use coupon code, get the estimate shipping & taxes, and use the gift voucher if any.
Note: If the customer is not logged in already, then the customer has to login first for the checkout process.
If the customer doesn’t have an account then the customer will need to Register Account or the customer can also process with the Guest Checkout.
Now, after login, the customer can click on the Checkout button. Thus, the customer will be redirected to the checkout page. Here, the customer can fill the billing and delivery details.
The customer can also Logout by clicking on the logout button near to the cart button.
Now the customer will select the Shipping Method and Payment Method to complete the purchase by accepting the Terms & condition. Now the customer can click on the confirm order.
After confirming the order, the page will be redirected to the Thank You page and that will not be AMP page as shown in the image below-
Every store owner needs to specify a few of the mandatory policy and share the information about the respective store. This can be done by entering details on CMS pages.
The admin can enter this information in CMS pages for the customer to read through. Post implementation of the module in your website these pages will appear as AMP pages. The pages here may vary from-
- About Us
- Delivery Information
- Terms and Conditions
- Return Policy
- Contact Us
The logged in customer will be able to view the different sections of the Account page. The different pages of account sections are:
- Order History
Structured Data is also implemented, so you can test it by visiting https://search.google.com/structured-data/testing-tool and then you can enter the AMP page URL and can test it. You can preview how it’s going to display on Google search results.
You can check this feature by entering the keyword: “oc.webkul.com customer time” on your mobile’s browser and then you can see the AMP result like shown in the screenshot below.
**Note: It totally depends upon the Google crawlers for getting your website AMP pages to be displayed on the SERP page. Usually, it takes to around 12 to 24 hrs or more for the crawlers to crawl/index your pages.
That’s all for the Opencart AMP module if you have any issue feel free to add a ticket and let us know your views to make the module better http://webkul.uvdesk.com/.
Current Product Version - 188.8.131.52
Supported Framework Version - 2.x.x.x, 3.x.x.x