A user wants the product description tab to be collapsed by default on both mobile and desktop versions of their Shopify store (giftana.com). They attempted to modify the product.json file using "show_description_by_default": false and "default_state": "collapsed", but these changes didn’t work.
Proposed Solution:
A responder suggested that if the theme lacks a built-in setting for this, code modification is necessary. They observed that the accordion uses an is-active class when opened and recommended:
is-active class from both title and description elementsCurrent Status:
The user reported that their main-product.liquid file doesn’t contain an is-active class and shared a screenshot of their description code block. The issue remains unresolved, awaiting more specific guidance based on their actual code structure.
i want to description tab to be closed by default in mobile and desktop both.
i tried adding below two codes in product.json but it is not working.
“show_description_by_default”: false
“default_state”: “collapsed”
what code can i add to get solution i want.
website : giftana.com
Hello,
If the theme doesn’t include a built-in option for this in the settings, you’ll need to modify the code.
I noticed that when the accordion is opened, the title and description use the is-active class. To adjust this, you’ll need to find where the accordions are generated in the code.
To do this, go to Online Store → Themes → Edit Code and look for the product.liquid file (or main-product.liquid, depending on the theme - it may have a different name). Inside, locate the code responsible for rendering the accordions and remove the is-active class from both the title and description.
Without direct access to the code, I can’t provide more specific instructions, but let me know if this helps!
Hello,
If the theme doesn’t include a built-in option for this in the settings, you’ll need to make some code modifications.
I noticed that the title and description of the accordion use the is-active class when the accordion is opened. What you can do is locate the code where these accordions are added.
To do this, go to Online Store → Themes → Edit code and search for the product.liquid file (or main-product.liquid, depending on the theme, the name might be different). Inside, you need to locate the block of code that renders the accordions and remove the is-active class from both the title and the description.
Without access to the code I can’t provide more specific instructions, but let me know if this helps.
