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

Magalies · ‎05-28-2024

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

We are using the ride theme.

TerenceKEANE · ‎05-28-2024

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>

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

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

LuffyOnePiece · ‎05-28-2024

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 · ‎05-28-2024

Hi,

Is it the following area on the product page?

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 · ‎05-28-2024

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 · ‎05-28-2024

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>

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

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 · ‎05-28-2024

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 · ‎05-28-2024

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

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

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

Community Blog Articles