How do I add descriptions to my products in the Featured section on the homepage

Solved

How do I add descriptions to my products in the Featured section on the homepage

samandpete
Excursionist
15 1 0

My homepage has a Featured section and a Newest section. The Newest section is actually the renamed "Featured" section that comes with the Dawn template. (Make sense?)

 

Anyway. I want to add a product's description between each product image and its price in the Newest (formerly Featured) section on the home page. 

 

I've tried every logical hack. Nothing has worked. Anyone?

 

The site is https://wesellfunnytshirts.com

Thanks.

Accepted Solution (1)
Arif_Shopidevs
Shopify Partner
488 40 91

This is an accepted solution.

Hi @samandpete 

If you use this code it will not show in collection , other page where you call will display the description.

{% if template != 'collection' %}
     {{ card_product.description }}
{% endif %}

 

Thank you

Syncora: Backup & Restore [Free] - Automated real-time store backup with one-click easy restore.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery, and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers.

View solution in original post

Replies 7 (7)

Arif_Shopidevs
Shopify Partner
488 40 91

Hi @samandpete 

Step 1: Navigate to your Shopify admin panel and go to  Online Store.

Step 2: Click on "Themes" and then select  Edit code
Step 3 : Search the card-product.liquid  like 162 or after the  h3 closing tag insert the bellow code

 

         {{ card_product.description }}

 

It will help you to show product descriptions.

Hope it solves your issues

Thank you

Syncora: Backup & Restore [Free] - Automated real-time store backup with one-click easy restore.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery, and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers.

samandpete
Excursionist
15 1 0

Thank you! But there is a caveat...

I've split my description into two sections by using a delimiter. So I have partial_desc[0] and partial_desc[1]. I only want to use partial_desc[0] in this location. And so I placed the code for that where you said to put your code, and it works perfectly. HOWEVER, it also places partial_desc[0] under my products on the collections pages. I only want descriptions on the homepage and on the product pages (already done) but not in the collections.

How can I achieve that?

Arif_Shopidevs
Shopify Partner
488 40 91

Can you share your code to understand more?

Syncora: Backup & Restore [Free] - Automated real-time store backup with one-click easy restore.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery, and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers.

samandpete
Excursionist
15 1 0

I would be glad to share, but I won't be back at my computer until tomorrow.

 

So going back to the problem I've got now where I want descriptions on the homepage but not on the collection pages, do you know how I might achieve that?

Arif_Shopidevs
Shopify Partner
488 40 91

This is an accepted solution.

Hi @samandpete 

If you use this code it will not show in collection , other page where you call will display the description.

{% if template != 'collection' %}
     {{ card_product.description }}
{% endif %}

 

Thank you

Syncora: Backup & Restore [Free] - Automated real-time store backup with one-click easy restore.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery, and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers.

samandpete
Excursionist
15 1 0

Your code made my site work. Thank you.


This is the code you asked for:

{% if template contains 'collection' %}
<p class="collection-product-description">
{% assign partial_desc = card_product.description | split: '+++' %}
{% for top_desc in partial_desc[0] %}
{{ top_desc | strip_html | truncate: 100 }}

{%- endfor %}
</p>
{% endif %}

The way it works is that in the product description I've placed a delimiter (it can be anything you want, but I use +++). The content above that delimiter is partial_desc[0] and the info below it is partial_desc[1]. 

I place [0] on my homepage (only, thanks to you) and then on the product page. I wanted this so that the initial description could be placed at the top of the product page and the longer sort of technical description at the bottom of the page. 

You can view the site here: https://wesellfunnytshirts.com/

I did see a different way -- using "custom data" -- to achieve this which is much cleaner, but I haven't managed to make it work yet. 


Arif_Shopidevs
Shopify Partner
488 40 91

I have checked my code and give you the solution , when we use template check it do not work in product page related product. So other than collection it will show.

 

Custom data and seperate them is easier to manage in the long run. When you grow and some one else manage the site, they may not understand the seeparaion of description. It may break.

 

Thank you 

 

Syncora: Backup & Restore [Free] - Automated real-time store backup with one-click easy restore.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery, and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers.