How to Center Price on Product Page with Custom Theme

[Brad38]

I need help centering the price on the product page.

I found the correct line in the style.css that formats the price field. But I am unable the add the correct code to center it.

The current line is:

.product-single__meta .price-item.price-item--regular{font-weight:normal;font-size:30px;line-height:30px;color:#ff0303;}

[Moeed]

Hey @Brad38 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[Brad38]

rsabventures.net

pass=deenti

[Moeed]

Are you sure this is the correct URL?

[Brad38]

https://rsabventures.com/collections/new-items/products/lot-of-2-wilson-305-610-stainless-steel-heav...

pass=deenti

this will take you to one of the products.

[Moeed · Accepted solution]

Hey @Brad38 

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

{% if template contains 'product' %}
<style>
.prd-info p {
    text-align-last: center !important;
}
dl.price.price--sold-out {
    place-items: center !important;
}
.price__regular {
    margin: 0 !important;
}
.price dd {
    margin: 0 !important;
}
</style>
{% endif %}

RESULT:

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

Best Regards,
Moeed

[Brad38]

That worked great.

Thank You

[Moeed]

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

[niraj_patel]

Hello @Brad38 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .price {
     text-align: center !important;
  }
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Dan-From-Ryviu]

hi @Brad38 

You can try to use this code and check again 

.product-single__meta {
text-align: center;
}