How to center the titles on my home page?

Store Design
,

Topic summary

A user seeks help centering section titles on their Shopify store homepage (SmartHomeOneStopShop.com).

Solutions Proposed:

Multiple respondents offered CSS-based approaches:

  • Custom CSS via Theme Customizer: Navigate to Admin dashboard ā†’ Themes ā†’ Customize ā†’ Select the section ā†’ Add custom CSS targeting .title-wrapper with text-align: center and justify-content: center

  • Theme Code Editor Method: Access Online Store ā†’ Theme ā†’ Edit code, then either:

    • Insert CSS before </body> in the theme.liquid file
    • Add CSS to Assets ā†’ base.css at the bottom

Technical Details:

All solutions target the .title-wrapper class (and variations like .title-wrapper-with-link) using text-align: center and justify-content: center properties.

Status: The discussion remains open with no confirmation from the original poster about which solution worked. Note: Some code snippets in the thread appear corrupted or improperly formatted.

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

How to center the titles of different sections from the templates on the main page?

www.SmartHomeOneStopShop.com

Screenshot 2023-04-15 at 00-06-04 SmartHome - One Stop Shop.png
Screenshot 2023-04-15 at 00-06-04 SmartHome - One Stop Shop.png1955Ɨ536 59.3 KB

2

Hello @Nozuu ,

To center your section headings follow:

  • Admin dashboard > Themes > Customize > Click on the Section > Custom CSS
  • Into the Custom CSS field of collection section, copy:
.title-wrapper-with-link {
  justify-content: center;
  text-align: center;
}

I hope it helps and good luck! Feel free to reach out if you need any further assistance.
Best regards,
Eray Barslan | Shopify Developer & Designer

1 Like
3

Hi @Nozuu ,

This is Victor from PageFly - Landing page builder, Iā€™d like to suggest this idea for solution:

Step 1. Go to Online Store ā†’ Theme ā†’ Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before :

Hope my answer will help you.

Best regards,

Victor | PageFly

1 Like
4

Hello @Nozuu

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.title-wrapper-with-link.title-wrapper--self-padded-mobile.title-wrapper--no-top-margin {
    justify-content: center;
}
1 Like