Breadcrumbs Taste Theme - Add Collection

Solved

Breadcrumbs Taste Theme - Add Collection

cringebg
Tourist
11 0 3

Hey guys, just added breadcrumbs to my website (www.cringe.bg), using this guide: https://community.shopify.com/c/shopify-design/how-to-add-breadcrumb-navigation-to-your-shopify-stor...

everything works well, but the "Collections" link don't seem to visualise and I cannot understand why. 

cringebg_0-1703485897307.png

Here is a screenshot from this page. Basically it says "Home page > Name of product".

I would like it to be "Home page > Collection page > Product page".

 

Thank you!

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
8380 1649 1660

This is an accepted solution.

Go to your Online store > Themes > Edit code > open card-product.liquid file, find those lines of code 

href="{{ card_product.url }}"

Replace with this to add collection in URL of product then it will appear Collection title in your breadcrumbs

href="{{ card_product.url | within:collection }}"

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 10 (10)

Guleria
Shopify Partner
3147 616 882

Hello @cringebg ,

 

Then your URL should be like this
https://cringe.bg/collections/teniski/products/teniska-neposlushen-spisuk 

And to do this you need to replace 
{{ product.url }} with {{ product.url | within: collection }}

Thanks

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
cringebg
Tourist
11 0 3

Thank you, but how do I replicate this url natively when I open a product from any collection on our website? I suppose this is quite hard to do in the theme, right?

cringebg
Tourist
11 0 3

Correct me if I am wrong, I am not so experienced in coding: Maybe a simpler way to do this would be to display a default collection in which the product is (except the collection "all products", in which all products automatically fall into). Most products only have 2 collections so this should be good enough. Thank you 🙂

Dan-From-Ryviu
Shopify Partner
8380 1649 1660

This is an accepted solution.

Go to your Online store > Themes > Edit code > open card-product.liquid file, find those lines of code 

href="{{ card_product.url }}"

Replace with this to add collection in URL of product then it will appear Collection title in your breadcrumbs

href="{{ card_product.url | within:collection }}"

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

cringebg
Tourist
11 0 3

Wow thanks! Worked great. Merry Christmas 🙂

Dan-From-Ryviu
Shopify Partner
8380 1649 1660

Welcome, and the same to you!

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

cringebg
Tourist
11 0 3

One more quick question if you have the time: How would I make the linked breadcrumbs black in color? I suppose its in the base.css, I tried adding a "color: black !important;" code but it didnt work, probably I am doing something wrong. Thank you!

Dan-From-Ryviu
Shopify Partner
8380 1649 1660

Please use this code. 

.breadcrumbs a {
color: #000;
}

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

cringebg
Tourist
11 0 3

Dan you are the MVP!

Dan-From-Ryviu
Shopify Partner
8380 1649 1660

I'm happy I could help.

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.