Shopify themes, liquid, logos, and UX
Hi, I don't know if this applies to all Shopify themes, but the price on the product page is too thin for people with bad eyes to read.
This is for Context theme, and I have tried the following codes but didn't work when I applied it to the theme code:
.data-price-wrapper p{
font-weight: 600;
}
and
.data-product-price p{
font-weight: 600;
}
and
.data-product-price span{
font-weight: 700 !important;
}
Thank you
Solved! Go to the solution
This is an accepted solution.
@Melody12,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:
<style>
.product__heading > [data-price-wrapper] *{
color: #000000 !important;
font-weight: bold !important;
font-size: 20px !important;
}
@media (max-width: 749px){
.product__heading > [data-price-wrapper] *{
font-size: 15px !important;
}
}
</style>
You can change the values as per your wish:
#000000 = color, use any hex color you wish
20px = font size on desktop
15px = font size on mobile
Kind regards,
Diego
Please share your store URL.
Site password: rtyclh
This is an accepted solution.
@Melody12,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:
<style>
.product__heading > [data-price-wrapper] *{
color: #000000 !important;
font-weight: bold !important;
font-size: 20px !important;
}
@media (max-width: 749px){
.product__heading > [data-price-wrapper] *{
font-size: 15px !important;
}
}
</style>
You can change the values as per your wish:
#000000 = color, use any hex color you wish
20px = font size on desktop
15px = font size on mobile
Kind regards,
Diego
Thank you, this works!
Hi, please does this solution works for Expanse theme? If not could you please provide me one. Thanks 😊
Please share your site password
So, I can help you to solve it.
Site password is rtyclh
Please add below code in bottom of assets/index.css file
.data-price-wrapper .meta {
font-weight: bold;
}
How can you make the price bolder on mobile?
The 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, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024