Product: Price
Price
The Price block shows the current price of the product on the product page. It handles regular prices, sale prices, group prices, the strikethrough old price, a discount percentage tag, and an optional "you save" savings banner.
This is one of the most setting-rich blocks. The good news: you only need to touch the few that affect what's visible to your customer.
What it shows
The product price, with separate styling for the regular price and the discounted price when a product is on sale. If the product has a special price set, you get the original price crossed out next to the new price. Optional extras include a percentage-off tag and a banner showing how much the customer saves.
Core price styling
Setting | What it controls |
|---|---|
Current price size | Font size of the main price |
Old price size | Font size of the crossed-out original price |
Regular price color | Color of the regular price |
Discount price color | Color when the product is on sale |
Regular price font weight | Boldness of a non-sale price |
Discount price font weight | Boldness of a sale price |
Text before regular price | Optional prefix (e.g. "From") |
Text before group price | Optional prefix shown to logged-in club members on group prices |
Show retail price by default | Whether to display the original retail price by default |
Show VAT | Display VAT included / excluded |
Margin | Space around the block |
Discount percentage tag
A small lozenge that shows the percentage off when a product is on sale.
Setting | What it controls |
|---|---|
Show discount tag | Turn the percentage tag on or off |
Discount percentage prefix | Optional text before the number (e.g. "Save", "-") |
Discount percentage background | Fill of the tag |
Discount percentage text color | The number inside the tag |
Discount percentage font size | Size of the number |
Discount percentage font weight | How bold the number is |
Discount border color | Color of the tag border |
Discount border width | Thickness of the border |
Corner radius | Rounds the tag's corners |
Use global radius | Use your theme's global corner rounding instead |
Savings banner
A bigger banner that calls out the savings amount.
Setting | What it controls |
|---|---|
Show savings banner | Turn the banner on or off |
Saving font size | Size of the banner text |
Saving font weight | How bold the text is |
Saving text color | Color of the text |
Saving background | Fill of the banner |
Saving radius | Rounds the banner's corners |
Saving alignment | Aligns the text left, center, or right |
Show discount percentage
Show discount percentage — a separate toggle that controls whether the percentage is displayed at all (independent of the tag styling above).
Tips
- The two most impactful settings are Show discount tag and Show savings banner — they're what make a sale feel urgent. Turn at least one of them on for any store running discounts.
- Use Text before regular price ("From") on products with variants where the displayed price might not be the only available price.
- Don't enable both the tag and banner with loud colors. Pick one to be the visual hero.