Add product descriptions to collection pages

Highlighted
New Member
2 0 1

Hello I am wanting to add product descriptions to my collection pages. I have found to use this code: {{ product.description | strip_html | truncate: 80 }} but cannot figure out where to put it in the coding to make it work. Kind of a newbie. I am using the Brooklyn theme. 

 

Thank you!

0 Likes
Highlighted
Shopify Expert
804 67 187

You'll want to find the file that produces the product cards on collection pages - it's usually in the Snippets folder, something like "product-thumbnail.liquid", "product-card.liquid", "product-grid.liquid", etc. 

 

Once you're in there, you can read the code to find where the other elements near it are displayed (search for <img to find the image tag, then you should see title and price under that, then you can insert your snippet where you need to in relation to those).

Founder of Speed Boostr (Shopify optimization and dev agency).
Creator of Theme Scientist (A/B testing app).
Creator of Order Automator (app that auto tags + fulfills orders, send emails).
Creator of Tip Jar (add a tip button to your store).
Creator of Shopify Analyzer (free performance analysis tool).
My team also builds custom apps and automated solutions.
Enjoy the adventure!
0 Likes
Highlighted
New Member
2 0 1

Oh my gosh you're amazing! Thank you so much!

1 Like
Highlighted
New Member
1 0 0

Hi

 

If I wanted to add a small image in this space how would I go about that?

Where would I store the image?

Super newb fyi

 

Thx

0 Likes
Highlighted
New Member
2 0 0

Hi,

I am also trying to add product descriptions to my collections page. I have split my descriptions on the product page in to two sections (above and below the add to cart button. I can get the whole description for each product to show on the collections page by putting the following code in to the  product-grid-item. liquid:

{% unless section.settings.show_extra_tab == false or pages[section.settings.extra_tab_content] == empty %}
<div class="tabs">
<ul class="tab-switch__nav">
<li>
<a href="#description" data-link="description" class="tab-switch__trigger h3">{{ 'products.product.description' | t }}</a>
</li>
<li>
<a href="#extra" data-link="extra" class="tab-switch__trigger h3">{{ pages[section.settings.extra_tab_content].title }}</a>
</li>
</ul>
<div id="description" class="tab-switch__content" data-content="description">
<div class="product-description rte" itemprop="description">
{{ product.description }}
</div>
</div>
<div id="extra" class="tab-switch__content" data-content="extra">
<div class="rte">
{{ pages[section.settings.extra_tab_content].content }}
</div>
</div>
</div>
{% else %}
<div class="product-description rte" itemprop="description">
{{ product.description }}
</div>

{% endunless %}

Can anyone provide some ideas as to how I might be able to have only the first section of the description from the product page show on the collections page. I have tried more/less toggles and truncate functions and neither worked well for my set up.

Any help would be greatly appreciated as I am way out of my depth on this.

Thanks!!

 

0 Likes