The editor
Open a cart from Carts to edit it. The preview in the middle shows your changes as you make them.
- The tabs down the left switch between Inspector (the blocks), Theme (colours, fonts and spacing), Translations, Global settings and Code. The Translations tab isn’t finished yet, so changes there don’t reach your cart.
- The panel on the right shows the settings of whatever you’ve selected.
- At the top, the cart icon opens Simulate cart (see below). Next to it you can preview the cart on Desktop or Mobile, or hide both side panels with Fullscreen.
- The ⋮ menu has Preview, Rename and, for a draft cart, Publish. Preview opens your store with the cart as it is in the editor; see Previewing on your store.
The cart’s name is at the top, with a green Live badge if it’s the cart your shoppers see.
Your changes are kept until you choose Save. If you leave with unsaved changes, the editor asks whether to save them first.
Blocks and sections
Section titled “Blocks and sections”A cart is made of blocks: the title bar, the list of products, the discount code field, the total, the checkout button and so on. They sit in four sections, from top to bottom:
| Section | What usually goes there |
|---|---|
| Top Bar | The cart title and close button |
| Header | Announcements and the free shipping bar |
| Scroll area | The products. This part scrolls when the cart is long. |
| Footer | Discount codes, the total and checkout. It stays in view. |
Working with blocks
Section titled “Working with blocks”In the Inspector:
- Add a block: choose Add block in a section and pick one. The new block starts with the settings and look the template gives it, so a new Free shipping progress bar in Minimalist starts with a goal of 50. See Blocks for what each one does.
- Change a block: click it to open its settings on the right.
- Move a block: drag it within its section, or into another section where it fits.
- Hide a block: hover over it and choose the eye icon. Hidden blocks stay in the editor but shoppers don’t see them, which is handy for seasonal messages.
- Delete a block: hover over it and choose the bin. This takes effect when you save, so if you delete something by mistake, leave without saving.
Some blocks have items of their own. The announcement bar, for example, holds the messages it rotates through. Choose + on the block, or Add message in its settings, to add one.
Which blocks go where
Section titled “Which blocks go where”A cart can have one of each block, except Custom HTML, which you can add as often as you like. Each block also only goes in the sections where it makes sense:
| Block | Sections |
|---|---|
| Cart title bar | Top Bar |
| Cart items list | Scroll area |
| Checkout buttons | Footer |
| Subtotal area, Discount input, Payment methods | Scroll area, Footer |
| Announcement bar, Free shipping progress bar, Loyalty points | Header, Scroll area, Footer |
| Custom HTML | Any section |
In Add block, blocks you can’t add to that section are greyed out and say why, for example “Already in this cart. A cart can have only one.” Dragging a block into a section it doesn’t fit in does nothing.
Simulate cart
Section titled “Simulate cart”The preview starts with an empty cart. To see the cart with real items, choose the cart icon at the top (Simulate cart). The panel on the right then lets you fill the preview’s cart with products from your store:
- Search for a product under Search products to add and click it to add it. Click it again to add one more.
- Add random products adds three in-stock products from your store.
- Change quantities with + and −, remove a product with the bin, or empty the cart with Empty cart.
The preview’s cart works like the real one: you can also change quantities, remove products and enter discount codes in the preview itself, and the panel keeps up.
Nothing here touches your store. No product is added to a real cart, and the simulated products are remembered only in your browser, for this cart, so they’re still there next time you open it.
A few things work differently from your store:
- Discount codes: the preview refuses every code unless you add it under Test discount
codes. Enter a code, such as
TEST10, and a percentage, then choose Add. Typing that code into the preview’s discount field then takes that percentage off. - Checkout: the checkout button doesn’t go anywhere in the preview. Links in the cart, such as product names, don’t open either.
- Prices: prices come from NativeSlide’s copy of your products. A product with No price yet shows as free; running Sync products in Products fetches the prices. There are no taxes or shipping in the preview.
To go back to a block’s settings, choose the back arrow (Back to properties) or click a block.
What the preview doesn’t show
Section titled “What the preview doesn’t show”The preview always shows the cart open. It ignores settings that only make sense on your store, such as Auto-open, and the prices it shows are in your store’s currency but not always in exactly the format your store uses. To see the real thing, use Preview in the ⋮ menu, or publish the cart and look at your store.