Re: How to Center Price on Product Page with Custom Theme

Solved

How to Center Price on Product Page with Custom Theme

Brad38
New Member
8 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
6006 1629 1943

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 Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Replies 9 (9)

Moeed
Shopify Partner
6006 1629 1943

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 Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


Brad38
New Member
8 0 0

rsabventures.net

pass=deenti

Moeed
Shopify Partner
6006 1629 1943

Are you sure this is the correct URL?

Moeed_0-1709880422352.png

 

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


Brad38
New Member
8 0 0
Moeed
Shopify Partner
6006 1629 1943

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 Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


Brad38
New Member
8 0 0

That worked great.

 

Thank You

Moeed
Shopify Partner
6006 1629 1943

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 Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


niraj_patel
Shopify Partner
2378 514 506

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.

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
10150 2017 2081

hi @Brad38 

You can try to use this code and check again 

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

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.