How to add space in the Collapsible Content section

Store Design
, , , , , , , , , , ,

Topic summary

A user wanted to add vertical spacing between questions and answers in their Shopify store’s collapsible content section (FAQ accordion), for both desktop and mobile views. They provided screenshots showing the current tight spacing versus the desired increased spacing from a reference store.

Two CSS solutions were offered:

  1. Quick fix approach: Add CSS to base.css/style.css/theme.css:
.collapsible-row-layout .accordion .accordion__content {
    padding-top: 20px !important;
}
  1. Cleaner approach: Modify the existing component-accordion.css file by adding margin-top: 15px; to the .accordion__content selector (adjustable to preference).

Both solutions target the accordion content padding/margin to create the desired spacing effect. The issue was resolved - the original poster confirmed the solution worked.

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

Hey guys, I want to add space in the collapsible content section.

This is how it looks on my store:

CreatorTim_0-1736801911919.png
CreatorTim_0-1736801911919.png934×536 18.8 KB

And this is how I want it to look:

CreatorTim_1-1736801924528.png
CreatorTim_1-1736801924528.png901×598 33.8 KB

So I want to add more space between the questions and the answers, like in the second picture.

Here’s my store: https://1049xn-ya.myshopify.com/products/editing-masterclass
(Just scroll all the way down to see the collapsible content section.)

And here’s the link to the store where I like the design: https://tomnoske.store/products/cinema-luts
(Just scroll all the way down to see the collapsible content section.)

I WANT THIS CHANGE FOR BOTH DESKTOP AND MOBILE.

Thanks a lot,
Tim

1 Like
2

Hi @CreatorTim

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.collapsible-row-layout .accordion .accordion__content {
    padding-top: 20px !important;
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like
3

Hi. This approach will update the existing code for these collapsible components:

  1. From the Shopify Admin home page, select “Online Store” > “Themes”.
  2. Then find your currently published theme (the one at the top of the page with the label “current theme”).
  3. Click the “…” button (adjacent to the “Customize” button), then “Edit code”.
  4. In the filter search, type “component-accordion.css”. It will be under the “assets” folder.
  5. Within that file, search for “accordion__content”.
  6. That should give you this section of code:
.accordion__content {
  margin-bottom: 1.5rem;
  word-break: break-word;
  overflow-x: auto;
  padding: 0 0.6rem;
}
  • Add a line to generate this (update “15px” to whatever number you like):
.accordion__content {
  margin-bottom: 1.5rem;
  word-break: break-word;
  overflow-x: auto;
  padding: 0 0.6rem;
  margin-top: 15px;
}
  • Click “Save”.

If you need assistance with any of this, feel free to respond to this post.

1 Like
4

Thank you! Works