Centre collection description and headings

Store Design
, , ,

Topic summary

A user updated their Dawn theme and noticed collection descriptions and headings shifted to the left instead of remaining centered. Multiple solutions were provided involving CSS modifications:

Primary Solution Approach:

  • Add custom CSS code to center the collection hero elements
  • Target .collection-hero__text-wrapper with text-align: center !important
  • Adjust .collection-hero__description.rte margins to auto for horizontal centering

Implementation Methods Suggested:

  1. Add CSS to theme.liquid file before the </head> tag
  2. Insert code at the bottom of assets/base.css file (most commonly recommended)
  3. Modify component-collection.css depending on Dawn version

Key Technical Details:

  • Uses !important flags to override existing theme styles
  • Applies both text alignment and margin adjustments for proper centering
  • Multiple responders provided nearly identical CSS solutions with visual proof of results

The issue appears solvable through straightforward CSS customization, with several contributors confirming the approach works.

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

I’ve recently updated my theme (dawn) and the collection descriptions and headings have gone to the left, please can someone help me get them to return to the centre? Thankyou

My website is www.madeonthestreet.co.uk should anyone want to look at what I’m talking about.

2

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the tag

Result:

AnneLuo_0-1739320043311.png
AnneLuo_0-1739320043311.png1226×666 260 KB

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

3

@cgwatts

Please add the following css code to your assets/base.css bottom at the file.

.collection-hero__text-wrapper{
  text-align: center !important;
}
.collection-hero__description.rte {
    margin-right: auto !important;
    margin-left: auto !important;
}

Thanks!

4

Hi Cgwatts

  • You can try to follow this step
    Step 1: Go to Edit code
    Step 2: Find file base.css and add this code at the end of the file
.collection-hero__text-wrapper {
    text-align: center !important;
}

.collection-hero__description.rte {
    margin-left: auto !important;
    margin-right: auto !important;
}

Result:

LizHoang_0-1739332736759.png
LizHoang_0-1739332736759.png794×708 57.3 KB

Best,

Liz

5

Hello @cgwatts ,

Regarding your requirement to center your collection descriptions and headings in the updated Dawn theme, you’ll need to adjust the CSS. In the Assets folder, open the base.css or component-collection.css file (depending on your Dawn theme version) and add the following CSS:

I hope this will help you.