Product Box Designer: Block — Price
Block — Price
Price shows what the product costs. The block handles regular price, offer price, and the struck-through old price — each with its own styling — and also takes into account customer club price and bulk price.
What the block does
The block displays the correct price based on the product's status. If the product is on offer, the offer price is displayed along with the struck-through regular price. If it is not on offer, only the regular price is displayed. Customer club prices and bulk prices are handled automatically when those features are in use.
Because the three price types can appear together on an offer product, each of them has its own color and font settings.
Settings
The settings are divided into four groups.
Group | Settings |
|---|---|
Regular price | Background color, text color, and font options for the regular price. |
Special price | Background color, text color, and font options for the offer price. |
Old price | Background color, text color, and font options for the struck-through regular price. Red text by default. |
General | Alignment, column width, inner/outer spacing, and the option Add space between prices |
With Add space between prices, the offer price and the old price are pushed apart to opposite ends of the block, instead of standing close together.
How to use it
- Give the offer price a distinctive color (for example, red or the store's accent color), and keep the regular price neutral. This way, the customer quickly sees that something is on sale.
- Let the old price remain struck through in a subdued color, so it reads as an «before»-price without drawing attention.
- Choose the same alignment for price and title for a tidy card — both left-aligned, or both center-aligned.
Tips
- You don't need to do anything special for offers to be displayed. When a product receives a campaign price, the block automatically switches to offer display.
- Loyalty club price and bundle price are controlled by the loyalty club and bundle functions themselves. The price block displays them correctly, but the prices are not set here.