Shopify themes, liquid, logos, and UX
To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more
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.
Please share your site password
So, I can help you to solve it.
Site password: rtyclh
Site password is 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
Please add below code in bottom of assets/index.css file
.data-price-wrapper .meta {
font-weight: bold;
}
Thank you, this works!
User | RANK |
---|---|
127 | |
95 | |
78 | |
54 | |
46 |
Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022Shipping can be one of the most vital parts to set up and manage your business. Understand...
By Ollie Dec 16, 2022