Breadcrumb Styling

Highlighted
New Member
3 0 0

HI guys,

 

I have successfully place breadcrumb in my shopify store. based on the shopify provided breadcrumb coding, the default style is like this

 

Home > Women Clothing > Dress > ABC silk dress

how can I style it as below: 

Home \ Women Clothing \ Dress \ ABC silk dress

 

thank you guys!

0 Likes
Highlighted
Shopify Expert
420 42 46

Hello Phantom, 

 

In your breadcrumb snippet file you will need to replace the › with &005C; to convert the > with \

Kindly do the changes and let me know if you need any further assistance.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
Highlighted
New Member
3 0 0

Hello Pallavi

 

I have tried to replaced &rsaquo to &005C; - its not working. Herewith below my breadcrumb snippets code

 

{% unless template == 'index' or template == 'cart' or template == 'list-collections' %}
<nav class="breadcrumb" role="navigation" aria-label="breadcrumbs">
<a href="/" title="Home">Home</a>
{% if template contains 'page' %}
<span aria-hidden="true">&OO5C;</span>
<span>{{ page.title }}</span>
{% elsif template contains 'product' %}
{% if collection.url %}
<span aria-hidden="true">&OO5C;</span>
{{ collection.title | link_to: collection.url }}
{% endif %}
<span aria-hidden="true">&OO5C;</span>
<span>{{ product.title }}</span>
{% elsif template contains 'collection' and collection.handle %}
<span aria-hidden="true">&OO5C;</span>
{% if current_tags %}
{% capture url %}/collections/{{ collection.handle }}{% endcapture %}
{{ collection.title | link_to: url }}
<span aria-hidden="true">&OO5C;</span>
<span>{{ current_tags | join: " + " }}</span>
{% else %}
<span>{{ collection.title }}</span>
{% endif %}
{% elsif template == 'blog' %}
<span aria-hidden="true">&OO5C;</span>
{% if current_tags %}
{{ blog.title | link_to: blog.url }}
<span aria-hidden="true">&OO5C;</span>
<span>{{ current_tags | join: " + " }}</span>
{% else %}
<span>{{ blog.title }}</span>
{% endif %}
{% elsif template == 'article' %}
<span aria-hidden="true">&OO5C;</span>
{{ blog.title | link_to: blog.url }}
<span aria-hidden="true">&OO5C;</span>
<span>{{ article.title }}</span>
{% else %}
<span aria-hidden="true">&OO5C;</span>
<span>{{ page_title }}</span>
{% endif %}
</nav>
{% endunless %}

the front end breadcrumbs  is shown as below: -

 

HOME&OO5C;Dress&OO5C;satin mini dress

 

could you please advice whats went wrong? thanks!

0 Likes