Showing your products
Reading data
A text can show a product's name, an image its photo, a button its page. You decide which part shows what, once, and every product fills it in. A part can also show only when something is true, like a Sale badge on things that are on sale.
Where the product comes from
A part reads the product in scope. There are three ways one gets there:
- Inside a list's component
- Each copy the list repeats has its own product. This is the usual one: product cards.
- Read data from: This page's product
- On a page that shows one product, any box can read it, and its parts show that product. See Pages.
- Read data from: The current item of a list
- The product a shopper picked in a list on the same page: the size they chose, the photo they pointed at.
There's one more: The cart, for showing how many things are in it and their subtotal. See The cart.
Making a part show something
- Open the component (double-click the list), or select the box that reads a product.
- Select the part: a text, an image, a button.
- In its Behaviour tab, under Shows, pick the field: Name, Price, Photo, Second photo, Page and more. What I typed keeps your own words.
Showing a part only sometimes
Under Show it, a part can show Always, or only when something holds for its product: On sale, Sold out, In stock, or when a field has something in it. A Sale badge, a Sold out label and a compare-at price all work this way.
A part whose field is empty for a product hides itself for that product. A card with a Second photo on hover simply doesn't swap for a product with one photo.
What a product can show
- Name, Type, First tag
- Words from the product.
- Price, From price
- From price says “from” when its choices cost different amounts.
- Compare-at price
- The old price, for things on sale.
- Photo, Second photo
- Its first two pictures. An image's On hover, show can swap to the second while the pointer is over it.
- Page
- Where the product lives, for a button or link.
- Photos, Options, Collections, Tags
- Lists inside the product: put a list inside the card or page to show them.
Recipes that use it
- 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.