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

Solved
Melody12
Excursionist
16 1 6

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)

Accepted Solutions
diego_ezfy
Shopify Partner
2299 413 539

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

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

Replies 8 (8)
dmwwebartisan
Shopify Partner
9765 2228 3063

@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 | Bag is a cart drawer that maximizes your sales. View app →
Denishamakwana
Pathfinder
100 14 13

Please share your site password

So, I can help you to solve it.

Melody12
Excursionist
16 1 6

Site password: rtyclh

Melody12
Excursionist
16 1 6

Site password is rtyclh

diego_ezfy
Shopify Partner
2299 413 539

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

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

Denishamakwana
Pathfinder
100 14 13

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

.data-price-wrapper  .meta {

        font-weight: bold;

}

Melody12
Excursionist
16 1 6

Thank you, this works!