7 Ways You Can Use AMP for Ecommerce to Generate More Sales (Examples)

Slow web pages make for low conversion rates. Research has shown that even a 100ms slowdown in load time can affect conversions on a web page. Ultimately, users don’t want to wait. It’s that truth that set Google out to speed the mobile web with Accelerated Mobile Pages years ago.

And though the AMP framework has grown capable of accommodating a variety of web pages across a variety of verticals, some still believe AMP can’t speed much beyond a static web page. Today, though, AMP is capable of serving dynamic content, checkout pages, entire websites, and even progressive web with its lightweight framework. As a result, brands are increasingly turning to AMP for ecommerce.

Using AMP for ecommerce

There’s a reason ecommerce brands have been slow to invest in AMP: Their needs are much more complex than the needs of news publishers, which AMP initially set out to serve. Ecommerce brands need product listings, login capabilities, dynamic content, checkout pages, and the highest levels of web security.

But years after its initial release, AMP is enabling ecommerce brands to meet these needs, with new components and technical workarounds that bring high-speed load times to all kinds of pages. Here are just a few impressive things AMP can support now:

• Dynamic content: The content of an ecommerce website is ever changing. AMP support for dynamic content ensures customers are always seeing the most up-to-date information.
• Checkout/payments: AMP now supports shopping carts, checkout flows and payment processing. Now, users can purchase directly from your AMP pages.
• Personalization/log-in: Personalization is the cornerstone of any relevant marketing campaign. Now, through AMP, you can provide personalized content to your customers, like recommended products and updated carts.

So how does AMP do it? And how can you? From amp-bind to amp-selector and beyond, here are some components you can use to create product pages, category pages, shopping carts, and more.

Useful components for AMP for ecommerce

1. Product pages

Often, users arrive at your product pages through a category page, a homepage, social media, or a paid advertisement. These pages detail your product’s features and benefits, and they’re highly visually appealing, with bold hero shots and enough angles to inform your visitor.

Creating them with AMP involves elements like amp-carousel and amp-video, which you can use to create striking hero shots, informational photos, and comprehensive videos.

For long product descriptions to accompany your photos, look to amp-accordion for the ability to expand and minimize content. The element amp-form will enable you create a comments system for your visitors to leave reviews of your product:

For something a little simpler, custom CSS will make it possible to enable a star review system for product ratings:

And with the element amp-social-share, you can offer users the ability to share the product to social media.

AMP can also now support a shopping cart, and “add to cart” button, when visitors are ready to purchase. And if they’re not, you can use the element amp-sidebar to implement a navigation menu across all pages. This is just one example of a product page built in AMP:

2. Product category page

Users often start their journey from a site’s homepage or a product category page. These are great pages to AMPlify first, as eBay discussed in their post.

These types of pages are very well suited for AMP. The content is typically static and geared toward offering the best showcase of available products.

Particularly useful on product category pages are elements like amp-carousel and amp-bind, which give visitors a way to create galleries that they can browse product and subcategory. These can also include captions that briefly describe the image.

When they need to search for a particular product, you can use amp-form to create a search bar, and you can serve those results on a different page, or the same one. You can even autocomplete terms:

Outside of the capability to search and organize by product or type, which comes natively in AMP, product category pages are usually quite simple. With a showcase of images and minimal text, they’re a straightforward design that can deliver experiences at unrivaled speeds.

AMP offers this example of a product page with a search function and product organization:

Here’s a better indication of a product category page you can build with AMP:

This comes from Myntra, the largest online fashion brand in India. When they invested in AMP, they saw a 60% improvement in speed and a 40% reduction in bounce rates across their most important post-click landing pages. And with the help of amp-bind, they didn’t have to compromise on user experience. Visitors could sort and filter products and sizes like they would on any non-AMP page. They got a great user experience delivered in the blink of an eye.

3. Display personalized content

Marketers’ most powerful tactic for boosting conversions is personalization. The more relevant an offer is to your audience, the more likely they are to claim it.

Now, with the amp-access component, marketers can display blocks of content based on the user’s status, like if they’re logged in or not. To display personalized content or recommendations in a carousel, users can take advantage of amp-list. Says Google:

The amp-mustache default behavior for rendering amp-list data is to cycle inside items objects; adding an amp-carousel inside the template would make the template render multiple carousels; one way to work around this is having the amp-list endpoint return a single entry in items.

They can also use amp-list to return personalized content to the user with the help of cookies (using the attribute credentials=”include”) or AMP’s client id:

Another way to display personalized content, says AMP, is to use amp-bind with a JSON endpoint. This is especially helpful when data needs to be updated after a user interaction, like a hotel displaying room availability after a booking.

