Solved

how to center collection title on dawn theme shopify

alamiii
Excursionist
23 0 0

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!collection.png

 
 
Accepted Solution (1)
SwiftPro-Danny
Shopify Partner
14 2 8

This is an accepted solution.

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

Replies 18 (18)

SwiftPro-Danny
Shopify Partner
14 2 8

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
Excursionist
23 0 0

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

SwiftPro-Danny
Shopify Partner
14 2 8

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
Excursionist
23 0 0

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

password is : uhofaw

SwiftPro-Danny
Shopify Partner
14 2 8

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

SwiftProduction_0-1703642225756.png

 

 

If my solution was helpful please Like & Mark as Accepted Solution - It helps us!
Swift Productions - Australia's Leading Shopify eCommerce Web Developer.
alamiii
Excursionist
23 0 0
.title__title {
text-align: center !important;
}

Is this the code I should write? 

SwiftPro-Danny
Shopify Partner
14 2 8

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
Excursionist
23 0 0

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

SwiftPro-Danny
Shopify Partner
14 2 8

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
Excursionist
23 0 0

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

SwiftPro-Danny
Shopify Partner
14 2 8

This is an accepted solution.

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
Excursionist
23 0 0

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
Shopify Partner
14 2 8

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.

PageFly-Richard
Shopify Partner
4050 903 1556

 

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!


PageFly - #1 Page Builder for Shopify merchants.


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

alamiii
Excursionist
23 0 0

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

PageFly-Richard
Shopify Partner
4050 903 1556

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!


PageFly - #1 Page Builder for Shopify merchants.


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

alamiii
Excursionist
23 0 0

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

PageFly-Richard
Shopify Partner
4050 903 1556

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!


PageFly - #1 Page Builder for Shopify merchants.


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