Google AMP

Google AMP (Accelerated Mobile Pages) is an open-source project to improve page speed on mobile devices by using a specific framework for a page’s code. The improved performance on mobile devices provides a better browsing experience for shoppers and boosts ranking on Google search. To learn more about the Google AMP project, see AMP Overview on the Google AMP project site.

Benefits of using Stencil with Google AMP

  • AMP makes websites load fast on mobile.
  • Google AMP has a positive effect on your store’s Search Engine Optimization (SEO).
  • AMP websites are more accessible in search results.

The article will walk you through enabling Google AMP pages in your theme.


This example uses Cornerstone.

Implementing AMP

Google AMP will be automatically added if your store’s theme is based on Cornerstone themes 1.6.0+.

Please see the user documentation on configuring Google AMP into your store via the Control Panel.

If you are using a custom theme for your storefront, you will have to perform a few extra steps in order to fully configure Google AMP on your store. Reference the text information and code samples below to do so. If you do not have a custom theme, you can bypass the remainder of this article.

After you have completed the previous steps, move onto these steps if you have a custom storefront theme activated.

Ensure the Google Analytics ID has been added in the control panel. This is what will be used to track AMP analytics. You can use more than one ID to track AMP traffic vs non-AMP traffic.

In the /amp/category.html, layout/amp.html and amp/product.html template files replace theme_settings with settings.

Example: In layout/amp.html (referenced below) replace theme_settings.amp_analytics_id with settings.amp_analytics_id.

{{{snippet 'htmlhead'}}}
         <script async custom-element="amp-form" src=""></script>
         <script async custom-element="amp-sidebar" src=""></script>
			  {{#if settings.amp_analytics_id}}
         			<script async custom-element="amp-analytics" src=""></script>
         {{#block "amp-scripts"}}{{/block}}

In config.json (referenced below) make sure google_amp is still in the features array. See below for code snippet.

  "features": [

If you are having any implementation issues, review the full Pull Request #964 for changes that need to be made to implement Google AMP.

Location of AMP Files

In versions 1.6.0+ of Cornerstone, there are a few key file locations where the AMP information is located:

  • Base AMP layout template is located in templates/layout/amp.html.
  • The files for Google AMP are located in /templates/pages/amp. This is where product.html and category.html are located. (Note: there may be other files in this folder, but the product and category pages are the only one pages that currently support Google AMP).
  • The CSS is located in templates/components/amp/css.

After the Google Analytics ID has been added via Control Panel, you can toggle AMP on the product and category pages using the settings there.

Local Testing

You are able to test your AMP enabled pages at the following endpoints when running your store locally:

  • localhost:3000/amp/category_url/
  • localhost:3000/amp/product_url/


Related Articles