Reading list Switch to dark mode

    Opencart Accelerated Mobile Pages

    Updated 10 October 2023

    The OpenCart 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.

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

    Searching for an experienced
    Opencart Company ?
    Find out More

    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.

    OpenCart Accelerated Mobile Pages google-amp

    Introduction

    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, Product page, Cart Page, Checkout Page, Registration page, Login page, Forget password page, and other CMS pages-About Us, Delivery Information, Privacy Policy, Terms, and Conditions, Return Policy, Site, Special Offers, Brand/ Manufacturer Pages, Logout Page, and Contact Us.

    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 owners, as the more time a user spends on your webstore, the more will be the chances of a user purchasing some goods.

    Note: Opencart  Accelerated Mobile Pages module supports the Multi-Store feature of default Opencart.

    Check the overview of the plugin in the video below –

    1b81Ue_15_4

    Check a brief overview of the backend configuration of the OpenCart AMP plugin –

    TLbQ1YXSrd8

    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.
    • Also, display the Related products on the AMP page.
    • Set the Side Bar color.
    • Enable/Disable the various Background color.
    • Also, 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.
    • Also, 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 login, affiliate login, registration, and forget password sections are amp enabled.
    • The admin can enter the google analytics ID from the admin panel for the analytic purpose.
    • Also, the admin can manage the PWAs from the admin panel easily.
    • New AMP pages for Order history, Wishlist, and Newsletter sections.
    • Also support AMP pages for Special Offers, Brand/ Manufacturer Pages, Logout Page.
    • The users can now add the PWAs to their home screen from the AMP pages.
    • Also, the users can access the PWAs in offline mode too.
    • The admin can set the Grid or List view for frontend products.
    • Admin can enter the image resolution in Width and Height of Product Image List Size.
    • Product tax information is displayed on the frontend.

    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 admincatalog and image folders into the root directory of your opencart website.

    OpenCart Accelerated Mobile Pages

    Upload File- OpenCart Accelerated Mobile Pages

    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.

    OpenCart Accelerated Mobile Pages extension_installer

    After uploading the file navigate to Extensions>Modification and click on Refresh button.

    OpenCart Accelerated Mobile Pages Modifucations

    Edit Administration- OpenCart Accelerated Mobile Pages

    Also, 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.

    OpenCart Accelerated Mobile Pages usergroup3

    After that under Extension > Module install the module as shown below in the snapshot.OpenCart Accelerated Mobile Pages

    Admin Configuration – OpenCart Accelerated Mobile Pages

    The admin can configure the module from the admin panel easily.

    webkul-opencart-accelerated-mobile-pages-config-1

    Screenshot

    webkul-opencart-accelerated-mobile-pages-config-3

    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: Also, 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. Also, 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.

    OpenCart Accelerated Mobile Pages select a project

    Also, 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.

    OpenCart Accelerated Mobile Pages add new project

    After this, the admin needs to enter the project name here and click create button.

    OpenCart Accelerated Mobile Pages

    Also, after that, the admin will redirect to the dashboard page. Here the admin can create credentials by clicking on the “Create credentials” button.

    OpenCart Accelerated Mobile Pages credentials

    After clicking on it, the admin can see the “API key” link. The admin needs to click on the API key to create the API key.

    OpenCart Accelerated Mobile Pages api key

    Now, 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.

    OpenCart Accelerated Mobile Pages

    Google Analytics for AMP Pages: The admin can enable or disable google analytics for the amp pages as per need. Also, If enabled the admin will need to enter the analytics client id in the “Analytics Client Id” filed as shown in the image below-

    OpenCart Accelerated Mobile Pages enter analytics id

    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. Also, It can show the active users on the website and much more-

    OpenCart Accelerated Mobile Pages google analytic

    General Configuration

    Now, Under the General configuration, the admin can manage the module accordingly.

    Screenshot-1-1

    Screenshot

    Screenshot-3-2

    Here, the admin can-

    • Status- Enable/Disable the Module.
    • Display Parent Category – Here, Enable/Disable the module to show only the parent categories which are marked as the top in the categories section.
    • Show Special Price- Enable/Disable the module to show the special price of the product.
    • Sub Menu- Also, enable/Disable the Sub-menu in the category tab of the amp pages.
    • Display Footer Links- Enable/Disable the footer Links on the amp pages.
    • Display Related Products- Also, enable/Disable Related products.
    • Default Checkout Page- Enable it if you want to checkout with the default store checkout page.
    • Product Review on Product Page- Enter the number of the review to show on the product page
    • Product View- Select the Product Page view as List or Grid.
    • Prodcut Image List Size(WXH)-  Enter the image resolution in Width and Height of Product Image List Size.
    • Home Page Slider- Can Add/Remove images to the Homepage slider.
    • Facebook App ID- Also, can mention Facebook App ID.
    • Social Sharing- 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.

    OpenCart Accelerated Mobile Pages webkul-opencart-amp-admin-colour-scheme-configuration

    Color schemes

    The admin can set the color for
    • Page Background Color
    • Header Color
    • Anchor Text Color
    • The Anchor Text Hover Color
    • Footer Color
    • The Footer Text Color
    • Button Background Color
    • The Button Text Color
    • Button Border
    • Sidebar Background Color
    • Accordion Background Color
    • The 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 users to access the website in a fast and reliable mode. It provides 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.

    PWA Manifest Setting

    To manage the PWA setting, the admin can navigate to PWA Manifest Setting to configure the PWA setting as shown in the image below –

    OpenCart Accelerated Mobile Pages webkul-opencart-amp-pwa-configuration

    Here, the admin can decide –

    Status: The admin can enable or disable the PWA as per their needs.

    Application Name: Also, the admin can decide the Application Name here.

    Application’s short name: The admin can enter the Short Name of the app.

    Application icon: Here, 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 default icon will be displayed for the app.

    Splash background color: The admin can select the Splash Background Colour from here. And it will be displayed on the PWA app.

    Application header color: Also, 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.

    FRONT-END VIEW:

    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.

    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 home screen.

    OpenCart Accelerated Mobile PageS-add-to-home-screen-button-below1

    Also, 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.

    OpenCart Accelerated Mobile Pages-add-to-homescreen-popup

    An app icon will be added to the user’s home screen and the user can click on that icon to access the AMP-PWA app as shown in the image below –

    OpenCart Accelerated Mobile Pages-added-to-home-screen-mobile-1

    Also, after clicking on the app icon and it will open the app just like a native app with the splash screen as shown in the image below –

    OpenCart Accelerated Mobile Pages-added-to-home-screen-mobile-1-1

    Even the user can access the AMP PWA like a native app and access the complete website using the AMP PWA –

    List View

    product-list-view

    Grid View

    OpenCart Accelerated Mobile Pages-product-grid-view-1

    The users can also access the app even in offline mode too. The pages once cached, the user does not need to load those pages again.

    OpenCart Accelerated Mobile Pages-offline-mode-1

    OpenCart Accelerated Mobile Pages-product-page-view

    Even if the user visits the website using a desktop, the user will also be able to add the app to their desktop as shown in the image below –

    List View

    OpenCart Accelerated Mobile Pages-webkul-amp-plus-button

    Grid View

    Webkul-Accelerated-Mobile-Pages-desktop-grid-view

    Also, now when clicked on the “add button” as shown earlier. After that an install app popup will appear, user will click on the install button to add the AMP PWA to the desktop –

    OpenCart Accelerated Mobile Pages-webkul-amp-plus-button-install-1

    Now back to the AMP pages:

    Auto-Search Suggestion-

    The customer can search for products from the search bar with the auto search suggestion feature.

    Search

    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.

    This module will support categories up to multiple levels.

    OpenCart Accelerated Mobile Pages-category slide

    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.

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

    OpenCart Accelerated Mobile Pages-checkout-caesar-salad

    OpenCart Accelerated Mobile Pages-Add-to-cart

    Related products are also shown on the product page, as shown in the image below-

    OpenCart Accelerated Mobile Pages-Related-products-1

    Cart Page-

    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 estimated shipping & taxes, and use the gift voucher if any.

    OpenCart Accelerated Mobile Pages
    OpenCart Accelerated Mobile Pages-shopping cart_new

    Complete Checkout-

    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.

    OpenCart Accelerated Mobile Pages-login1

    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.

    OpenCart Accelerated Mobile Pages-select billing details
    OpenCart Accelerated Mobile Pages-logout

    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.

    OpenCart Accelerated Mobile Pages-select shipping method
    OpenCart Accelerated Mobile Pages-checkout_new

    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-

    OpenCart Accelerated Mobile Pages-thank you

    CMS Pages- OpenCart Accelerated Mobile Pages

    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
    • Privacy Policy
    • Terms and Conditions
    • Return Policy
    • Site
    • Contact Us
    OpenCart Accelerated Mobile Pages-About_Us
    OpenCart Accelerated Mobile Pages-Delivery_information
    OpenCart Accelerated Mobile Pages-privacy_policy
    site_map
    Terms_Conditions
    contact_us

    My Account

    The logged-in customer will be able to view the different sections of the Account page. The different pages of account sections are:

    1. Order History
    2. Wishlist
    3. Newsletter

    order history

    order list

    order pagination

    View Orders

    view order

    view order history section

    Wishlist

    Wishlist

    Add to wishlist

    Newsletter

    newsletter

    Special Offers

    Now the special offer pages are also the amp (Accelerated Mobile Pages)

    opencart-special-pages-amp-pages-1

    Brand/ Manufacturer Pages

    This plugin now also support the Brand/ Manufacturer pages as AMP.

    brand-pages

    Logout Page

    Logout page is also now the AMP supported.

    logout_amp

    Registration Page

    The registration page is now AMP enabled.

    4_samsung-galaxys20-pink-portrait

    Login Page

    The login section page is now AMP enabled.

    3_samsung-galaxys20-pink-portrait

    Affiliate Login

    The affiliate login section page is now AMP enabled.

    blog-mockup

    Forget Password

    The forget password section is also AMP-enabled now.

    1_samsung-galaxys20-pink-portrait

    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.

    code

    Preview

    preview

    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.

    webkul-opencart-accelerated-mobile-search-result-12

    **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 - 4.2.0.0

    Supported Framework Version - 2.x.x.x, 3.x.x.x

    . . .

    Leave a Comment

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


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content