AMP for E-Commerce Getting Started

Edit on Github

Here is a quick getting started guide for creating e-commerce webpages with AMP. This guide provides samples and tips covering the following topics:

Product pages

It's possible with AMP to create beautiful and interactive product pages. This sample demonstrates how to build a complex product page with dynamic product configuration and an add-to-cart flow. With the introduction of amp-bind it's now possible to create truly interactive AMP pages: it can be used to coordinate page state based on user interaction to show and hide arbitrary divs.

These samples help you getting started with building a product landing page with AMP:

  • Product gallery: with amp-carousel and amp-bind it is easy to create sophisticated image galleries. Here are some samples how to implement image galleries with captions and thumbnails in AMPHTML.
  • Product configuration: use amp-selector and amp-bind for advanced product configuration. For an advanced version see the sample product page.
  • Add to Cart: the product sample demonstrates a fully functional add-to-cart flow which works across different origins.
  • Tabs: can be easily implemented by combining amp-selector with a flex layout. Here is a sample.
  • Star ratings: here is a sample demonstrating how to implement a star rating system in AMP.
  • Call tracking: use amp-call-tracking to track calls initiated from your AMPs.
  • Comments / reviews: comment or review submission can be implemented using amp-form. Combine with amp-access if a user login is required. Here is a sample combining both.

Product Category Page

As popular landing pages for users, product category pages are well suited for AMP. They are often a mix of editorial content and the hero-style presentation of products. Here is a working sample of a product pages demonstrating common features of a category pages such as product listings or search.

Soon, it will be possible to create even better category pages with AMP:

  • Product search: use amp-form to implement a search form. You can serve search results either on a different page (which may not be AMP) or, even better, render search results directly inside the current page. Soon it will be even possible to provide autocomplete suggestions.
  • Product filtering and sorting: client-side sorting and filtering is going to be supported soon amp-sort and amp-filter. Until then you can always fallback to handling this server-side.

Dynamic Content

AMPs can be served from an AMP Cache on a different origin, for example, when they're served in Google Search results. This makes it necessary to consider the AMP Cache's caching strategy when implementing AMPs:

The (AMP) cache follows a "stale-while-revalidate" model. It uses the origin's caching headers, such as Max-Age, as hints in deciding whether a particular document or resource is stale. When a user makes a request for something that is stale, that request causes a new copy to be fetched, so that the next user gets fresh content. [source]

If it's critical that users never see stale data or that data is never older than 15s then additional steps are required. Product pricing or availability are typical examples for when this is the case. To ensure that users always see the latest content, you can use the amp-list component which will fetch and render content directly from your server.

Here is a sample how to render product name and price using amp-list:

Example

<amp-list height="24"
  layout="fixed-height"
  src="https://ampbyexample.com/json/product.json"
  class="m1">
  <template type="amp-mustache">
    {{name}}: ${{price}}
  </template>
</amp-list>
Best Practice: use multiple amp-list instances with a single shared JSON endpoint to benefit from the AMP runtimes request caching and avoid multiple requests to this JSON endpoints.

Another approach is to use amp-bind with a JSON endpoint, This works well if up-to-date data needs to be available after an user interaction, for example, a hotel page displays room availability when the user selects specific dates.

Example

Please select a product
<div class="p1">
  <amp-state id="products"
    src="https://ampbyexample.com/json/products.json"></amp-state>
  <amp-img on="tap:AMP.setState({ productId: 0})"
    src="/img/red_apple_1_60x40.jpg"
    width="60"
    height="40"
    role="button"
    tabindex="0">
  </amp-img>
  <amp-img on="tap:AMP.setState({ productId: 1})"
    src="/img/green_apple_1_60x40.jpg"
    width="60"
    height="40"
    role="button"
    tabindex="0">
  </amp-img>
  <amp-img on="tap:AMP.setState({ productId: 2})"
    src="/img/product1_alt1_60x40.jpg"
    width="60"
    height="40"
    role="button"
    tabindex="0">
  </amp-img>
  <div [text]="products[productId] + ' available'">Please select a product</div>
</div>

Personalization and Login

An easy way to provide personalized content in AMPs is to use amp-list. You can either use cookies (using the attribute credentials="include") or AMP's client id:

Example

  <amp-list credentials="include"
    height="24"
    layout="fixed-height"
    src="https://ampbyexample.com/json/product.json?clientId=CLIENT_ID(myCookieId)"
    class="m1">
    <template type="amp-mustache">
      Your personal offer: ${{price}}
    </template>
  </amp-list>
Best Practice: make sure to configure the AMP CORS headers when using amp-list for personalization.

If you rely on logged-in users, you can use the amp-access component to log users into your website directly from an AMP page. Check out this sample for how to implement a login flow in AMP.

Good to know: amp-access works on your origin and on AMP Caches.

Checkout flow and Payments

To avoid user frustration make it possible for users to initiate checkout directly from withing your AMP pages. Here are three ways you can handle checkout in AMP pages:

  • In Chrome you can use the Payments Requests API. Checkout the payments sample to see how it works.
  • Implement your checkout flow inside your AMP pages using amp-form.
  • Re-direct users to the checkout flow on your website. Important: make the transition as seamless as possible, in particular, don't let users enter the same information twice.
Best Practice: speed-up the transition from your AMPs to your normal website using amp-install-serviceworker to pre-cache parts of your normal website.

Analytics

Make sure to measure how users engage with your AMP Pages using amp-analytics. Important: test your analytics integration and make sure that AMP traffic is correctly attributed, in particular if the AMP is served from a different origin. For testing, you can load your AMPs via the Google AMP Cache.

Best Practice: treat your AMPs as a different platform similar to like you would treat an email campaign. Make sure to properly attribute links from your AMPs back to your website.