Increase the width of accordion

Technical Q&A
, ,

Topic summary

A user seeks to increase the width of an accordion section on a Shopify product page, providing a screenshot and preview link showing the current narrow layout.

Three solutions were provided, all targeting the same CSS class:

  • Solution 1: Add inline CSS in theme.liquid before the </body> tag, targeting .collapsible-content__wrapper .collapsible-content-wrapper-narrow with max-width: 100%

  • Solution 2: Add CSS to main.css (or base.css/style.css), targeting .collapsible-content-wrapper-narrow with max-width: 80%, including a visual result screenshot

  • Solution 3: Similar approach using theme.liquid, though specific code snippet appears incomplete in the thread

All solutions use !important to override existing styles and suggest the width percentage can be adjusted as needed.

Status: One commenter confirmed the solution worked for them, indicating the issue is resolved.

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

Hello,
I want to increase the width of this section.

In product page

Sohan2198_0-1719424832201.png
Sohan2198_0-1719424832201.png1465×475 71.8 KB

https://s7092cjts4kj02bd-58506346583.shopifypreview.com

please check,

Best,
Sohan

2 Likes
2

Hello @Sohan2198

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.collapsible-content__wrapper .collapsible-content-wrapper-narrow{ max-width: 100% !important; /*adjust according to you*/ }

techlyser_web_0-1719425297275.png
techlyser_web_0-1719425297275.png1348×162 2.04 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

1 Like
3

Hi @Sohan2198

Check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
.collapsible-content-wrapper-narrow {
    max-width: 80% !important;
}
2 Likes
4

This is Noah from PageFly - Shopify Page Builder App

Hi @Sohan2198 please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

1 Like
5

It worked for me. Thank you!