Change sale price on Palo Alto theme to red

Topic summary

Goal: On the Palo Alto theme’s collection page, keep the “compare-at” (original) price as-is and display the new sale price in red.

Actions taken:

  • Multiple replies asked for the store URL to inspect; the merchant shared holygels.com.
  • A practical fix was provided: add CSS in theme.css targeting the sale price element (e.g., span.product-grid-item__price-new) and set the text color to red, with one suggestion using !important.
  • Another contributor supplied step-by-step instructions (with screenshots) to edit Online Store > Theme > Edit code > theme.css and add color: red, noting a specific line reference in that file.

Outcome:

  • The merchant confirmed the red color change worked.

Latest update / open question:

  • The merchant asked how to also make the sale price bold. No confirmed solution to this follow-up yet.

Notes:

  • “Compare-at price” is the original (often crossed-out) price; “new price” is the sale price.
  • Images/screenshots were central to showing exactly where in theme.css to add the styling.

Status: Issue of changing sale price color is resolved; request to make it bold remains pending.

Summarized with AI on December 26. AI used: gpt-5.

What’s your store url ?