Help Center / Online store and design · Reference
Theme settings: product cards and cart
How product cards look across the store, and whether the cart opens as a drawer or a page.
- Who can use this
- Shop owner, Shop Marketing Manager
Help Center / Online store and design · Reference
How product cards look across the store, and whether the cart opens as a drawer or a page.
These groups of the editor's Theme tab apply to every product card and to the cart. The card group is called Cards in Essence, Souq and Bazar, and Product cards in Pronto and Halo.
Changes are part of the draft and go live on Publish. Defaults below are the theme's own; a ready-made layout sets its own values.
| Field | Essence | Souq | Pronto | Halo | Bazar |
|---|---|---|---|---|---|
| Card corner radius, 0–24 px | ✓ | — | — | In Shape | ✓ |
| Card style | Product card style | Product card style | Card style | Product card style | Product card surface |
| Product card layout | — | — | ✓ | — | ✓ |
| Image ratio | Product image ratio | Product image ratio | Product image ratio | Card image ratio | Product image ratio |
| Show second image on hover | On | Off | Off | On | On |
| Rating | Show product rating | Show product rating | Show rating | Show rating | Show product rating |
| Show brand | Off | Off | Off | Off | Off |
| Quick add button | On | On | Own group | In Buying | On |
| Show wishlist heart on cards | In Store features | In Store features | Off | Off | In Store features |
Rating switches are on by default.
| Field | Options | Theme default |
|---|---|---|
| Card style | plain, bordered, elevated. Bazar shows Plain, Bordered, Elevated (shadow) | Essence and Halo plain, Souq and Pronto elevated, Bazar bordered |
| Image ratio | square, portrait, landscape, natural | square. Halo's Card image ratio: portrait |
| Product card layout (Pronto) | Tile (image on top), Row (image at the end) | Tile |
| Product card layout (Bazar) | grocery, neat, oak, maple, flash, market | grocery |
Pronto also has Grid columns on phones (Two or Three) and Show pack size. Halo also has Image ratio on catalogue pages, for cards on its standard collection and search pages.
All five themes have these fields in the card group.
| Field | Options | Default |
|---|---|---|
| Show offer badges on product cards | Switch | On |
| Offer badge style | Pill, Ribbon across the photo, Corner flag, Tag | Pill. Souq: Tag. Bazar: Ribbon across the photo |
| Countdown on offer badges | Off, Flash sales only, Every offer that ends | Flash sales only |
| Strike through the price before the offer | Switch. Not in Bazar | On |
The style and countdown fields show only while offer badges are on.
| Kind | Fields |
|---|---|
| What a card shows | Show the unit under the price, Show the discount badge, Show the old price struck through, Show the offer tag, Show country of origin |
| Sizes | Price size, Title size, Title lines before trimming, Small print size, Card density, Add / quantity control size, Product image fit |
| Add button | Add button style, Add button text, Add button wording |
| Behaviour | What the card leads with, Tapping a product (Go to the product page or Open a quick view) |
Essence, Souq, Pronto and Bazar have a Cart group. Halo uses Buying instead. See Halo theme.
| Field | Themes | Options | Default |
|---|---|---|---|
| Cart type | All four | drawer, page | drawer |
| After adding to the basket | Pronto, Bazar | Open the basket, Stay put, just confirm | Open the basket |
| Sticky cart bar | Pronto | Switch | On |
| Show free delivery progress | All four | Switch | On |
| Show minimum order progress | Pronto | Switch | On |
Show minimum order progress has an effect only when your shop sets a minimum order amount.
Pronto's quick-add settings are on the Pronto theme page.