Join us March 21 for an AMA on planning your 2023 marketing budget with 2H Media co-owners, Matt and Aron

Add product descriptions to collection pages

fpope
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!

Replies 4 (4)
JoesIdeas
Shopify Expert
1790 157 471

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).

• Creator of Order Automator (app to save time + automate tasks, monitor orders, tag, fulfill, FBA)
• Shopify developer for +10 years
• Contributor on the Speed Boostr blog
• Guy who likes to help people
fpope
New Member
2 0 1

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

rensteel
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

JanJan82
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!!