Appearance
How offers work
Oriel's cart can show a rewards bar, add a free gift, offer quantity breaks, bundles and upsells. There's one rule to understand before you set any of them up:
The theme shows the offer. A Shopify discount gives the price.
Prices are calculated by Shopify at checkout, not by the theme. For every offer you show in the theme, create a matching automatic discount (or discount code) in Discounts. If the discount is missing, customers see the offer in the cart but pay full price at checkout.
Where the offers live
| Offer | Where you set it up in the theme | Guide |
|---|---|---|
| Free shipping bar / rewards ladder | Cart drawer → Rewards progress bar block | Rewards bar |
| Free gift above a cart total | Cart drawer → Free gift block | Free gift |
| Buy more, save more (1 / 2 / 3 bottles) | Product page → Quantity breaks block | Quantity breaks |
| Buy this product with others | Product page → Bundle offer block | Bundle offer |
| "You may also like" in the cart or on the product | Cart drawer → Upsells block, product page → Product upsells block | Upsells & add-ons |
| Shipping protection, gift wrap | Cart drawer → Add-on toggle block | Upsells & add-ons |
| A code shoppers tap to apply | Product page → Clickable discount block | Clickable discount |
| Code field, order note, terms checkbox, timer, trust badges | Cart drawer blocks | Other cart blocks |
Cart drawer or cart page?
Choose in Theme settings → Cart → Cart type:
- Drawer (recommended): the cart slides in from the side, so shoppers never leave the page they're on.
- Page: "Add to cart" takes shoppers to
/cart.
Both use the same blocks. To edit the drawer, open the theme editor and click Cart drawer in the left sidebar: the drawer opens in the preview. Each block has a Show in setting: Top (under the title), Below the items or Footer (above checkout).
The cart page (Cart in the page picker) has its own copy of most blocks, so you can design it separately. The Free gift and Add-on toggle are set only in the cart drawer and work on the cart page too.
Example: the demo store's offers
| Offer shown in the theme | Shopify discount behind it |
|---|---|
| Rewards bar step: Free shipping at $50 | Automatic free shipping discount, minimum purchase $50 |
| Rewards bar step: 10% off at $75 | Automatic amount off order, 10%, minimum purchase $75 |
| Free gift added to the cart at $100 | Automatic Buy X get Y: customer spends $100 on qualifying products, gets the gift product at 100% off |
| Popup code WELCOME10 | Discount code WELCOME10, 10% off, one use per customer |
Several offers at once? Read Combining discounts before you launch.