Solved

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

Magalies
Tourist
19 0 0

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

www.magaliescitrusonline.co.za - is our online store.

We are using the ride theme.

Accepted Solution (1)
TerenceKEANE
Shopify Partner
511 86 78

This is an accepted solution.

Alright, I understand. Actually, your website is nice but it needs serious work in terms of design. Normally, I only provide detailed assistance like this to our 'Shopify premium support' customers, but this time I made an exception for you. It will look like the image below.

 

The following code will do what you want.

 

1) Navigate to the 'Edit Code' option in your theme settings, then search for 'theme.liquid' in the search bar.

2) Paste the following code below the '<head>' tag. Please refer to the attached screenshot for guidance.

 

<script>
  document.addEventListener("DOMContentLoaded", function() {
            var productDescription = document.querySelector('.product__description');

            var collapsibleButton = document.createElement('button');
            collapsibleButton.className = 'collapsible';
            collapsibleButton.textContent = 'Product Description';

            var contentWrapper = document.createElement('div');
            contentWrapper.className = 'content';

            while (productDescription.firstChild) {
                contentWrapper.appendChild(productDescription.firstChild);
            }

            productDescription.appendChild(collapsibleButton);
            productDescription.appendChild(contentWrapper);

            collapsibleButton.addEventListener('click', function() {
                if (contentWrapper.style.display === "block") {
                    contentWrapper.style.display = "none";
                } else {
                    contentWrapper.style.display = "block";
                }
            });
        });
</script>

shopify.head.jpg

 

 

Navigate to the 'Edit Code' option in your theme settings, then search for “base.css” in the search bar and add below codes.

 

.collapsible {
            cursor: pointer;
            padding: 10px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 15px;
            background-color: #f1f1f1;
            position: relative;
        }

        .collapsible::after {
            content: '\25BC'; 
            font-size: 12px;
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%) rotate(0deg); 
            transition: transform 0.3s ease;
        }

        .collapsible.active::after {
            transform: translateY(-50%) rotate(180deg); 
        }

        .content {
            padding: 0 10px;
            display: none;
            overflow: hidden;
            background-color: #f9f9f9;
        }

 

shopify.base.css.jpg

 

TerenceKEANE_0-1716894835855.png

TerenceKEANE_1-1716894851366.png

 

 

 

 

Terence

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites

View solution in original post

Replies 6 (6)

LuffyOnePiece
Shopify Partner
603 86 104

Hi @Magalies ,

 

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,

Sandeep 

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184

TerenceKEANE
Shopify Partner
511 86 78

Hi,

 

Is it the following area on the product page?

 

Terence.

 

TerenceKEANE_0-1716891407386.png

 

 

 

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
Magalies
Tourist
19 0 0

Hi, @TerenceKEANE 

 

Yes, that is the correct area. We have so many products and the info is to long.. i want to create a dropdown, to create a more visually appealing page...

 

 

TerenceKEANE
Shopify Partner
511 86 78

This is an accepted solution.

Alright, I understand. Actually, your website is nice but it needs serious work in terms of design. Normally, I only provide detailed assistance like this to our 'Shopify premium support' customers, but this time I made an exception for you. It will look like the image below.

 

The following code will do what you want.

 

1) Navigate to the 'Edit Code' option in your theme settings, then search for 'theme.liquid' in the search bar.

2) Paste the following code below the '<head>' tag. Please refer to the attached screenshot for guidance.

 

<script>
  document.addEventListener("DOMContentLoaded", function() {
            var productDescription = document.querySelector('.product__description');

            var collapsibleButton = document.createElement('button');
            collapsibleButton.className = 'collapsible';
            collapsibleButton.textContent = 'Product Description';

            var contentWrapper = document.createElement('div');
            contentWrapper.className = 'content';

            while (productDescription.firstChild) {
                contentWrapper.appendChild(productDescription.firstChild);
            }

            productDescription.appendChild(collapsibleButton);
            productDescription.appendChild(contentWrapper);

            collapsibleButton.addEventListener('click', function() {
                if (contentWrapper.style.display === "block") {
                    contentWrapper.style.display = "none";
                } else {
                    contentWrapper.style.display = "block";
                }
            });
        });
</script>

shopify.head.jpg

 

 

Navigate to the 'Edit Code' option in your theme settings, then search for “base.css” in the search bar and add below codes.

 

.collapsible {
            cursor: pointer;
            padding: 10px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 15px;
            background-color: #f1f1f1;
            position: relative;
        }

        .collapsible::after {
            content: '\25BC'; 
            font-size: 12px;
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%) rotate(0deg); 
            transition: transform 0.3s ease;
        }

        .collapsible.active::after {
            transform: translateY(-50%) rotate(180deg); 
        }

        .content {
            padding: 0 10px;
            display: none;
            overflow: hidden;
            background-color: #f9f9f9;
        }

 

shopify.base.css.jpg

 

TerenceKEANE_0-1716894835855.png

TerenceKEANE_1-1716894851366.png

 

 

 

 

Terence

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
Magalies
Tourist
19 0 0

Hi, @TerenceKEANE Thank you for this. Will try to implement this in a moment. 

When you say serious design issues? What do you mean? 

TerenceKEANE
Shopify Partner
511 86 78

you are welcome..

 

First of all, please don't misunderstand. Since I provide continuous front-end support for various e-commerce or other websites and platforms, the design seemed a bit cluttered to me. If it looks good to you, then of course, there's no issue.

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites