Shopify - Carousel (ItemList) schema on the Product Listing Pages (Category Pages)

This guide walks you through the setup if you're looking to add Carousel (ItemList) schema to your Product Listing Pages (Category Pages) it helps search engines better understand your product hierarchy, which can improve visibility, enhance rich results, and make your listings stand out in search.

For eCommerce, this means clearer, more structured results that can drive higher click-through rates and improve user engagement. Follow these steps to implement the schema correctly, ensuring your product data is optimised for search engines and provides a better shopping experience.


This is how carousels can appear in Google Search when ItemList markup is used alongside a supported content type (Image credit: Google).

Let's Begin:​

1. Identify Your Template: First, determine which template is used for your PLP within Shopify. This is typically found under Templates and might be named something like list-collections.liquid or collection.liquid.
2. Edit the Liquid Template: Open the template for editing in the Shopify admin. You will be adding structured data in JSON-LD format directly into the HTML.
3. Insert Schema Markup: At the top of the template file, insert a script tag for JSON-LD and start defining your ItemList schema. Loop through each product in the collection to create a ListItem for each.

Here’s an example of how you might add it:​

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "ItemList",
  "itemListElement": [
    {% for product in collection.products %}
    {
      "@type": "ListItem",
      "position": {{ forloop.index }},
      "url": "{{ shop.url }}{{ product.url }}",
      "item": {
        "@type": "Product",
        "name": "{{ product.title | escape }}",
        "image": "{{ product.featured_image.src | img_url: 'master' }}",
        "description": "{{ product.description | strip_html | escape }}",
        "offers": {
          "@type": "Offer",
          "price": "{{ product.price | money_without_currency }}",
          "priceCurrency": "{{ shop.currency }}"
        }
      }
    }{% unless forloop.last %},{% endunless %}
    {% endfor %}
  ]
}
</script>

The image below displays a validated Carousel (ItemList) schema structured with schema.org.​

Note* The approach above might not work on every Shopify site, so you may need to tweak the array markup to fit your setup.

Below is a basic boilerplate for ListItem schema, giving you a solid starting point that you can scale, customise, and adapt to match your specific needs.

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "ItemList",
  "itemListElement": [
    {% for product in collection.products %}
    {
      "@type": "ListItem",
      "position": {{ forloop.index }},
      "url": "{{ product.url | within: collection }}"
    }{% unless forloop.last %},{% endunless %}
    {% endfor %}
  ]
}
</script>

Do you have any questions, or would you like to share other examples? Post below. If you need Shopify SEO support, reach out to me.