Center align section titles for Dawn theme 7.0.1

Store Design

Topic summary

A user seeks help center-aligning section headings in Shopify’s Dawn theme 7.0.1, which defaults to left alignment without a built-in option.

Initial Solution:

  • Add CSS code to base.css file targeting .title, .title-wrapper-with-link with text-align: center
  • This successfully centers the featured collection heading and other section titles

Follow-up Issue:

  • User also wants to center the collection description text below images, currently left-aligned
  • Multiple CSS solutions provided targeting .collection__title .title-wrapper > .title and .collection-list .card__information

Resolution:

  • After some troubleshooting and sharing the store URL for verification, the provided CSS code successfully centers the collection descriptions
  • Issue marked as resolved
Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

Hello could someone help me align the ‘featured collection’ heading as well as all the other sections headings to the center as in dawn theme 7.0 it comes already aligned to the left and there’s no option or tutorial to change it to the center.

2

Go to Online store > Themes > Edit code > Assets > open base.css file and add this code at the bottom, click Save button

.title, .title-wrapper-with-link { text-align: center; }
3

Thanks! That worked. Can you help with another questions? I would like to center the collection description that is located under the image. Currently it’s aligned left and is too far left. See pic

Screenshot 2022-12-21 6.24.13 PM.png
Screenshot 2022-12-21 6.24.13 PM.png1920×1080 269 KB

4

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Add this CSS at the bottom

Online Store ->Theme ->Edit code

Assets ->base.css

.collection__title .title-wrapper >.title {
    text-align: center !important;
}

Hope you find my answer helpful!

Best regards,

Victor | PageFly

5

Hi, you can add this code to do that

.collection-list .card__information { text-align: center }
6

I added this code, but no change. Any other ideas?

7

Could you send me your store URL?

8

Could you send me your store URL for checking?

9

That worked. Thanks!

1 Like