How the canvas works

Three ideas to start with

1. Everything sits in a box. A page is a box. A header, a card, a row of photos: boxes, holding text, images and other boxes.
2. Select something, then change it. Click anything on the page and its settings open on the right, in two tabs. Design is how it looks: size, colours, fonts, spacing. Behaviour is what it does: what happens when it's clicked, which screens show it, and what product it shows.
3. Make it once, use it everywhere. Turn anything into a component, and every copy follows when you change the original.

The basics

• PagesEach page of your store: its address, and the product it can show.
• BoxWhat holds everything else, and decides how it sits.
• TextWords on the page: headings, sentences, labels and prices.
• ImagePhotos, and how they're cut to fit their box.
• LayersEverything on the page as a list: pick, rename, reorder and hide.
• ComponentsMake something once, use it everywhere, change it in one place.

Showing your products

• ListsA box that repeats a component for every product, collection or photo.
• Reading dataParts that show a product's name, price or photo, and only when it applies.
• Search and sortLet shoppers narrow and reorder a list as they type and click.
• The cartAdd to cart, the bag count, and the drawer that holds what's in it.

Moving and reacting

• Hover and chosen looksHow things change when pointed at, when something beside them is, and when picked.
• Click actionsWhat a click or tap does: open, step through, add to cart, flip a switch.
• SwitchesButtons set a value; parts show only for it. Tabs, views and options.
• CarouselsRows that swipe sideways, several at once or one at a time, moving on their own.
• Drawers and pop-upsBoxes that slide in or cover the page until something opens them.

More pieces

• Buttons and linksThings that go somewhere or do something when tapped.
• Badges, icons and dividersThe small things: a Sale badge, a bag icon, a line between sections.

Your store's look

• Colours and fontsOne palette and one pair of fonts, used by role across the whole store.
• Themes and saved designsWhole stores to start from, tried on your products first, and every design kept.
• The CheckWhat it looks for on every page and phone, and the fixes it offers.

Recipes

Finished pieces that show what the canvas can do with nothing but the pieces above: no code, no apps. Each one is live here. Follow its steps to make it, or open it in the playground and take it apart.

• SpotlightA row of small photos under one big one. Point at a product, or tap it on a phone, and it fills the big frame with its name, price and a link.
• RackClothes hang on a rail, overlapping like hangers. The one under the pointer swings forward, the rest fade back, and its name and price show above the rail.
• Shop with filtersA search box, a sort menu and a chip for each collection, all narrowing one list of products as the shopper types and clicks. It shows eight at a time, with Show more for the rest.
• TabsDescription, Delivery and Returns, each with its own text, and only one showing at a time. Buttons set a switch, and each text shows for one value.
• Quick viewClick a product and it opens in a pop-up over the page: a bigger photo, the price and Add to cart, without leaving the list.
• Size pickerA chip for every size, the chosen one filled in and sold-out ones marked. Add to cart adds exactly the size picked.
• Phone menuOn wide screens the links sit in the header. On phones they fold into a menu button that slides a drawer in from the side.
• TestimonialsWhat your customers say, one quote at a time, moving on by itself every few seconds and stopping while someone reads.