4. Shopping cart

Support for a shopping cart now comes native in AMP. To build it, Google recommends the use of amp-list, which can display to the user a dynamic list of what they’ve added to it:

amp-list needs to send the session cookie on the header of the request so that the server can retrieve the contents of the cart on the session. For this reason, we use credentials=”include”, as an additional attribute.

Arranged this way, each row of the list can contain a user’s personalized shopping orders. And each item in that list will have a button to remove items from the cart. Additionally, support for adding those items is just as this demonstration shows.

5. Checkout flow and Payments

Once, if you wanted speed and the ability to take payments, you had to start with AMP and redirect your users to a non-AMP checkout page. Today, you can enable users to check out from your AMP pages.

In Chrome, you can use the Payments request API. This will allow users to check out via a dialog box in their browser. Here’s a quick example.

The other option is to build your checkout flow inside of AMP with amp-form. If paying for a product requires a login, you can combine these elements with amp-access.

And if you prefer to check out users on your website, that’s still an option, provided you can quickly and seamlessly transition visitors to your website’s payment process. Here’s an example from WompMobile:

6. Analytics

Measure the effectiveness of your use of AMP for ecommerce with amp-analytics. This element supports both third-party and in-house analytics tools. That includes popular solutions like Google Analytics, Adobe Analytics, Nielsen, Quantcast, and more.

For a general idea of how visitors are interacting with AMP pages, look to AMP’s native analytics. Currently, amp-analytics can track events like:

• Pageview
• Anchor Clicks
• Timer
• Scrolling
• AMP Carousel changes
• Form

To collect analytics data directly, you can integrate your solution with AMP. Just make sure that your AMP data is being accurately attributed. To test if this is the case, Google recommends loading your accelerated mobile pages via the Google AMP Cache.

7. And more…

The above features are ones supported natively by the AMP framework. To add features that aren’t supported by AMP yet, you can use amp-iframe to embed content or more sophisticated tools like chat apps, maps, or other third party solutions.

Another option is to look for support from a third-party app, like the ones created for Shopify users. Apps like these make it possible to use AMP with plugins and extensions, enabling users to launch a quick-loading site easily.

The most effective AMP apps for Shopify are capable of creating many page types, like product, collection, home, and blog pages. They’re usually affordable, or even free, and come with reliable support:

There are similar plugins for WordPress users, and for Magento users as well.

AMP for ecommerce examples

You’ve seen the components, now let’s take a look at how some of the biggest online brands use AMP for ecommerce. Here’s a short showcase, compiled by Plumrocket.

Newegg product page

1-800-Flowers category page

Eventbrite product page

Lancome product category page

Have brands succeeded with AMP for ecommerce?

According to Forrester, an AMP’d site with considerable traffic could expect to see a 20% increase in sales conversion rate on AMP pages, a 10% year-over-year increase in AMP site traffic, and a 60% increase in pages per visit. So, how are real-life brands faring?

AMP for ecommerce users, by the numbers

• Advance Create, Japan’s biggest insurance comparison website, decreased page load time by 61.2% and cost per action by 36.8%, while boosting conversion rate by 28.9%.
• Event Tickets Center produced a 20% increase in conversion rate, and a 13% increase in time on site, while lowering bounce rate by 10%.
• DiscoverCarHire.com generated a 22% increase in mobile visits and 29% more conversions from mobile devices through its Google Ads. They also improved the site’s mobile organic traffic by 73% using AMP.
• Fastcommerce’s clients saw a 15% lift in conversions across 2M pages when comparing AMP to non-AMP pages.
• WompMobile saw a 105% increase in conversion rates and a 31% decrease in bounce rates with ecommerce AMP pages compared to non-AMP pages.
• Wego.com generated a 95% increase in its partners’ conversion rates and a 3x increase in ad conversions after creating AMP versions of key landing pages.
• Greenweez saw half its mobile organic traffic come from AMP between Jan and March of 2017. They also boosted mobile conversion rates by 80% while decreasing mobile acquisition costs by 66%.

Boost your conversion rate with AMP for ecommerce

Though some argue that AMP can’t support ecommerce websites, it’s clear that’s not the case. Brands have already had success with AMP as a way to deliver user-friendly experiences much more quickly. And in ecommerce, time is money. Speed is revenue.

Similarly to the way Shopify, WordPress, and Magento support AMP apps, so does Instapage. That means, through the Instapage builder, you can create AMP post-click landing pages as intuitively as you would any other page. Learn how to do it at scale with an Instapage demo.