Solved

DAWN: how to add Collection to Product page?

PLCollection
Tourist
18 0 2

How do I add the Collection name above the Title on the Product page? Is this accomplished as metafields?

Accepted Solution (1)

Niraj_singh
Shopify Partner
232 39 47

This is an accepted solution.

Like one product may be assign on more than 1 collection so you show first assigned collection by below mentioned code on DAWN theme on sections -> main-product.liquid at line number 200

{% assign pro_collection = product.collections.first %}
{% if pro_collection %}
This product is part of my {{ pro_collection.title | link_to: pro_collection.url }} Collection
{% endif %}


banned

View solution in original post

Replies 16 (16)

Sajeel
Shopify Partner
272 31 26

@PLCollection  you can add this code 

<h1 class="hero__title">{{ collection.title }}</h1>

above 

<h1 class="product__title">{{ product.title }}</h1>

in snippets/product.liquid file

 

PLCollection
Tourist
18 0 2

I use the Dawn theme and there is no snippets/product.liquid file - would it be the templates/product.json file?

Sajeel
Shopify Partner
272 31 26

no not the json file just show me the screen shots of file names or look for product.liquid

 

PLCollection
Tourist
18 0 2

for Product I only see these files:

  • product-media.liquid
  • product-thumbnail.liquid
Sajeel
Shopify Partner
272 31 26

share store url

PLCollection
Tourist
18 0 2

plcollection.myshopify.com

 

Reminder: I'm using Dawn theme

Sajeel
Shopify Partner
272 31 26

your store is password protected

 

Niraj_singh
Shopify Partner
232 39 47

This is an accepted solution.

Like one product may be assign on more than 1 collection so you show first assigned collection by below mentioned code on DAWN theme on sections -> main-product.liquid at line number 200

{% assign pro_collection = product.collections.first %}
{% if pro_collection %}
This product is part of my {{ pro_collection.title | link_to: pro_collection.url }} Collection
{% endif %}


banned
PLCollection
Tourist
18 0 2

Thank you and this code works.  However, I just realized that my products can indeed be associated to more than one collection -- and I only want to display the "key" collection name above the title, but I don't know how I would specify the key collection in Shopify.

Niraj_singh
Shopify Partner
232 39 47

It is posible by add a metafield on product and value of metafield is equal to collection handle which you want to show on product page.
and on product page you can show that metafield by liquid code as we did above. 

banned
thisMD
Excursionist
13 1 2

Hello PLCollection, were you able to get the solution to displaying the key collection? By key collection do you mean the name of the collection you have currently navigated from? That is the solution is am looking for. 

mc20
Visitor
2 0 0

What if you wanted to show ALL the collections the product belongs in, not just 1? I thought it may be as easy as removing the "first" from the code, but no luck.

gmeo
Shopify Partner
13 2 2

Here you are

 

 

 

{% assign pro_collection = product.collections %}
    {% if pro_collection %}
        All Collection: 
        {% for col in pro_collection %}
            <a href="{{ col.url }}" title="{{ col.title }}">{{ col.title }}</a>{% unless forloop.last %},{% endunless %}
        {% endfor %}
    {% endif %}

 

 

Trong Nguyen Quoc
mollies
Tourist
10 0 0

In the following code (as copied above), is there a way to exclude a collection? For instance, exclude the collection "All Products".

 

{% assign pro_collection = product.collections %}
{% if pro_collection %}
All Collection:
{% for col in pro_collection %}
<a href="{{ col.url }}" title="{{ col.title }}">{{ col.title }}</a>{% unless forloop.last %},{% endunless %}
{% endfor %}
{% endif %}

gmeo
Shopify Partner
13 2 2
You can add conditions here to remove any collection you want
 
    {% assign pro_collection = product.collections %}
    {% if pro_collection %}
        {{ 'products.product.type_title' | t }}
        {% for col in pro_collection %}
            {% if col.title != 'collection' %}<a href="{{ col.url }}" title="{{ col.title }}">{{ col.title }}</a>{% unless forloop.last %},{% endunless %}{% endif %}
        {% endfor %}
    {% endif %}
Trong Nguyen Quoc
mollies
Tourist
10 0 0

Thank you, I will give that a whirl.