Join us for an upcoming Shopify Partner webinar on February 27, 2024. Discover the latest Checkout Extensibility features, and deep dive on improvements to Shopify Functions and Web Pixels. Register now for either the 10am EST or 2pm EST sessions.
Solved

Breadcrumbs Taste Theme - Add Collection

cringebg
Tourist
9 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
6916 1305 1334

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 or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 10 (10)

Guleria
Shopify Partner
2942 582 831

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
-Advance Search Filter
cringebg
Tourist
9 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
9 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
6916 1305 1334

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 or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

cringebg
Tourist
9 0 3

Wow thanks! Worked great. Merry Christmas 🙂

Dan-From-Ryviu
Shopify Partner
6916 1305 1334

Welcome, and the same to you!

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

cringebg
Tourist
9 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
6916 1305 1334

Please use this code. 

.breadcrumbs a {
color: #000;
}

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

cringebg
Tourist
9 0 3

Dan you are the MVP!

Dan-From-Ryviu
Shopify Partner
6916 1305 1334

I'm happy I could help.

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now