Shopify themes, liquid, logos, and UX
Join us March 21 for an AMA on planning your 2023 marketing budget with 2H Media co-owners, Matt and Aron
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!
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).
Oh my gosh you're amazing! Thank you so much!
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
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!!
User | RANK |
---|---|
178 | |
158 | |
90 | |
33 | |
29 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023