show discount amount on product page

Topic summary

Goal: Display a site-wide percentage discount on product and collection pages, showing “was £x, now £x” based on the original price, without permanently marking down prices (to avoid discounts stacking on the markdown).

Context: Store uses the IMPACT theme. A sample product uses “compare at” as a visual reference. Minor preference: change the red “save £X” tag to “save 30%”. Screenshots provided to illustrate desired UI.

Proposed approaches:

  • Theme code (Debut example): Add logic in product-price.liquid (Snippets) to show compare_at_price, sale price, and a calculated savings percentage when compare_at_price_max > product.price. Liquid variables used: variant.compare_at_price, variant.price, product.compare_at_price_max. Backup the theme first. Applicability to IMPACT not confirmed; suggestion was to try similar placement.
  • App-based solution: Use “Product Labels and Badges” to create label and price badge campaigns. Utilize variables {Discount_percentage} or {Discount_amount} and the discount range feature to show dynamic savings across product and collection pages.

Status: No confirmed IMPACT-theme solution yet. Next steps: test analogous snippet in IMPACT or implement the app for consistent labels/badges. Key question remains how to implement across collection/product templates without altering base prices.

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

site is https://nomi-home.com/

have added the ‘compare at’ markdown to one product as a reference for what I would like the discount to show up like (as well as applying the discount to the basket total)

minor thing but the ‘save £X’ red tag could also be replaced by ‘save 30%’ instead. not as urgent though

thanks in advance for any insight