Make the product price larger and bold on Turbo

Store Design

Topic summary

A user seeks to make product prices larger, bold, and possibly a different color on product pages (not collection pages) using the Turbo theme.

Initial Solution:

  • A PageFly representative provides CSS code to add to the theme’s styles.css file
  • The code targets .span.money elements with font-weight: bold, font-size: 20px, and color: red
  • Users can customize the font size and color values to match their store

Refinement:

  • The user clarifies this solution also affects collection pages
  • A revised CSS selector is provided: .modal_price > .price-ui > .price > .money
  • This more specific selector targets only product page prices

Both solutions involve editing the theme code directly and applying custom CSS styling with the !important flag to ensure the changes take effect.

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

Hi - I am looking for a way to make the price larger and bold (and maybe a different color) on the product pages only (not colleciton pages). We are using the Turbo theme.

Thanks!!

2

Hi @Jennifer_Greenl ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/styles.css->paste below code at the bottom of the file:

span.money {
    font-weight: bold;
    font-size: 20px;
    color: red !important;
}

Note: You can change font-size and color value to match your store.

Hope my answer will help you.

Best regards,

Victor | PageFly

3

Yes, but that changes it on the collection page as well. Is there a solution for just the product page?

4

@Jennifer_Greenl , Yes, you can use this code below:

.modal_price > .price-ui > .price > .money {
    font-weight: bold;
    font-size: 20px;
    color: red!important
}