I would like to have the product description inside a collapsible row, that’s pre-opened by default. Is there any way to do this via CSS?
Topic summary
A user wants to make their product description collapsible and open by default on their Shopify store, asking if this can be achieved with CSS alone.
Solution Provided:
- CSS alone cannot accomplish this functionality
- Navigate to: Themes → Customize → Product pages → Product Information section
- Add a new Collapsible row block and configure settings
- Save the configuration
Implementation Steps:
- Go to Themes → Edit code
- Locate the
main-product.liquidfile - Search for “collapsib” in the code
- Add the
{{ product.description }}code to the collapsible row position as shown in provided screenshots - Save changes
The response includes three screenshots demonstrating the configuration interface and expected result. The solution comes from BSS Commerce, a Shopify development service provider.
Hi @VIB1
This is BSS Commerce - Full-service eCommerce Agency. We’d love to suggest you this solution:
-
Want to make the product description collapsible can’t just use CSS.
-
Solution:
-
Go to Themes => Customize => Find Product pages => Product Information section select Add Block => Select Collapsible row:
=> Config as desired => Save
-
The next step is to configure the data for the newly created Collapsible row:
-
Themes => edit code => Find the main-product.liquid file => Search collapsible_tab => Add the code {{ product.description }} to the position as shown in the image then press save:
Result
Hope this helps you.
BSS Commerce - Shopify Apps & Development Services Provider - Shopify Expert
Level up your Shopify store with our B2B & B2C apps
1 Like