When scrolling down the Google search engine results on your mobile phone searching for your next piece of clothing, have you ever noticed the little lightning bolt icon next to a mobile search result? 

google amp examples

If yes, you have witnessed how an AMP web page looks like!

If you have clicked on it – you have probably noticed how fast it loaded. No, it wasn’t your internet speed. It was actually the power of AMP pages – the next big thing in the eCommerce world.

But what exactly is AMP? Why do you need to implement it for your Shopify store and where? And what role does the IT department play here? 

Scroll down cause we are diving deep below.

Table of content:

  1. What is AMP?
  2. Benefits of AMP for Shopify stores
  3. AMP best practices for Shopify
  4. AMP Apps for Shopify 
  5. Examples of Shopify AMP pages
  6. FAQ

What is AMP?

AMP = Accelerated Mobile Pages

AMP is a technology developed by Google’s initiative aimed to create lightweight mobile web pages that load instantaneously for users. 

what is google amp

This is another open-source HTML framework developed by Google to allow web publishers to create mobile-optimized content that loads instantly on every device.  It consists of the following components: AMP HTML, AMP JavaScript, and AMP cache. 

In the words of Google when announcing the Accelerated Mobile Pages back in 2016:

We want webpages with rich content like video, animations, and graphics to work alongside smart ads and to load instantaneously. We also want the same code to work across multiple platforms and devices so that content can appear everywhere in an instant—no matter what type of phone, tablet, or mobile device you’re using.

4 years after this announcement, AMP pages are the new buzzword in the eCommerce industry.

Okay, many online retailers didn’t see this coming cause it wasn’t always sunshine and rainbows.

A few years ago, Accelerated Mobile Pages (AMP) was launched as an attempt to combat Facebook’s Instant Articles. Primarily, many experts were skeptics about this. They believed that AMP wouldn’t be a fit for the general public.

Well, nowadays, we can see that their hesitations were not fulfilled. Google’s AMP project has far outperformed Facebook’s Instant Articles in so many ways (starting with usage and SEO). 

And now, as every shop tends to transfer online, this makes the AMP technology a great ally to outpace your competitors, especially with plenty of Shopify stores in the game.

On the technical side when using AMP as a coding technology, Google has introduced 3 different applications of the code that has slight differences in the output. These applications are categorized as the following: 

  • AMP  Websites
  • Web Stories
  • AMP  Email 
  • AMP Ads

Below are more details for each of the AMP types:

AMP  Websites 

The AMP for Websites coding documentation allows every developer to easily create an AMP version of mostly text and image-based web pages. 

The output is the same version of a blog page for example, but it is much more cleaner from unnecessary JavaScript codes, can be customized with CSS, and pages load faster when clicked on mobile in Google search results. 

Web Stories

The main difference between Web Stories and the AMP for Websites application is the ability to create a story like a format that slides when clicked through. It is aimed to help create product pages, team pages, or other landing pages that represent the content in a more immerse format. 

Additionally, Google Web Stories get a special spot in Google, like in the Discover tab on mobile, appear in a grid layout which looks like a vertical, image-story result, also appear in the Images tab, and as a single result with a thumbnail in Google search on mobile.

Here are examples of how web stories appear in Google:

web stories in google

AMP  Email 

This is another interesting application of the AMP technology. Google allows re-creating email code in AMP code that when opened in Gmail can have additional functionality and not just a simple read mode of the Email text. 

As an example of a real case use for AMP Email is the ability to send a directly submit forms right within the email, allowing users to interact with the email inside the inbox and enter information in a form and send it back to the sender. All this without the need to click a link and leave their inboxes. 

For now, Google requires AMP validation in order to allow email developers to get permission to serve their emails developed with AMP. 

AMP  Ads

Although AMP Pages support HTML Ads, the AMP Ads technology is based on the AMPHTML format that loads much faster and is validated before loading, which makes them free of malware. 

AMP Ads are created to improve conversions, click-through rates, and overall engagement and user experience due to their loading speed.

Continue reading to understand how all these applications can be used for your Shopify store. 

Benefits of AMP for Shopify stores

As consumers are more impatient than ever before, you definitely need something more engaging to catch their attention. 

Meanwhile, SEO, page speed, and bounce rate remain the main challenges facing Shopify store owners. 

And due to the AMP functionalities that guarantee you to solve all of the pain points above, AMP it’s becoming an increasingly popular framework for eCommerce sites.

Yes, there are numerous ways on how you can use the AMP technology to improve your online store on Shopify such as – AMP for email, AMP ads, AMP pages, AMP Web Stories.

To start,  converting your Shopify store pages to AMP pages is probably the first step.

And here are the main reasons why Shopify AMP Pages:

  • Fast-loading AMP sites that load per 1 second (on average)
  • High positioning on the search results (cause Google favors AMP pages, obviously)
  • An app-like experience that attracts and engages visitors
  • Adwords score, Click-through rate (CTR), Cost-Per-Click (CPC) improvement
  • Lower bounce rates and abandoned cards and higher mobile conversion rates
  • SEO benefits that transfer over to all devices thanks to the mobile-first indexing

