Re: how to center collection title on dawn theme shopify

alamiii · ‎12-26-2023

Hello guys please i need some help i want to center the collection page text on Dawn theme (the header on collection pages) i have tried many things but nothing seems to work for me. Thanks in advance!

SwiftPro-Danny · ‎12-26-2023

I see it now however you place the code within the media breakpoint 1250px.

Basically just re add the missing close bracket BEFORE .title } so it should have 2 } } before it.

@media only screen and (max-width: 1250px) {
.big-ol-cart-notice {
   margin-top: 1%;
   margin-left: -10vw !important;
}
}
.title {
text-align: center !important;
}

Regards

Danny

If my solution was helpful please Like & Mark as Accepted Solution - It helps us!
Swift Productions - Australia's Leading Shopify eCommerce Web Developer.

View solution in original post

SwiftPro-Danny · ‎12-26-2023

Hi Alamiii,

The easiest way to do it is via CSS.

Go to Admin > Online Store > Edit Code (under the 3 ... near the 'customise' button) > search for 'base.css' and then just add this at the very bottom.

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

and then once done give it a minute to update and refresh the page.

Danny
Shopify Partner @Swift Productions

If my solution was helpful please Like & Mark as Accepted Solution - It helps us!
Swift Productions - Australia's Leading Shopify eCommerce Web Developer.

alamiii · ‎12-26-2023

Hi @SwiftPro-Danny thanks for your reply , the code isn't working for me :((

SwiftPro-Danny · ‎12-26-2023

Whats your website URL?

If my solution was helpful please Like & Mark as Accepted Solution - It helps us!
Swift Productions - Australia's Leading Shopify eCommerce Web Developer.

alamiii · ‎12-26-2023

https://6737e0-4.myshopify.com/

password is : uhofaw

SwiftPro-Danny · ‎12-26-2023

Thanks, instead of .collection-here__title use .title and that will do it. See screen shot

If my solution was helpful please Like & Mark as Accepted Solution - It helps us!
Swift Productions - Australia's Leading Shopify eCommerce Web Developer.

alamiii · ‎12-26-2023

.title__title {
text-align: center !important;
}

Is this the code I should write?

SwiftPro-Danny · ‎12-26-2023

No, this is the code.
Sorry, I wrote the wrong one earlier and removed it. You must have seen it before I saved the revised reply.

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

Regards
Danny

If my solution was helpful please Like & Mark as Accepted Solution - It helps us!
Swift Productions - Australia's Leading Shopify eCommerce Web Developer.

alamiii · ‎12-26-2023

i write it in base.ccs but nothing is change :(((

SwiftPro-Danny · ‎12-26-2023

It looks like you didn't save it. I've just checked your code and can not find the changes. Are you sure you saved it?

https://6737e0-4.myshopify.com/cdn/shop/t/17/assets/base.css? here is your CSS file, if you go to the very bottom you can see the changes you did is not visible so either you didn't save it or your editing the wrong theme, possibly a backup ??

Regards

Danny

If my solution was helpful please Like & Mark as Accepted Solution - It helps us!
Swift Productions - Australia's Leading Shopify eCommerce Web Developer.

alamiii · ‎12-26-2023

Danny Can you please check again because I see it saved in base.css

SwiftPro-Danny · ‎12-26-2023

I see it now however you place the code within the media breakpoint 1250px.

Basically just re add the missing close bracket BEFORE .title } so it should have 2 } } before it.

@media only screen and (max-width: 1250px) {
.big-ol-cart-notice {
   margin-top: 1%;
   margin-left: -10vw !important;
}
}
.title {
text-align: center !important;
}

Regards

Danny

If my solution was helpful please Like & Mark as Accepted Solution - It helps us!
Swift Productions - Australia's Leading Shopify eCommerce Web Developer.

alamiii · ‎12-26-2023

Thank you so much, Danny, for your invaluable assistance! Your help has made a significant difference, and I truly appreciate it. Grateful and happy

SwiftPro-Danny · ‎12-26-2023

You're welcome, I can see it now centered 🙂 nice work

Regards

Danny

If my solution was helpful please Like & Mark as Accepted Solution - It helps us!
Swift Productions - Australia's Leading Shopify eCommerce Web Developer.

syedfaaz58 · ‎05-06-2024

Hey Brother... why does this code not working for impact theme.
can anyone help me with the code for impact theme ?

PageFly-Richard · ‎12-26-2023

Hi @alamiii

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.collection-hero__title {
text-align: center;
}
</style>

Hope this can help you solve the issue

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!

➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)

All features are available from Free plan. Live Chat Support is available 24/7.

alamiii · ‎12-26-2023

Hi @PageFly-Richard thanks for your reply but Also this code isn't working for me :((

PageFly-Richard · ‎12-26-2023

Hi @alamiii Please try again with this code

<style>
.collection-list-wrapper .title-wrapper-with-link{
    justify-content: center;
}
</style>

Please let me know if it works by giving it a Like or marking it as a solution!

➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)

All features are available from Free plan. Live Chat Support is available 24/7.

alamiii · ‎12-26-2023

Where can I write this code? Is it before the <head> or <body>?"

PageFly-Richard · ‎12-26-2023

its the before the </head> with the same instructions as above

<style>
.collection-list-wrapper .title-wrapper-with-link {
    text-align: center;
    justify-content: center;
}
</style>

Its working perfectly here @alamiii

Please let me know if it works by giving it a Like or marking it as a solution!

➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)

All features are available from Free plan. Live Chat Support is available 24/7.

SergioAvila3k · ‎03-05-2024

I wish this message had appeared at the very beginning so that I wouldn't have continued trial and error. Thank you very much, this code did work for me.

Re: how to center collection title on dawn theme shopify

how to center collection title on dawn theme shopify

Community Blog Articles