Solved

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

Elia18
Excursionist
16 0 2

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!

Accepted Solution (1)

GemPages
Shopify Partner
5604 1261 1224

This is an 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' -

GemPages_0-1673423775246.png

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>

GemPages_1-1673423934624.png

 

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

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Replies 17 (17)

BSS-Commerce
Shopify Expert
3477 462 524

Hi @Elia18 

Please follow these steps:

- Add script below:

view - 2023-01-11T114646.411.png

view - 2023-01-11T114648.925.png

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

view - 2023-01-11T114730.738.png

/* 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:

view - 2023-01-11T114822.014.png

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

view - 2023-01-11T114851.155.png

Click "Description":

view - 2023-01-11T114919.015.png

- The other product:

view - 2023-01-11T114928.498.png

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

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Elia18
Excursionist
16 0 2

Thanks a lot!

RobArt98
Pathfinder
96 3 14

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
Tourist
19 0 0

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
Shopify Partner
5604 1261 1224

This is an 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' -

GemPages_0-1673423775246.png

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>

GemPages_1-1673423934624.png

 

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

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Elia18
Excursionist
16 0 2

AMAAAAZING and easy! thanks a lot!

RyanF4
Tourist
4 0 1

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
Excursionist
16 0 2

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
Visitor
2 0 0

thank you its working!

 

rcy1234
Visitor
1 0 2

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>

rcy1234_0-1692802543215.png

 

David_at_DIA
Visitor
1 0 0

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

HELDERWRLD
Explorer
105 0 6

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

Screenshot 2023-10-06 at 7.52.33 PM.png

Willi82
Excursionist
26 2 3

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
Excursionist
26 2 3

please, can anyone help me? Thank you

c0rnell_
Shopify Partner
10 0 1

Hi, what do you need help with?

c0rnell_
Shopify Partner
10 0 1

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

jessiems
Tourist
9 0 4

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. Screenshot 2024-03-29 133301.jpg