How to Show a Live Total, Unit Price and Crossed-Out Was Price on a Custom Shopify Product

Illustration of a sheet of custom stickers on a desk beside a paper price tag with a line struck through it

To show a live total or a price per piece on a custom product, add a Price option in Appify Custom Product Options. It shows one amount, in the spot you choose, and it updates as the shopper picks options.

Turn on Show was price and it does one more thing. When a discount applies, the old amount appears crossed out next to the new one, so the shopper can see what they save.

Below is a real setup from the Stickers by Buttons demo, with screenshots of the storefront and of the settings behind it.

Sticker calculator with quantity buttons from 20 to 10000, each showing its price and a discount badge, with 100 stickers selected. Below, Your Total shows 163 crossed out next to 122, and Unit Price shows 1.22 each
Stickers by Buttons demo at 100 stickers. Two Price options sit side by side under the quantity.

What "was price" means

The was price is the price before the discount. It shows with a line through it, beside the price the shopper pays now.

Shops use it on sale tags all the time. Here it updates on its own as the order changes.

On the demo, the discount comes from quantity breaks. Below 100 stickers there is no discount, so there is nothing to cross out:

Your Total 82 and Unit Price 1.63 each, with no crossed-out price
50 stickers: no discount, one clean price.

At 500 stickers the quantity break takes 45 percent off. The total of 815 is crossed out, and 448 is what the shopper pays:

Your Total shows 815 crossed out next to 448, and Unit Price shows 0.90 each
500 stickers: the old total crossed out, the new one beside it.

The crossed-out amount only appears when the two numbers differ. A shopper who gets no discount never sees it.

The settings behind the total

Here is the Price option named Your Total, open in Options & Pricing:

Price option settings for Your Total: Type Price, Display value Total, Alignment Left, Decimal places 0, Show was price ticked, Price label Your Total above the price, and Style rows for Title, Amount and Was price with Strike ticked
The Your Total option in the Stickers by Buttons calculator.
  • Type is Price. The note under it says what this option does: it shows a live amount from your pricing and does not change what the customer pays.
  • Display value is Total, so it shows the final amount.
  • Decimal places is 0, which is why the demo shows 448 and not 448.25.
  • Show was price is ticked. That one box adds the crossed-out amount.
  • Price label is "Your Total", set Above price.
  • Under Style, the Was price row sets the crossed-out amount apart: smaller, grey and with Strike ticked.

The settings behind the unit price

The second Price option, Unit Price, shows the price of one sticker:

Price option settings for Unit Price: Display value Unit Price, Decimal places 2, Show was price not ticked, Price label Unit Price above the price, and Post price label each to the right of the price
The Unit Price option in the same calculator.
  • Display value is Unit Price, with 2 decimal places.
  • Post price label is "each", set Right of price. That gives "0.90 each".
  • Show was price is off here. You can turn it on for the unit price too, and the old price per piece will show crossed out.

Put two amounts side by side

Each option has a Column width under Advanced settings. Both Price options on the demo are set to 50, so they share one row:

Advanced settings for Your Total with Column width set to Percent and 50 selected
Column width 50 on Your Total. Unit Price uses the same.

You can add as many Price options as you like. Each one shows its own amount in its own spot. For more on column widths and rows, see how to lay out a Shopify product options form.

Where the discount comes from

The Price option only shows the amount. The discount itself comes from your pricing. On this demo it is the calculator's quantity discount rules: 25 percent off from 100 stickers, rising step by step to 85 percent off at 10,000.

The badges on the quantity buttons come from the same rules.

So the total, the unit price and the crossed-out amount always match the price summary. To set up breaks like these, read how a quantity discount calculator works.

Pick what the amount shows

The Display value list has ten choices. Four of them can show a was price:

Display value What it shows Can show was price
Total The final amount Yes
Unit Price The price of one piece Yes
After Discounts The amount once savings are taken off Yes
Total with add-ons The product plus its linked add-on products Yes
Subtotal The price before savings No
Quantity How many pieces No
Quantity Discount What the quantity break saves No
Discounts Other discounts in the calculator No
Fixed Fees Setup, rush or other one-time fees No
Add-ons The linked add-on products on their own No

A few more things it does

  • Labels in other languages. The price label and post price label can be translated, using the translate button next to each field.
  • Show it only when it matters. A Price option follows Visibility Rules like any other option. For example, show the unit price only once a quantity is picked.
  • The shopper's currency. It uses the same totals as the price summary, including Shopify Markets pricing.

Want a full line-by-line breakdown instead of single amounts? See how to show a live price while customers choose options.

Start with one Price option set to Total, right under your last option. Once you have quantity breaks, tick Show was price so shoppers see the saving.

FAQ

What is a was price?

It is the price before a discount, shown crossed out next to the new price. In Appify Custom Product Options you turn it on with the Show was price box on a Price option.

How do I show the total price on a custom Shopify product?

Add a Price option, set its Display value to Total and place it where you want the total to appear. It updates as the shopper chooses.

Can I show the price per piece?

Yes. Set the Display value to Unit Price and add a Post price label such as "each".

Why don't I see the crossed-out price?

It only shows when a discount applies, so the old and new amounts differ. It also needs a Display value that supports it: Total, Unit Price, After Discounts or Total with add-ons.

Does the Price option change what the customer pays?

No. It only displays an amount. The price still comes from your formulas, pricing tables and discount rules.

Show the price, and the saving, right where shoppers look.

Install Free on Shopify

Whatever you sell, however you price it · The last options app you'll shop for