How can I create a collapsible product description row for all products at once?

[Elia18]

Hello people!

I want my product description on each of my product pages appear into a collapsible row. For each description, make it collapsable or accordion.

But on the SENSE Template, there are no customizable settings to do that. I can add separate collapsible rows but not for each product description, and I don't want to use meta fields because it will be the same work, in 400 times. And I don't want to create a new template page for every single item in my inventory, more than 400 products...

I'm looking for a code that can help me with the collapsable description for each of my products all in once.

This is one of my products and a lot of them have a long description:  https://www.odiliabridal.es/products/zapatos-de-novia-coco 

So since "Zapatos de Novia Coco - Odilia Bridal" to the tab below is a description.

Thanks for your help!

[BSS-Commerce]

Hi @Elia18 

Please follow these steps:

- Add script below:

 <script>
    var coll = document.getElementsByClassName("collapsible");
    var i;
    for (i = 0; i < coll.length; i++) {
        coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.display === "block") {
          content.style.display = "none";
        } else {
          content.style.display = "block";
        }
      });
    }
  </script>

- Add the following CSS:

/* Custom CSS Collapsible row*/
/* Style the button that is used to open and close the collapsible content */
.product__description .collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.product__description .active,.product__description .collapsible:hover {
  background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.product__description .content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}
/* Custom CSS END*/

- Then, you change the interface:

           <div class="product__description rte quick-add-hidden">
              <button type="button" class="collapsible">Description</button>
                  <div class="content">
                    {{ product.description }}
                  </div>                
              </div>

- And here are the results on my theme:

- Click "Description":

- The other product:

If you want to change the look of this button, change the CSS values as you want.
I hope it works on your site.

[Elia18]

Thanks a lot!

[RobArt98]

hey @BSS-Commerce ,

you are really a king 🙂 ! thanks for your provided solution. is there a possibility to have this Description box open by default ?

Many thanks 🙂 

[Magalies]

Hi, @BSS-Commerce 

Can you perhaps assist us as well? 

We are using the RIDE theme, and also have over 400 products: www.magaliescitrusonline.co.za 

We would like the descriptions also to be a collapsable drop down. To make it easier to read for our customers and make it more neat. Please advise how we can achieve this? 

[GemPages · Accepted solution]

Hi @Elia18

I would like to give you a solution to support you.

You can try following the below steps:

1. Go to Online Store -> Theme -> Edit code. https://prnt.sc/elKuwYWlBrEo

2. Open main-product.liquid  file https://prnt.sc/hVbnhamIwLfS

3. Find - when 'description' -

4. Change the code in the above image to the below code.

<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>

Result: https://prnt.sc/A7MsNvA2_-2N -> https://prnt.sc/u_XxvP_rEcvL

Best regards,
GemPages Support Team

[Elia18]

AMAAAAZING and easy! thanks a lot!

[RyanF4]

Hi Thanks this is great.

Wondering if there is a way to enable:

- The collapsible row to be open on start

- Insert some custom text for each product in the details section which can be further expanded (either in the same row or another expandable row)?

Thanks

Ryan

[Elia18]

Hello GemPages again,

My customers don't see the description in my website because is not opened the accordion of the product description.

Can you help me to put the accordion description opened by default?

I added by myself the "read more..." in order to not open all the long descriptions, but I don't know how to have the accordion description opened since the beginning, hope you can help me!

😄

[LerouxY]

thank you its working!

[rcy1234]

If you are using a free shopify template such as Dawn, this is a more convenient convenience that does not require you to modify the code in the template. Only need to operate in the middle of template editing：

Go to Online Store -> Theme -> Customize -> Product -> Product information -> Add block -> Custom liquid.

Then you can add the same code in custom liquid block:

<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>

[David_at_DIA]

Thank you. This elegant solution worked for me. I was wondering if there's a way to add an icon, similar to the icons for the collapsible rows?

Thank you in advance,

David

[crepscity]

...........

[HELDERWRLD]

Hello @GemPages , can you explain how can i do it on Dawn theme? Also, i would like for it not to be Grey, but white and black.

Here's my website: https://c04baf-2.myshopify.com/
Pass: Diversusoficial

I would like for it to be like the reference website: https://www.manieredevoir.com/collections/mens-tracksuits/products/neoprene-regular-fit-hoodie-black...

[Willi82]

hi there,

Does anyone know what the code in the Impact theme should look like?
The main-product.liquid file does not contain code: "when 'description' -" as described by @GemPages . thank you very much!

[Willi82]

please, can anyone help me? Thank you

[c0rnell_]

Hi, what do you need help with?

[c0rnell_]

Hi! Do you have a solution for adding a icon like collapsible row?

[jessiems]

I want to do this but with custom product page templates that I am creating for products, I will be applying the templates to.
Is there a way to do this? It does not give me the option to choose the description for the collapsible row and I am unsure how to go about making this happen as you have to select a "page" for the content of the collapsible row. 

[marvinsignpoint]

thank you! is there also a code to have the row "open" on default?

best

marvin