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

    Chris

    Administrator
    Staff member
    If you are looking for a way to implement the ItemList schema on the Product Listing Pages (Category Pages), follow these example steps. This JSON schema setup will help search engines understand the hierarchy of your product listings on PLP..

    listitem-schema.png


    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.

    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.

    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:

    Code:
    <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>

    Note* this approach may not work for all Shopify sites, so you might need to tweak the array markup.

    This is the basic ListItem schema
    Code:
    <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>

    ItemList Schema to a Shopify blog listings
    And finally the ItemList Schema to a Shopify blog listings (category) page.

    This assumes that you have:
    • blogs.frontpage.articles should be replaced with the correct variable path if your blog collection is named differently.
    • article.image.src assumes your blog posts have an associated image; if not, this line should be adjusted or removed.
    Code:
    <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "ItemList",
      "itemListElement": [
        {% for article in blogs.frontpage.articles %}
        {
          "@type": "ListItem",
          "position": {{ forloop.index }},
          "url": "{{ shop.url }}{{ article.url }}",
          "item": {
            "@type": "Article",
            "name": "{{ article.title | escape }}",
            "image": "{{ article.image.src | img_url: 'master' }}",
            "description": "{{ article.excerpt_or_content | strip_html | escape }}"
          }
        }{% 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.
     
    Last edited: