Solved

How to Center Price on Product Page with Custom Theme

Brad38
New Member
4 0 0

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

 

 

Accepted Solution (1)
Moeed
Shopify Partner
3793 958 1189

This is an 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:

Moeed_0-1709881098725.png

 

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

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

Replies 9 (9)

Moeed
Shopify Partner
3793 958 1189

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

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Brad38
New Member
4 0 0

rsabventures.net

pass=deenti

Moeed
Shopify Partner
3793 958 1189

Are you sure this is the correct URL?

Moeed_0-1709880422352.png

 

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Brad38
New Member
4 0 0
Moeed
Shopify Partner
3793 958 1189

This is an 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:

Moeed_0-1709881098725.png

 

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

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Brad38
New Member
4 0 0

That worked great.

 

Thank You

Moeed
Shopify Partner
3793 958 1189

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.

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

techlyser_web
Shopify Partner
1483 274 293

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.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

Dan-From-Ryviu
Shopify Partner
7711 1498 1504

hi @Brad38 

You can try to use this code and check again 

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

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now