Setting up Google AMP for BigCommerce Stencil

Accelerated Mobile Pages (AMP), are Google’s solution to making websites load faster and smoother, on all mobile devices. This open source project of Google, allows websites to load quickly, and maintain performance. The important thing to take note of, is that fast and responsive websites are shown higher on Google Search Results. And consequently, this builds traffic for your site. Following along with the increasing trend, mobile is king. Statistics don’t lie, people use their phones ALL the time. And that means, that a businesses potential customers need to be satisfied on that front. That is, make websites quick and responsive, satisfy Google, satisfy mobile users, and satisfy yourself, with the growth of business.

How Can AMP Improve Your Business?

For some of you, this might be completely foreign ground, but that’s okay. For starters, let’s take a quick look at what AMP can really do for businesses. Basically, AMP will make any site load on mobile way faster than anything that was previously out there. What this means for your site is – heavily increased experience for mobile users. Second of all, being at the top of Google’s SEO Tool’s list, it will dramatically improve the SEO score of a site. For these reasons, it is incredibly important and invaluable to have AMP. Follow this guide to heavily increase traffic, and be at the top of search results.

How Can You Setup AMP to Fit Into a Stencil Theme?

If your business is running one of the themes offered by BigCommerce, or popular marketplace offerings, it will likely already have AMP integrated. All that’s left to do is to go to Advanced Settings / Google AMP. From there, make sure to tick the boxes labeled “Enable on Product Pages”, and “Enable on Category Pages”.

How Exactly Does AMP Work?

For starters, forget about having super intensive functionality. AMP isn’t about that. The point of AMP is to publish directly to your users, content that is easily readable and quickly loaded. No hassles involved. The way it manages to achieve this is by blocking out all custom Javascript, instead relying on it’s own built in library. Using custom AMP-elements, you can build a quite interactive layout and interface, however it won’t be up to par with all Javascript has to offer. These sorts of sacrifices are made in order to achieve instantaneous loading times, and user experience.

How Do You Setup AMP to Fit Custom Themes?

Unfortunately, for custom themes it takes a little bit more work to implement AMP. However, it’s nothing to worry about. The process in and of itself doesn’t take too long. And the end result is having AMP, which means so much for the website. So follow these steps, and what awaits is incredibly improved SEO and mobile experience.

• Just like for themes with AMP already implemented, go to Advanced Settings / Google AMP and enable the same settings.
• Assuming you already haven’t, use the Stencil-CLI to locally set up the customized theme.
• Now you must add the latest AMP files into your themes folder.
  • Navigate to the basic AMP layout template in templates / layouts / amp.html
  • You can find the AMP files in in templates / pages / amp. Look for product.html and category.html specifically.
  • The css files can be found at templates / components / amp / css.
• Within the theme’s files, look for a file called schema.json. Within this file, look for code relating to Google AMP. Delete that section of code.
• Find the config.json file. Scroll to the features array and make sure that Google AMP can still be found there.
• In the Google AMP Settings, make sure to add your Analytics tracking ID. This will help further down the road, and tie into AMP, with tracking specific details.
• Using Stencil, bundle the theme together, and apply it the store, for changes to take place.

How to Validate AMP?

Thankfully, Google was kind enough to prepackage a validation tool with this project. Just navigate to this site, and type in the url of your business. The result will tell whether or not AMP has been properly implemented into the theme.