Happening now | Office Hours: Customizing Your Theme With Moeed | Ask your questions now!

Need a Dynamic Breadcrumb Schema JSON-Ld script for shopify 2.0

Solved

Need a Dynamic Breadcrumb Schema JSON-Ld script for shopify 2.0

LookandAdorn
Tourist
15 0 1

please provide a valid dynamic breadcrumb schema JSON-LD script 

Accepted Solutions (2)

webwondersco
Shopify Partner
1204 172 174

This is an accepted solution.

@LookandAdorn Please find the code below:

 

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "{{ shop.url }}"
    },
    {%- if template == 'collection' -%}
      {
        "@type": "ListItem",
        "position": 2,
        "name": "{{ collection.title }}",
        "item": "{{ collection.url }}"
      }
    {%- elsif template == 'product' -%}
      {
        "@type": "ListItem",
        "position": 2,
        "name": "{{ collection.title }}",
        "item": "{{ collection.url }}"
      },
      {
        "@type": "ListItem",
        "position": 3,
        "name": "{{ product.title }}",
        "item": "{{ product.url }}"
      }
	{%- else -%}	  
	{
	  "@type": "ListItem",
	  "position": 2,
	  "name": "{{ page.title }}",
	  "item": "{{ shop.url }}{{ request.path }}"
	}
    {%- endif -%}
  ]
}
</script>
Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram

View solution in original post

webwondersco
Shopify Partner
1204 172 174

This is an accepted solution.

@LookandAdorn Please use updated one

 

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "{{ shop.url }}"
    },
    {%- if template == 'collection' -%}
      {
        "@type": "ListItem",
        "position": 2,
        "name": "{{ collection.title }}",
        "item": "{{ collection.url }}"
      }
    {%- elsif template == 'product' -%}
      {
        "@type": "ListItem",
        "position": 2,
        "name": "{{ product.title }}",
        "item": "{{ product.url }}"
      }
	{%- else -%}	  
	{
	  "@type": "ListItem",
	  "position": 2,
	  "name": "{{ page.title }}",
	  "item": "{{ shop.url }}{{ request.path }}"
	}
    {%- endif -%}
  ]
}
</script>
Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram

View solution in original post

Replies 7 (7)

webwondersco
Shopify Partner
1204 172 174

This is an accepted solution.

@LookandAdorn Please find the code below:

 

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "{{ shop.url }}"
    },
    {%- if template == 'collection' -%}
      {
        "@type": "ListItem",
        "position": 2,
        "name": "{{ collection.title }}",
        "item": "{{ collection.url }}"
      }
    {%- elsif template == 'product' -%}
      {
        "@type": "ListItem",
        "position": 2,
        "name": "{{ collection.title }}",
        "item": "{{ collection.url }}"
      },
      {
        "@type": "ListItem",
        "position": 3,
        "name": "{{ product.title }}",
        "item": "{{ product.url }}"
      }
	{%- else -%}	  
	{
	  "@type": "ListItem",
	  "position": 2,
	  "name": "{{ page.title }}",
	  "item": "{{ shop.url }}{{ request.path }}"
	}
    {%- endif -%}
  ]
}
</script>
Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
LookandAdorn
Tourist
15 0 1
webwondersco
Shopify Partner
1204 172 174

This is an accepted solution.

@LookandAdorn Please use updated one

 

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "{{ shop.url }}"
    },
    {%- if template == 'collection' -%}
      {
        "@type": "ListItem",
        "position": 2,
        "name": "{{ collection.title }}",
        "item": "{{ collection.url }}"
      }
    {%- elsif template == 'product' -%}
      {
        "@type": "ListItem",
        "position": 2,
        "name": "{{ product.title }}",
        "item": "{{ product.url }}"
      }
	{%- else -%}	  
	{
	  "@type": "ListItem",
	  "position": 2,
	  "name": "{{ page.title }}",
	  "item": "{{ shop.url }}{{ request.path }}"
	}
    {%- endif -%}
  ]
}
</script>
Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
LookandAdorn
Tourist
15 0 1

@webwondersco wrote:

@LookandAdorn Please use updated one

 

 

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "{{ shop.url }}"
    },
    {%- if template == 'collection' -%}
      {
        "@type": "ListItem",
        "position": 2,
        "name": "{{ collection.title }}",
        "item": "{{ collection.url }}"
      }
    {%- elsif template == 'product' -%}
      {
        "@type": "ListItem",
        "position": 2,
        "name": "{{ product.title }}",
        "item": "{{ product.url }}"
      }
	{%- else -%}	  
	{
	  "@type": "ListItem",
	  "position": 2,
	  "name": "{{ page.title }}",
	  "item": "{{ shop.url }}{{ request.path }}"
	}
    {%- endif -%}
  ]
}
</script>

 


Thank you 👍 so much. I appreciate your quick response

johstrom
Shopify Partner
27 1 3

Trying to implement this myself, but is getting "Unnamed item"-error in Rich Results Test for product pages. It seems that the product-title isn't rendered. 

 

I have created a snippet with your updated code and I am rendering it in theme.liquid. 

 

Please help!

johstrom
Shopify Partner
27 1 3

Hi, I think I have figured it out. This is the code I tried now:

<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Hem",
"item": "{{ shop.url }}"
}
{% if template contains 'collection' %}
,{
"@type": "ListItem",
"position": 2,
"name": "{{ collection.title | escape }}",
"item": "{{ collection.url | prepend: shop.url }}"
}
{% elsif template contains 'product' %}
{% if collection %}
,{
"@type": "ListItem",
"position": 2,
"name": "{{ collection.title | escape }}",
"item": "{{ collection.url | prepend: shop.url }}"
}
{% endif %}
,{
"@type": "ListItem",
"position": 3,
"name": "{{ product.title | escape }}",
"item": "{{ product.url | prepend: shop.url }}"
}
{% elsif template contains 'page' %}
,{
"@type": "ListItem",
"position": 2,
"name": "{{ page.title | escape }}",
"item": "{{ page.url | prepend: shop.url }}"
}
{% endif %}
]
}
</script>
LookandAdorn
Tourist
15 0 1

Hi,

 

Can you please specify where we need to update this above code?