Solved

[Context Theme] How to make the price on product page bold?

Melody12
Excursionist
16 1 5

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.

Screen Shot 2021-09-22 at 7.37.50 PM.png

 

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

Accepted Solution (1)
diego_ezfy
Shopify Partner
2958 568 890

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

◦ Follow my blog & youtube for coding tutorials.
◦ Replace apps with copy/paste code snippets and save money.

View solution in original post

Replies 10 (10)

dmwwebartisan
Shopify Partner
12289 2547 3698

@Melody12 

Please share your store URL.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Melody12
Excursionist
16 1 5
Melody12
Excursionist
16 1 5

Site password: rtyclh

diego_ezfy
Shopify Partner
2958 568 890

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

◦ Follow my blog & youtube for coding tutorials.
◦ Replace apps with copy/paste code snippets and save money.
Melody12
Excursionist
16 1 5

Thank you, this works!

Eze_Paul
Excursionist
37 0 8

Hi, please does this solution works for Expanse theme? If not could you please provide me one. Thanks 😊 

Denishamakwana
Shopify Partner
1408 173 231

Please share your site password

So, I can help you to solve it.

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on denishabhensdadiya@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme
Melody12
Excursionist
16 1 5

Site password is rtyclh

Denishamakwana
Shopify Partner
1408 173 231

Please add below code in bottom of assets/index.css file

.data-price-wrapper  .meta {

        font-weight: bold;

}

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on denishabhensdadiya@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme

DRPGT
Visitor
1 0 0

How can you make the price bolder on mobile?