How can I add custom html code in product description

Excursionist
25 0 1

Hi, 

 

I am using Venture theme. 

 

I have created generic product description which I would be like to embed to all of my product description. Problem is that this generic description contains html & css codes, and not sure If I can add then directly to the product description. 

 

Would be great if anyone of you can help me out on this, will greatly appreciate your time!

 

Thanks!

Dharna

 

0 Likes
Shopify Partner
1346 22 208

Hi Dharna,

 

The product rich text editor has an HTML "mode".

You can toggle it and add your HTML and CSS in there.

Please see: https://help.shopify.com/en/manual/productivity-tools/rich-text-editor#add-html-content-with-the-ric...

 

If that generic content is on all product pages you can simplify this process and include a snippet in the theme product code.

1. Create a theme copy to work on.

2. Create a snippet (in the snippets folder) named: product-generic-description.liquid and add the generic HTML and CSS.

3. Find your product template, can be something like templates/product.liquid or sections/product.liquid

4. In the product code, find the variable that outputs the product description: {{ product.description }}

5. Include the new snippet below or after this:

 

{{ product.description }}
{% include 'product-generic-description' %}

Hope it helps

https://sections.design tips, tricks & Shopify sections
2 Likes
Excursionist
25 0 1

Hi Mircea,

 

Thanks for your time and proposed solutions, actually I have implemented both of your solutions and here is how things come up:

 

1. Added html code in product description in "HTML" mode. 

- I was able to add html code and css code (previously I was using <html>, <head> etc which was creating mess) but now I have just added <script> and <table> tags and it worked, at least from layout perspective. But problem is that it CSS part isn't functioning properly. I have implemented tabs layout there and it seems that first tab is loading just fine, but when I click on second tab, it is not displaying any content of 2nd tab, same with 3rd tab. See attached screenshots. 

 

2. Added new snippet and both html and cs worked correctly, all tabs are loading correctly and display content upon clicking on other tabs. Only problem is that I realize that I can't use this description snippet to all of my product, I only need this description of eyeglasses and not for sunglasses or reading glasses (In my setup it is differentiated by product type). 

 

I am not sure, why same code is working correctly in Snippet setting but not on product description?

 

Please guide me.

 

 

1 Like
Excursionist
25 0 1

Here is the atatched product description html/css code, if you wanted to look at it. 

 

Thanks for your help.

0 Likes
Shopify Partner
1346 22 208

Hey,

Happy you went this far.

 

I would use the 2nd method with a conditional.

We can identify the sunglasses and the rest of the glasses by few product properties. 

In that case we can do:

 

{% if product.type == 'sunglasses' %}
  {% include 'product-sunglasses-generic-description' %}
{% elsif product.type == 'reading'  %}
  {% include 'product-reading-generic-description' %}
{% endif %}

You need to set a type to your products, the code above is using made up types.

You need to create different snippets for each case.

Have a look at conditionals in Liquid: https://help.shopify.com/en/themes/liquid/basics/operators

https://sections.design tips, tricks & Shopify sections
2 Likes
Excursionist
25 0 1

This is amazing, getting your response in such quick turnaround time :)

 

Let me quickly add conditions on the product description and see how it works. I don't wanted to display any generic product description snippet  for sunglasses or reading glasses (as of now), so I think I should be fine, if I simply put IF condition on this snippet. 

 

Thanks again! 

0 Likes
Excursionist
25 0 1

Thanks for your support. 

 

Seems that product-template is not getting saved, after adding conditional description code, see attached SS for error. Am I missing something here?

 

Regards!

Dharna

0 Likes
Shopify Partner
1346 22 208
{% if product.type contains 'EYEGLASSES' %}
  {% include 'product-generic-description' %}
{% endif %}

This should be OK, try to refresh your browser. The sesion may be closed or some network error.

 

https://sections.design tips, tricks & Shopify sections
2 Likes
Excursionist
25 0 1

t worked after clearing my history and cache. Thank you so much for your help and time, greatly appreciated!

0 Likes
Excursionist
25 0 1

As I mentioned in my previous message it worked out, but just know I noticed one changed behavior after this change, all of my product home page (which has this generic description) is not coming in full width. See attached SS.

 

If I removed below snippet code from product.liquid then product page displays in full width.

   {% if product.type contains 'EYEGLASSES' %}
  		{% include 'product-generic-description' %}
   {% endif %}

Let me know if you have any suggestion to fix this?

 

Dharna

0 Likes