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

Store Design

Topic summary

A user seeks to make product page prices more readable in the Context theme by increasing font weight, as the default styling appears too thin. Several CSS solutions were attempted unsuccessfully.

Working Solution:

  • Add custom CSS to assets/index.css:
    .data-price-wrapper.meta {
  font-weight: bold;
}
  • Alternative approach involves adding styled code before the </body> tag in theme.liquid, allowing customization of font size (15px mobile, 20px desktop) and color

Key Details:

  • The issue affects readability for users with vision difficulties
  • Initial attempts targeting .data-product-price span and .data-product-price p with font-weight: 600 or font-weight: 700 !important did not work
  • Solution confirmed working by original poster

Related Questions:

  • One user asks if the solution applies to the Expanse theme
  • Another inquires about making prices bolder specifically on mobile devices

Both follow-up questions remain unanswered.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

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
Screen Shot 2021-09-22 at 7.37.50 PM.png616×536 22.8 KB

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

1 Like
2

@Melody12

Please share your store URL.

3

https://www.mxt2510.com/products/cropped-sweatshirt

4

Please share your site password

So, I can help you to solve it.

5

Site password: rtyclh

6

Site password is rtyclh

7

@Melody12 ,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. In your theme.liquid file, find the (press CTRL + F or command + F on Mac)
  3. paste this code right above the tag:

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

1 Like
8

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

.data-price-wrapper .meta {

font-weight: bold;

}

9

Thank you, this works!

10

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

11

How can you make the price bolder on mobile?