AMP Roadshow is coming to Atlanta and Berlin!
  • websites

Show More Button


This is a sample showing how to implement the "show more" design pattern. "Show more" is common design pattern used on e-commerce category pages to lazy load more content triggered by an user interaction.


Additionally used AMP components must be imported in the header. We use amp-list for showing a list of products

<script async custom-element="amp-list" src=""></script>

We use amp-bind for dynamically changing the src of amp-list

<script async custom-element="amp-bind" src=""></script>

We use amp-form for making the call to get extra products after an user interaction

<script async custom-element="amp-form" src=""></script>

We use amp-mustache for rendering the amp-list content

<script async custom-template="amp-mustache" src=""></script>

How to implement a show more button

You can implement a show more button by using amp-list and amp-bind, where

amp-list src data are bind to the value of an amp-state element. Here we are using two amp-state: productsState

which uses the same json src as the amp-list so that will initially contain the same list of items ...

<amp-state id="productsState"

... while the amp-state with id product is just used to implement the show-more logic where we are allowing the user to click 3 times.

<amp-state id="product">
  <script type="application/json">
      "moreItemsPageIndex": 0,
      "hasMorePages": true

We bind the src attribute of the amp-list to the amp-state object containing the products

from that component as a src. We also dynamically change the height of the amp-list based on

the number of items (each item has a height of 24px).

<amp-list src="/static/samples/json/related_products.json"
  [height]="productsState.items.length * 24">
  <template type="amp-mustache">
    {{name}}: ${{price}}

The show more button is implemented via a form which triggers a page update on the submit-success event.

We are then merging the form results into the items already loaded by the amp-state using the concat function.

<form method="GET"
  on="submit-success: AMP.setState({
            productsState: {
              items: productsState.items.concat(event.response.items)
            product: {
              moreItemsPageIndex: product.moreItemsPageIndex + 1,
              hasMorePages: event.response.hasMorePages
  <input type="hidden"
  <input type="submit"
    value="Show more"
Need further explanation?

If the explanations on this page don't cover all of your questions feel free to reach out to other AMP users to discuss your exact use case.

Go to Stack Overflow
An unexplained feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Edit sample on GitHub