Shopify themes, liquid, logos, and UX
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;}
Solved! Go to the solution
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:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
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
rsabventures.net
pass=deenti
Are you sure this is the correct URL?
pass=deenti
this will take you to one of the products.
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:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
That worked great.
Thank You
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.
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.
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.
In today’s interview, we sat down with @BSS-TekLabs to discuss practical strategies for...
By JasonH Nov 13, 2024The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024