How to center heading on each collapsible row (CRAVE THEME)

Store Design
, , ,

Topic summary

A user is attempting to center headings on collapsible rows in the Shopify Crave theme but reports that standard CSS solutions aren’t working.

Solutions Proposed:

  • Add CSS targeting .collapsible__header and .collapsible__title with text-align: center !important; to the theme’s base.css file
  • Alternative code targeting .accordion .summary__title with justify-content: center !important;
  • Another option using .accordion__title with text-align: center

Current Status:

  • The user tested the accordion/summary__title solution but confirmed it didn’t work
  • A developer has requested the specific page link to inspect the actual element classes, as the Crave theme may use unique class names that differ from standard conventions
  • The issue remains unresolved, with troubleshooting continuing to identify the correct CSS selectors through browser inspection
Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
1

I need help with Centring the headings on collapsible role with the crave theme. I’ve tried most of that codes but nothing seems to be working with the crave theme.

1 Like
2

hi CreamBase

how are you

in Crave theme, collapsible sections often have unique classes, so generic CSS may not work. you can try this code

  1. Go to Online Store → Themes → Edit code → Assets → base.css (or your theme’s main CSS file).

  2. Add this at the bottom:

/* Center headings in collapsible sections */
.collapsible__header,
.collapsible__title {
  text-align: center !important;
  display: block !important;
  width: 100%;
}
  1. Save and refresh your storefront.

  • .collapsible__header and .collapsible__title are commonly used in Crave for collapsible headings.

  • If this still doesn’t work, inspect your collapsible element in the browser (Right-click → Inspect) and check the exact class name — replace it in the CSS above.

    Hope this helps!

    If you ever need help with Shopify theme customization or store setup, I provide professional and friendly services at affordable rates. I’m here to help merchants like you while earning a livelihood. :smiling_face_with_three_hearts:

    – Hammad | Shopify Developer

    Shopify Developer

3

Hello @CreamBase,

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

This is the most common and likely solution to work for your theme.

.accordion .summary__title {
  justify-content: center !important;
}

If the first solution doesn’t work, you can try this alternative code.

.accordion__title {
  text-align: center;
}

If my code worked for you, please mark my comment as solution.
Thanks!

4

I’ve tried and still not working and more suggestions?

6

@CreamBase can you please share your page link where you want it in the center?

7

Hi @CreamBase

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

8

Need page URL here for further check, or I cannot locate the related code to give you the answer directly.