there is a crossed out price and the original price
Topic summary
A user wants to display percentage discounts on product pages using the Prestige theme. The store currently shows crossed-out original prices alongside sale prices but lacks visible discount percentages.
Proposed Solution:
Add CSS code to the theme.css file to make the compare-at price visible:
.product-card compare-at-price {
display: block;
}
Additional Customization:
The user also requested red coloring for the discount price. One responder asked for clarification about which element should be red (the crossed-out price or the sale price).
Alternative Approach:
A third-party app (Klip Coupons) was suggested as a no-code alternative for displaying discounts as clippable coupons on product, collection, and cart pages—particularly useful for automatic discounts or when not using compare-at pricing.
Status: The discussion appears ongoing, with the CSS solution provided but color customization details still being clarified.
Hi @Ryusei_1 ,
Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:
.product-card compare-at-price {
display: block;
}
{%- comment -%}
----------------------------------------------------------------------------------------------------------------------
PRODUCT PRICE
----------------------------------------------------------------------------------------------------------------------
Render a list of price for a product, variant or line item.
********************************************
Supported variables
********************************************
* product: if provided, the prices are rendered for the whole product
* variant: if provided, then only the price from this variant is rendered
* line_item: if provided, then the price from this line item are rendered (used on cart or order)
* hide_unit_price: if set to true unit prices are hidden (mostly useful for size constrained elements)
* context: can be "product", "line_item" or "card". This controls how the prices are displayed (using the correct sizes)
{%- endcomment -%}
{%- liquid
case context
when 'card' or 'line_item'
assign base_text_class = ''
if settings.product_card_text_font == 'heading'
assign base_text_class = 'h6 '
endif
assign regular_price_classes = base_text_class | append: 'text-subdued'
assign on_sale_price_classes = base_text_class | append: 'text-on-sale'
assign compare_at_price_classes = base_text_class | append: 'text-subdued line-through'
assign unit_price_classes = base_text_class | append: 'text-subdued'
when 'product'
assign regular_price_classes = base_text_class | append: 'h4 text-subdued'
assign on_sale_price_classes = base_text_class | append: 'h4 text-on-sale'
assign compare_at_price_classes = base_text_class | append: 'h5 text-subdued line-through'
assign unit_price_classes = base_text_class | append: 'h6 text-subdued'
endcase
-%}
Hi @Ryusei_1 ,
Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:
.product-card compare-at-price {
display: block;
}
price after crossing out
Hi @Ryusei_1 ,
My previous tutorial code got it to show up, is that resolved?
Hi @Ryusei_1 , you can definitely use the CSS method shared above to make the compare-at price visible—just head to Actions > Edit code > Assets > theme.css and paste in:
.product-card compare-at-price {
display: block;
}
That will help show the percentage discount if you’re using compare-at pricing.
If you’re looking for a no-code alternative—especially if you’re using automatic discounts or want more control over when and where the discount is shown—you could also try Klip Coupons: Sales and Discounts. It lets you display the discount as a clippable coupon right on product, collection, and cart pages, with no need to edit your theme files. Helpful if you’re not using compare-at prices or just want a more flexible way to show offers across your store.
