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

Store Design
, ,

Topic summary

A user seeks to add a collapsible/accordion feature to product descriptions across all products simultaneously to improve visual appeal and reduce page length.

Solutions Provided:

Two community members offered technical approaches:

  • First approach: Modify the main-product.liquid file by locating the description section and replacing existing code with collapsible markup
  • Second approach (more detailed): Implement custom JavaScript and CSS by:
    1. Adding JavaScript code below the <head> tag in theme.liquid
    2. Inserting CSS styling into base.css to control collapsible behavior and appearance
    3. Multiple screenshots provided showing exact code placement

Additional Context:

The helper offering the detailed solution mentioned the store’s design appears “cluttered” and could benefit from broader design improvements, though clarified this was personal observation rather than criticism. The original poster requested clarification on these design concerns.

Status: Solution provided with step-by-step implementation instructions; awaiting user testing and feedback.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

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.

2

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.

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

Best regards,

Sandeep

3

Hi,

Is it the following area on the product page?

Terence.

TerenceKEANE_0-1716891407386.png
TerenceKEANE_0-1716891407386.png1318×895 157 KB

4

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…

5

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 ‘’ tag. Please refer to the attached screenshot for guidance.

shopify.head.jpg
shopify.head.jpg1366×545 61.8 KB

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
shopify.base.css.jpg1878×902 166 KB

TerenceKEANE_0-1716894835855.png
TerenceKEANE_0-1716894835855.png1659×635 93.6 KB

TerenceKEANE_1-1716894851366.png
TerenceKEANE_1-1716894851366.png1465×773 124 KB

Terence

6

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

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

7

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.