Start
In the docs

The basics

Box

A box holds other things and decides how they sit: one under another, side by side, in a grid, or exactly where you put them. Pages, cards, headers and footers are all boxes.

A candle in a glass jar
Fig leaf candle
$28
The card is a box.
It holds a photo, a name and a price, one under the other, and gives them a background and rounded corners.
A box holding a photo and two lines of text. Everything on a page sits in a box like this one.

How to make one

  1. Press F, or choose Box in the toolbar.
  2. Drag on the page. Let go, and the box is there, selected.
  3. To put a box inside another, drag inside that box.

How things sit inside it

A box's Layout of what's inside decides where its contents go. Try each one:

Layout of what's inside
1
2
3
Row: side by side, in order. On phones a row wraps when it runs out of room.

With Stack, Row and Grid you also set the gap between things and the padding around them. Drag something into a box with a layout and it takes its place in the order.

How big it is

Inside a box with a layout, each thing's width and height can be Fixed, Hug or Fill.

Width of the middle one
Fixed
This one
Fixed
Fixed: exactly the width you give it.

Inside a box set to None, you place things yourself, and choose what each does when the box gets wider or taller: stay at the left, stay at the right, stretch with it, or stay centred.

Design

Select a box and open the Design tab.

Corners
Shadow
Opening hours
Tuesday to Saturday, 10 till 6
Layout of what's inside
None, Stack, Row, Grid or Carousel, with the gap and padding.
Size
Fixed, Hug or Fill for its width and height; in a box set to None, its position too.
Background
A colour from your store's design, or any colour you choose.
Corners, Border, Shadow
Rounded or square, an outline, and how far it lifts off the page.
Padding
Room between the box's edge and what's inside it.
On appear, On hover
A small movement when it scrolls into view, or when the pointer is over it.

Behaviour

The Behaviour tab is for what a box does, not how it looks.

When clicked
Follow a link, open a drawer or pop-up, add to cart, and more.
Show on
Every screen, wide screens only, or phones only.
Read data from
Show a product, or the item picked in a list, in the things inside it.
Repeat a list in this box
In the ⋯ menu: the box repeats a component for each product.

Good to know

  • Double-click a box to pick something inside it. Press Esc to step back out.
  • The page itself is a box, set to Stack. That's why sections you add land one under another.
  • Turn a box into something else with ⋯ › Turn into: a button, a link, a drawer, a pop-up.
  • Made a box you'll want again? Make it a component.