Hi there,
I delete " | within: collection" in all related product liquid so that on a product page url, it will no longer show the collection path. However,on the product page, it will no longer show the collection path breadcrumb.
I’m wondering how to implement the same breadcrumbs like Gymshark?
#1 On Gymshark Product page url, they also don’t have the collection url.
#2 Based on how user get to the product page, it will show the breadcrumbs accordingly. For example, if user get to product page through tanktop collection page or thrugh arrival collection page, it will show the breadcrumb differently for the same product.
Below is my breadcrumb code:
{%- comment -%}
Documentation - http://docs.shopify.com/support/your-website/navigation/creating-a-breadcrumb-navigation
{%- endcomment -%}
{%- unless template == ‘index’ -%}
- Home
{%- if template contains 'product' -%}
{%- if collection -%}
{%- if collection.handle -%}
{%- capture url -%}/collections/{{ collection.handle }}{%- endcapture -%}
- {{ collection.title | link_to: url }}
{%- endif -%}
{%- endif -%}
- {{ product.title }}
{%- elsif template contains ‘collection’ and collection.handle -%}
{%- if current_tags -%}
{%- capture url -%}/collections/{{ collection.handle }}{%- endcapture -%}
- {{ collection.title | link_to: url }}
{%- else -%}
- {{ collection.title | capitalize }}
{%- endif -%}
{%- elsif template == ‘article’ -%}
- {{ blog.title }}
- {{ article.title }}
{%- elsif template contains 'customers' and template != "customers/account" -%}
{%- assign account = 'customer.account.title_main' | t -%}
- {{ account | capitalize | link_to: "/account" }}
- {{ page_title }}
{%- elsif template contains ‘page’ -%}
- {{ page.title }}
{%- else -%}
- {{ page_title }}
{%- endif -%}
{%- endunless -%}
in gym sharks there collection page is called tanks so in your code it would be
{{collection.title}}
which would output whatever your collection is called
also looked up gymshark they use React to build the site not shopify themes
Gymshark is using shopify to build up.
So far I can display the previous collection url through the following javascript:
I still need to display the collection title to accomplish this. So when a user is visiting a product page from a collection page, it can show:
previous collection page title
I’m still stuck here. If anyone can provide some guidance, it will be much appreciated.
https://builtwith.com/gymshark.com it says react and Graphql. This tells me they are using either gatsby,nextjs or something else to render the Graphql to the breadcrumb and everything else, not a Shopify theme.
Currently, in Shopify themes, it can’t be done without some backwords magic because each product can have many different collections * for example, a book about pokemon can be in 4 different collections (kids, collectibles, books, toys). you will have to use the where function.. maybe try this.. if that doesn’t work you can bind metafields to each collection and use metafields inside the code
All products:
{% for product in collection.products %}
- {{ product.title }}
{% endfor %}
{% assign kitchen_products = collection.products | where: "type", "kitchen" %}
Kitchen products:
{% for product in kitchen_products %}
- {{ product.title }}
{% endfor %}
@amorlett thanks for your prompt response. I’m a beginner in coding.
Yes, I’m trying to narrow down the collection that a product belongs to since a product might belong to multiple collection.
What I’m trying to achieve is:
If a user visit product through collection A, then breadcrumb shows as: Home/collection A/product;
If a user visit product through collection B, then breadcrumb shows as: Home/collection B/product.
Therefore, in the where filter, I cannot specify a specific type. Any suggestion on how to filter by previous collection page title?
oh okay not sure if that can be done with shopify themes inherently because you can use a forloop[0] for example but all that does is get the first item of the array the only thing I can really think of is instead of varients you use collections in this example separated varient youtube video