Additionally, we suggest considering the famous story format delivered by Google Web Stories, a format we described best to be used for better representing product pages or marketing landing pages. 

Here are the reasons why to create Shopify Web Stories:

  1. Higher discoverability in Google search, Google images, Discover, and Google App
  2. Allows various animations, tap interactions on mobile and look very immersive
  3. It supports video, GIFs, audio, text, images, sliders
  4. Load fast, and quickly provide short and meaningful info for mobile users to immediately interact with
  5. All the above lead to higher traffic and conversion rates 

AMP best practices for Shopify

As mentioned above, it all started to outperform Facebook articles.  Google AMP was primarily developed to help publishers make their articles and news loading times faster so they get stand out in mobile searches and create a smooth mobile experience.

The logic of this AMP solution was the following: you publish an article, a visitor clicks on the AMP version of it, the content loads instantly, your reader enjoys this experience and continues to explore your website.

 The same applies to your Shopify store, too.

A user searches to buy a product, your AMP page triggers their attention, they click on it, it opens instantly and they continue to purchase the item or explore your collection further.

So, here comes the question – what Shopify pages should you AMP?

Product Pages

Is there a better way to boost sales than promoting your products in mobile search results than in an eye-catching way that consumers cannot resist? 

Yeah, an instant page load time seems to be a great WOW factor as a first impression. Plus, the app developers are allowing all the product page content to load in the AMP version such as Shopify product reviews, cart buttons, product options and similar. 

Category and Collection Pages

If you want your collections to rank higher in Google search results and your potential prospect to easily filter and explore all your products, you definitely need to AMP them. 

Info Pages

You can use AMP even for your About page, Our Team, or every info page you have. Boosting the speed of your most simple pages is always a good idea. 🙂

Home Page

When it comes to your main page, it’s tricky. Mostly, it depends on whether your page design is simple or not. For example, if you have a variety of custom designs, apps, and layouts, creating an AMPed version of it can oftentimes be inappropriately sized. Just saying.

The verdict: Going AMP or not, it all depends on your store and design preferences. However, from our experience, the safest choice is to AMP your Product Pages.

Below we will dive into the best AMP plugin you can use to convert your product pages into AMP.

AMP Apps for Shopify 

Until now, you are familiar with how AMP can do wonders for your Shopify store. To get there, you may need to develop it or pay for an app as Shopify doesn’t support AMP by default. 

On top of that, Shopify doesn’t allow third-party Javascript on the page, so it must be coded using specialized AMP components, such as an amp-carousel, or an amp-image, etc.

For those of you who want to do this manually, here is the official guide on how to start with AMP.

If you are not coding savvy or you don’t have the time and energy to deal with AMP components, I warmly suggest you try 3rd party AMP apps like ProductStories that have already done the work for you.

ProductStories does both. It converts Shopify pages in AMP Website and in Web Stories. 

product stories for shopify

Shopify apps like ProductStories help you automatically convert all product pages to AMP.  It creates AMP URLs for each active product page on your Shopify store.

Additionally, you have an option to publish a floating Story widget that loads this AMP version of the page when clicked. The widget will appear on every page in the bottom right corner (like in the image below).

shopify story widget

It’s one of a kind Shopify app developed by EmbedSocial’s team to lend you a hand to instantly increase traffic, conversions, and index your product pages as Story formats thanks to the powerful AMP technology.

There is also a free plan available.

Just see the app in action and you will understand what I am talking about:

Examples of Shopify AMP pages

Okay, so now that you are familiar with how AMP pages work, here are some examples to get inspired on how simple, dull product pages can be converted into stunning product pages and AMP Story widgets.

AMP Product Page

To interact and check the performance, view the live demo.

amp product pages in shopify

AMP Story widget

To view it in action, visit the live demo page and click on the bottom right story widget.

amp story widget for shopify

FAQ

Is my Shopify theme compatible with the ProductStories tool?

Definitely. ProductStories have a fully flexible structure and customizable widget layouts that fit any Shopify theme. On top of that, you have full control of the AMP widget look and feel.

How long does it take to convert my product pages to AMP with the ProductStories app?

On average, it takes you less than 10 minutes (including the customization part).

How long does it take for AMP pages to show up on Google search?

It usually takes 2 days to 2 weeks for Google to index your product pages. Luckily, you can track your progress in your Google Search Console.

Can you help me convert my product pages to AMP?

We would love to take you to an AMP journey. Our dedicated customer success team will lend you a hand with every step of the way, so don’t hesitate to reach out to us.

Should I proceed with my SEO activity once I optimize the website with AMP?

Absolutely. As mentioned before, AMP works best on your mobile phone, so you want to make sure that not only mobile users but also users that search via desktop and tablet and even non-Google users can have an awesome user experience, too.

To wrap up

AMP is still a brand new technology, but being a Google project, automatically makes it the future of search!

After all, it’s up to you whether you or your competitors will enjoy the benefits of AMP pages. So, hurry up!

And if you need any assistance converting your product pages to fast-loading AMP pages, we are always here to help. 🙂