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

Store Design
,
1

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

1 Like
2

Hey @HenryA

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

Best Regards,
Moeed

3

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

4

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

5

Hey @HenryA

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

Best Regards,

Moeed

6

Password is shopifyabc

7

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 tag

RESULT:

Moeed_0-1699340075868.png
Moeed_0-1699340075868.png944×607 22 KB

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

Best Regards,
Moeed

8

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;
}

ZestardTech_0-1699340193675.png
ZestardTech_0-1699340193675.png1161×805 73.3 KB

9

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

1 Like
10

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;
}

ZestardTech_0-1699341000718.png
ZestardTech_0-1699341000718.png1139×662 139 KB

11

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;
}
12

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