Solved

Add descreption on Product Page (Dawn Theme)

adword009
New Member
6 0 0

Hi 

 

I want to add the description of the product on the product page in a collapsible row, which should be pulled directly from its description box. I have no clue how to do that. Please help me; your assistance will be appreciated.

 

https://ny6qoht1cxbrrjta-64576913585.shopifypreview.com

Screenshot 2024-04-15 at 10.21.42 AM.png

Accepted Solution (1)

devmont-digital
Shopify Partner
103 24 25

This is an accepted solution.

Hello @adword009,

 

To add a product description within collapsible content in the Dawn theme, follow these steps:

  1. Navigate to Online Store -> Themes -> Edit Code.
  2. Find the file "main-product.liquid" and search for the word "collapsible_tab". Paste the code within this section.

 

 

{{ block.settings.custom-liquid }}

 

 

 

Group 101 (1).png

 

 3. Next, search for the schema and locate the closing bracket for "collapsible_tab". Paste the code before this bracket. For your convenience, I have attached a screenshot.

 

 

{
  "type": "liquid",
  "id": "custom-liquid",
  "label": "Custom Liquid"
}

 

 

Group 101 (1).png

 

 

  1. Then navigate to Online Store -> Themes -> Customize.

  2. Go to the default product and select the collapsible tab, then type the code in custom liquid.

 

 

{{ product.description }}

 

 

Group 101 (1).png

 

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io

View solution in original post

Replies 5 (5)

devmont-digital
Shopify Partner
103 24 25

This is an accepted solution.

Hello @adword009,

 

To add a product description within collapsible content in the Dawn theme, follow these steps:

  1. Navigate to Online Store -> Themes -> Edit Code.
  2. Find the file "main-product.liquid" and search for the word "collapsible_tab". Paste the code within this section.

 

 

{{ block.settings.custom-liquid }}

 

 

 

Group 101 (1).png

 

 3. Next, search for the schema and locate the closing bracket for "collapsible_tab". Paste the code before this bracket. For your convenience, I have attached a screenshot.

 

 

{
  "type": "liquid",
  "id": "custom-liquid",
  "label": "Custom Liquid"
}

 

 

Group 101 (1).png

 

 

  1. Then navigate to Online Store -> Themes -> Customize.

  2. Go to the default product and select the collapsible tab, then type the code in custom liquid.

 

 

{{ product.description }}

 

 

Group 101 (1).png

 

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io
adword009
New Member
6 0 0

Thanks, it worked, but the description coming like this.
I want it to come like SHIPPING & DELIVERY or  RETURN/EXCHANGE.

Screenshot 2024-04-15 at 6.00.25 PM.png

Screenshot 2024-04-15 at 6.21.29 PM.png

Screenshot 2024-04-15 at 6.27.29 PM.png

devmont-digital
Shopify Partner
103 24 25

Basically, if you enter the product description without using a table, it won't cause any issues like that.

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io

wo
Shopify Partner
86 22 21

I prefer to handle it this way.

{% if block.settings.use_description %}
   {{ product.description }}
{% else %}
   {{ block.settings.content }}
   {{ block.settings.page.content }}
{% endif %}

wo_0-1713171209287.png

 

{
   "type": "checkbox",
   "id": "use_description",
   "label": "Use Description",
   "default": false
},

wo_1-1713171273054.png

 

 

Anshul_arora
Navigator
424 121 84

Hello @adword009 ,

I understand you are looking to provide product description under the collapsible row.

As the shopify admin will add the product description here https://prnt.sc/KLCfz6p_B6lP & it will automatically display as collapsible row in product page.

You can implement this making some small changes in the existing code.

Steps -:

1. First select Edit Code section https://prnt.sc/z9yQDYIW-vm2 and open main-product.liquid file.

2. Next, press CTRL+ F and search the code mentioned in the image https://prnt.sc/D0j9OWNg_PuI

3. Replace the code with this code & save -:

<div class="product__accordion accordion quick-add-hidden" {{ block.shopify_attributes }}>
<details id="Details-{{ block.id }}-{{ section.id }}">
<summary>
<div class="summary__title">
<h2 class="h4 accordion__title">
Description
</h2>
</div>
{% render 'icon-caret' %}
</summary>
<div class="accordion__content rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}">
<div class="product__description rte quick-add-hidden">
{{ product.description }}
</div>
</div>
</details>
</div>


==> https://prnt.sc/cEb_B3asz8QJ

OUTPUT =>

Anshul_arora_0-1713172053945.png

 

I hope the solution helps you.

Please share if you have any query.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here