The editor

The cart editor is one page with two columns: your settings on the left, a live preview of the real drawer docked on the right. Open it by clicking a cart's name on the home page.

Changes are held as a draft until you click Save in the save bar at the top. Discard throws the draft away and restores the last saved version.

The left column, top to bottom

Cart name and the status badge (Active or Draft), with the cart's numbers beside them — see Reading the numbers.

Preview settings — how the preview is staged. Nothing here is saved or seen by shoppers:

• Cart — With items, With a discount or Empty.
• Language and Market — preview the copy and targeting a shopper in that market would get. If the cart doesn't claim the selected market, the preview says so.
• Choose preview products — swap the demo products for real ones from your catalog.

A/B test — set up and run a test of two to five looks. See A/B testing a cart.

Activation — which markets this cart claims and when. See Activating and scheduling a cart.

General — the drawer's own chrome: the drawer Title, Drawer width, Panel style, Show launcher bubble and Launcher position.

Design — the template cards, Font and Heading font, and the color and size controls. See Choosing a design and Fonts.

Behavior — six switches that decide how the drawer takes over the theme's cart: Open automatically when items are added, Open on cart icon clicks, Take over add-to-cart forms, Hide the theme's own cart drawer, Hide decimals on whole amounts and Debug logging.

Advanced — the theme-compatibility fields (Extra cart trigger selectors, Extra native drawer selectors) plus Custom CSS and Custom JavaScript. See Theme compatibility and Styling Hype's storefront components.

The module list

Below the panels, the drawer's contents are grouped into three regions, which is the order they render in:

• Top bar — above the product list.
• Content — the scrolling middle.
• Footer — pinned to the bottom.

Each row is one module. To work with them:

1. Click a module's name to expand its settings inline.
2. Use the switch on the right to turn it on or off without deleting it.
3. Drag the handle (⠿) to reorder within a region, or into another region.
4. Click the + button on a region header to add a module to the end of that region.
5. Use the delete button inside an expanded module to remove it.

Most modules can appear only once per cart, so they disappear from the + menu once they are in the drawer. Custom text and Custom HTML are the exceptions — add as many as you like; the list numbers them (Custom text 1, Custom text 2) so you can tell them apart.

Every module is documented in Modules.

Text fields and translation

Each module's shopper-facing text is edited in its own panel. Two icons sit beside a text field's label:

• {} lists the variables the field accepts, such as {amount} or {timer}, and appends the one you pick.
• The translate icon opens per-language values for that field. It only appears when your store publishes more than one language. See Translating your drawer.

Leaving a field empty keeps the built-in default, which is shown as the field's placeholder.

The live preview

The preview runs the real storefront drawer against a demo cart, so what you see is what shoppers get — with two deliberate differences:

• Fonts. With Font set to Theme font, the preview shows a stand-in, because the admin cannot load your storefront's typeface. On your store the drawer uses your theme's font.
• Custom HTML. Scripts inside a Custom HTML module never run in the preview, and framed embeds are stripped from it.

The countdown on an announcement bar is also static in the preview, so a preview can't run itself down or clear the demo cart.

Saving and activating

Save stores your changes and, if the cart is already active, republishes it to your storefront. Activate (or Deactivate, for a live cart) is the separate button in the page header. Saving a draft cart changes nothing for shoppers until you activate it.

Related

• Putting your first cart drawer live
• Duplicating, renaming and deleting carts