How to center Collection section title in Dawn theme?

Solved

How to center Collection section title in Dawn theme?

mbmb98
Tourist
5 0 1

Hi, I am trying to center this collection section title on my Dawn theme Shopify site. 

 

I have tried adding the code:

.collection-list-title{
text-align: center;
}


But I also already have this code in the CSS to center the collection name text underneath the images: 
.card__heading {
text-align: center;
}

The bottom code works for its purpose, but I can't get the first code for the H1 to work. Can someone help?

I am also unsure how to add multiple codes together in the CSS section. Would I just have to add them underneath each other like this?:

.collection-list-title{
text-align: center;
}

.card__heading {
text-align: center;
}

I am a complete newbie to this, so please keep that in mind while explaining, haha. 

Screenshot 2025-06-08 120712.png

Accepted Solution (1)
Nilankar
Shopify Partner
70 9 13

This is an accepted solution.

remove this

.collection-list-title{
text-align: center;
}
.card__heading {
text-align: center;
}

And put 

.title-wrapper-with-link {
  justify-content: center
}
Mark this as accepted if it fixed your problem. Need custom development or technical assistance?
Say hello on WhatsApp | Email : nilankar19@gmail.com
Feeling Generous? Buy Me a Coffee

View solution in original post

Replies 8 (8)

Nilankar
Shopify Partner
70 9 13

Yes, you're doing it right  just stack the CSS blocks one after another like that,
and if .collection-list-title isn't working, try targeting the correct element
or use

.collection-list-title { text-align: center !important; }

 

Mark this as accepted if it fixed your problem. Need custom development or technical assistance?
Say hello on WhatsApp | Email : nilankar19@gmail.com
Feeling Generous? Buy Me a Coffee
mbmb98
Tourist
5 0 1

Thank you for confirming regarding stacking! Even with the "important", it doesn't seem to work. Not sure what to do. 

Nilankar
Shopify Partner
70 9 13

It would be good to provide Store link | if in development then link + password to view page for further debug or theme name ..

Mark this as accepted if it fixed your problem. Need custom development or technical assistance?
Say hello on WhatsApp | Email : nilankar19@gmail.com
Feeling Generous? Buy Me a Coffee
mbmb98
Tourist
5 0 1

Thank you. 

It is "x" and pw is "x"

Nilankar
Shopify Partner
70 9 13

Add this in last line base.css

.title-wrapper-with-link {
  justify-content: center
}

Nilankar_0-1749377174918.png

 


There is setting already may available, Though this method is not recommended. 

Mark this as accepted if it fixed your problem. Need custom development or technical assistance?
Say hello on WhatsApp | Email : nilankar19@gmail.com
Feeling Generous? Buy Me a Coffee
mbmb98
Tourist
5 0 1

Sorry, how? After this?:

.collection-list-title{
text-align: center;
}

.card__heading {
text-align: center;
}

Nilankar
Shopify Partner
70 9 13

This is an accepted solution.

remove this

.collection-list-title{
text-align: center;
}
.card__heading {
text-align: center;
}

And put 

.title-wrapper-with-link {
  justify-content: center
}
Mark this as accepted if it fixed your problem. Need custom development or technical assistance?
Say hello on WhatsApp | Email : nilankar19@gmail.com
Feeling Generous? Buy Me a Coffee
mbmb98
Tourist
5 0 1

This works, although I still had to add the one for the cards. The final solution was:

.card__heading {
text-align: center;
}
.title-wrapper-with-link {
justify-content: center;
}

Thank you for your help, much appreciated!