Storefront blocks
Add the volume pricing table, spend tiers progress and promotion banner to your theme, and keep them in sync.
diex includes theme blocks that show your discounts where customers decide. You add them in the theme editor, without editing code.
Add the blocks
- In Shopify, go to Online Store, Themes and choose Customize.
- Open the product template and add Volume pricing table.
- Open the cart template and add Spend tiers progress, or turn on Spend tiers progress bar (fixed) under Theme settings, App embeds.
- Add Promotion banner to your announcement bar or any section.
- In diex, press Publish discounts to theme blocks on the dashboard. You need to do this once after installing; later saves update the blocks on their own.
App blocks need an Online Store 2.0 theme, such as Dawn. The fixed progress bar is an app embed.
The blocks
| Block | Where | What it shows |
|---|---|---|
| Volume pricing table | Product pages | The tiers of the volume discount for the product, as a table, pills or cards. With "Follow the quantity and the cart" on, it highlights the tier the chosen quantity reaches, counts what is already in the cart, and says how many more to add. |
| Spend tiers progress | Cart page, cart drawer or any section | The tier reached, the amount left to the next one and a milestone bar. Updates after every cart change. |
| Spend tiers progress bar (fixed) | Every page, or cart and product pages | The same progress, fixed to the top or bottom of the page. Hidden while the cart is empty. |
| Promotion banner | Any section, inline or fixed | Your text, an optional link and a discount code with a copy button. Can be dismissible for the visit. |
Which discount a block shows
Each block has a Discount to show setting that takes a discount title. Left empty:
- the spend blocks show the active automatic whole-order spend discount worth the most at the current cart total;
- the volume table shows the applicable volume discount whose first tier is easiest to reach.
Appearance
Every block has the same controls: card, plain or compact style, left or center alignment, text size, corner radius and padding, and either Use theme colours or your own background, text, accent, border and bar colors.
Good to know
- Blocks respect customer eligibility: a discount for tagged customers only shows to them.
- Spend blocks hide themselves when the cart is in a currency other than your shop currency.
- In the theme editor, blocks show sample tiers when no discount applies, so you can style them before your discount is live.
Still stuck? Email help@diex.app.