How do I center the product name using the Refresh Theme?

[HenryA]

Hello, I am wondering how to center the product name on my product page (Refresh Theme). Thank you in advance for your help. 

[Moeed]

Hey @HenryA 

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,
Moeed

[HenryA]

Thanks for getting back to me. My URL: 88269d-2.myshopify.com

[Moeed]

Hey @HenryA 

Your store is password protected, please share the password as well.

Best Regards,

Moeed

[HenryA]

Password is shopifyabc

[Moeed]

Hey @HenryA 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.product__title {
    text-align-last: center !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[ZestardTech]

Hello There,
Please share your store URL and Password.
So that I will check and let you know the exact solution here.

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the Bottom of the file:

.product__title h1 {
    text-align: center;
}
.product-form__buttons {
    text-align: center;
    margin: 0 auto;
}

[HenryA]

Thank you! Just one more tweak - could you help me reduce the space between the price and the color variations? 

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the Bottom of the file:

product-form.product-form {
margin: 0!important;
}
.product__info-container>*+* {
margin: 0!important;
}

[HenryA]

Thank you! This is exactly what I was looking for. 

[oscprofessional]

Hello @HenryA 

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.product__info-wrapper.grid__item.scroll-trigger.animate--slide-in {
    text-align: center !important;
}