Demos Buy Now

Opencart Accelerated Mobile Pages

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 webstore. 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 webstore is that, even when the data connection of user is slow, the AMP web pages will load faster irrespective of the connection speed.

 

In the Opencart Accelerated Mobile Pages (AMP) module, we have introduced this awesome feature by implementing Accelerated Mobile Page for the Home page, Category page and on the most important, Product page. For any webstore, these three are the most visited and most navigated pages. So if these pages load up instantly without any delay then surely it will keep the user interested in the webstore and 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.
  • 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 Accordion Background color.
  • Enable/Disable the Accordion 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.

Installation – OpenCart Accelerated Mobile Pages

Installation of the Opencart Accelerated Mobile Pages module is very simple. After you unzip the downloaded zip file you will find the following folders Opencart Accelerated Mobile Pages2.0.x.x-to-2.1.x.x, Opencart Accelerated Mobile Pages2.2.x.x and Opencart Accelerated Mobile Pages2.3.x.x. 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 admincatalog and image folders into the root directory of your opencart website.

Once you have uploaded the file then login to admin and from catalog section go to Extensions> Extension installer and upload the XML file. The XML file can be found on the ocmod folder under module directory.

After uploading the XML file go to the Extensions > Modification and click on refresh field.

After that in Admin panel go to System -> Users -> Usergroup and edit ‘Administrator’ and select all for both Access and Modify Permission and save it.

Now navigate to Extensions->Modules to install and edit the Opencart AMP module.

 

How to Get Google API

Your Content goes here

The admin needs to have Google API for sending the URL to the 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 “+” button to create a new project or the admin can select a project from the project list.

After this, the admin needs to enter 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 API key to create the API key.

After clicking on API key, a popup will appear with API key. Just copy this key and paste it to the Google API key section of configuration.

Admin Configuration – OpenCart Accelerated Mobile Pages

Admin can edit module and then below page will open. Here Admin can set the Opencart Accelerated Mobile Pages configuration as per their need. Admin can enable/disable the Opencart Accelerated Mobile Pages module. Admin can enable/disable sub-menus for categories and category images. Admin can also enable the footer link for the amp pages, display the related products, set up the Image sliders for the home page of the store and can provide the title and URL link which will be used to redirect the customer to that link. Admin can set up as many sliders as he wants and he can enable or disable any slider and can even delete it. Admin can set-up the Facebook App ID and can allow sharing the products on various social media platforms.

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.

Under the General configuration, the admin will be able to –

  • Enable/Disable the Module from here.
  • Enable/Disable to show only the parent categories and their sub-categories which are marked as top in the categories section.
  • Enable/Disable the Sub-Categories in the category tab of the amp pages.
  • Enable/Disable the footer Links on the amp pages.
  • Enable/Disable to show the Related products.
  • Admin can Add/Remove images to the Homepage slider.
  • The admin 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 Color
  • Sidebar Background Color
  • Accordian Background Color
  • Accordian Background Extended Color

Also, Structured Data is 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 that how it’s going to display on Google search results.

Preview

How To Run A Cron For CDN URL:

The admin can run a cron manually on their website for fetching CDN URL. The admin needs to run it in the browser as https://www.example.com/amp_cron.php/. After running this file, the admin can see the total number of Product CDN URL, the total number of category CDN URL.

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.

OpenCart has implemented AMP on Home Page, Category Page and on Product Page.

Home Page

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. The customers will be able to see the Image Sliders that the admin has set and if they click on it, they will be redirected to another page.

Category Page

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.

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.
Product Page

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 he/she 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 he/she can easily share the link.

Auto Search

The customer can search products from search bar with the auto search feature. Search bar will appear on product page, category page, and home page.

Live Demonstration

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 - 2.2.0.0

Supported Framework Version - OpenCart 2.0.x.x, 2.1.x.x, 2.2.x.x, 2.3.x.x, 3.x.x.x

. . .

Ask a Feature

css.php

Index