Adding Product Descriptions Under Images on Collections Page - Venue Theme

[BHD]

I need to add some text underneath our product images on our collections pages. I am extremely new to HTML and Code so while I think I may have found the answer somewhere, I'm not sure where to add it in the code.

{{ product.description | strip_html | truncate: 60 }}

This is where I would need the product description. I could lose the "To purchase..." part as it is listed above as well.

Any help is greatly appreciated. 

[kaalTechGeeks]

Hi @BHD, 
can you please share your website URL so that I could take a look at it and share the exact that can help you do achieve what you need. 
Thanks 

[BHD]

www.bostonharbordistillery.com

[kaalTechGeeks]

hello @BHD, 
I have few questions to ask from you about this so this could be fixed 
1. are you able to manipulate the code yourself ? 
2. When should the description be visible ?
3. Should the description be visible on all collections or some specific collection or product grids?

4. And up to what length the description should come as we cannot simply show the entire description of the products on collection pages? 
Please let me know your answers so that I can help & guide you    

[BHD]

I have access to the code, yes. As long as I'm told what to do I should be able to do it
It should be visible at all times. 
It will need to be on all collection pages, anywhere there is a grid of products (not including the merchandise/wearables); just the alcohol.
I just need a short phrase under each bottle like: 43%ABV/86 Proof (it'll be different for each bottle but that is about how long I'll need.)

[kaalTechGeeks]

Ok Cool! 
Then you have to follow the steps below: 
1. Search for the file responsible for rendering the product grids. 
2. After that search for the div containing the class 'product__details__hover' 
3. After you have successfully located it just comment that element and all its subsequent elements. 
4. place the code at the place where you just commented out the code 

{% comment %}
Also please do look for by what name is the product on the snippet rendering the product data. It may be by the variable 'product' or 'card_product' or any other. And then replace the product in the code with that keyword.
NOTE: If you are not able to figure out the exact variable until then this code would not work 
{% endcomment %}

{% if product.description != blank %}
  <div class="product__details">
   {% comment %}
     you can change the number 8 on the line below by the number of words tou wish to show on the description. 
   {% endcomment %}
   <p>{{ product.description | truncatewords: 8, '...' }}</p>
  </div>
{% endif %}

@BHD, 
If you have any doubts in implementing the code then do not hesitate to ping me 
I will be glad to help you
Thanks 

[BHD]

Unfortunately, none of that makes sense to me haha

I think I found product_details_hover. But after that I'm lost

[kaalTechGeeks]

Ok no problem @BHD, 
Please let me know if you are free for a quick meet call so that I can guide you ?  

[BHD]

Waiting to hear back from the guy that designed the website for us. If I don't hear back from him I will reach back out to you

[kaalTechGeeks]

Ok @BHD, 
no worries hope your problem gets resolved. 
Also please do not forget to like my solutions as they motivate to help others on the community
Thanks