Show discounts

Highlight your discounts by showing both the original and sale prices. Accordero makes it easy to display strikethrough pricing with automatic currency conversion for both amounts.

How it works

Use data-pf-secondary-price to mark the original price. Accordero will:

1. Convert both the original and sale prices to the visitor's currency
2. Display the original price with a strikethrough
3. Show the discounted price prominently

Basic discount example

<Card data-pf-base-price="79" data-pf-base-currency="usd" className="max-w-sm">
  <CardHeader>
    <div className="bg-red-100 text-red-800 text-xs font-semibold px-2 py-1 rounded w-fit mb-2">
      SAVE 20%
    </div>
    <CardTitle>Summer Sale</CardTitle>
  </CardHeader>
  <CardContent>
    <div className="flex items-center gap-3">
      <span
        data-pf-secondary-price="99"
        className="text-xl text-muted-foreground line-through"
      >
        $99
      </span>
      <span data-pf-price-formatted className="text-3xl font-bold text-primary">
        $79
      </span>
    </div>
  </CardContent>
</Card>

Live example:

Data attributes reference

Important: Element placement

The data-pf-secondary-price element should be inside the same container as data-pf-base-price:

<!-- ✅ Correct -->
<Card data-pf-base-price="79" data-pf-base-currency="usd">
  <span data-pf-secondary-price="99">$99</span>
  <span data-pf-price-formatted>$79</span>
</Card>

<!-- ❌ Incorrect - secondary price outside container -->
<span data-pf-secondary-price="99">$99</span>
<Card data-pf-base-price="79" data-pf-base-currency="usd">
  <span data-pf-price-formatted>$79</span>
</Card>

Next steps