How do I change my pricing typography and coloring?

Store Design

Topic summary

Goal: adjust product pricing appearance (font size for price; color for compare-at/original price) in a Shopify Motion theme.

Key guidance provided:

  • Use browser Developer Tools (Ctrl+Shift+I/C) to inspect elements and identify the relevant CSS classes for price elements.
  • Edit the theme stylesheet: Online Store → Theme → Edit code → Assets → theme.css.
  • Apply CSS overrides: target the compare-at price selector (e.g., .product__price–compare) to set a new color, and the sale/current price selector (e.g., .sale-price or product_price.sale-price) to set a new font-size. Using !important was suggested to ensure the changes take effect.

Clarifications:

  • “Compare-at price” refers to the original/strikethrough price shown alongside a discounted (sale) price.

Status and open items:

  • Concrete steps and selectors were provided, offering an actionable solution; no confirmation of implementation success yet.
  • A follow-up question asked how to change the font style (typeface) for prices; no answer was posted for this yet, so the thread remains partially unresolved.
Summarized with AI on January 5. AI used: gpt-5.
3

Hi @blcksoap ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
.product__price--compare {
    color: gray !important; /* change gray as you like */
}
.sale-price {
    font-size: 16px !important; /* change 16 as you like */
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

1 Like