Tiles, cards and swatches

The material and each Choose-one add-on show as a dropdown unless you choose otherwise. Tiles, cards and swatches put every choice on the page at once, so shoppers see what they can pick and what it costs without opening a list, with an image of each choice if you give it one.

The four ways to show choices

Dropdown

As before: one list, each choice with its price, such as "Gloss (+$12)".

Tiles

A small box for each choice: its name, and its price ("+$249") or "Included" when it adds nothing.

Cards

Larger boxes with room for a description of each choice, such as "Two remotes, 5-year warranty".

Swatches

A circle of color for each choice, with its name under it, and its price when it has one. For finishes, fabric colors and paint colors.

Setting it up

• Materials: in the Materials section, choose Show materials as. Then edit a material to give it a Description (on cards) or a Color.
• Add-ons: edit a Choose-one add-on and choose Show choices as. Each choice then gets a Description (on cards) and a Color.

A description is one line, up to 80 characters. A color shows as the swatch itself, and as a small dot on tiles and cards. Both are kept when you switch back to a dropdown, so you can try each look.

Images on choices

A material, or a choice of a Choose-one add-on shown as tiles, cards or swatches, can have an Image, next to its Color and Description in the same dialog:

• Choose from Files picks an image already in your store's Content › Files, or Upload an image adds one there: PNG, JPEG, WEBP or GIF, up to 20 MB and 20 megapixels.
• Alt text describes the image for shoppers who can't see it. Left empty, the choice's name is used.

Because images come from Files, a template carries them to every product it prices. On the product page, the image shows beside the name on tiles and cards, and fills the circle of a swatch. Images load only as shoppers scroll near them, at the size they show. If an image can't load, the choice shows as it would without one: its color, or its name.

On the Widget customization page, the Style tab sets Image size on tiles and cards (small, or large above the name) and Image shape (square or round). Swatches stay round.

Show a product photo when a choice is picked

A choice can also switch the product's main photo, so a shopper who picks Oak sees the oak door. It's off until you pick a photo:

1. Show the materials, or the Choose-one add-on, as tiles, cards or swatches, and save.
2. On the product's Options tab, under Photos for choices, pick one of the product's own photos for each choice that should switch it. Keep the current photo leaves a choice as it is.
3. Click Save photos.

Each product keeps its own photos, so a product priced by a template has a Photos for choices section too, without detaching it. A photo deleted from the product in Shopify is simply no longer used.

The switch works on Dawn and Shopify's free themes built on it, and on Debut. On other themes the main photo stays as it is, and the choice still works and is priced as usual.

What shoppers do

They click or tap a choice, or move between choices with the arrow keys. The chosen one is outlined in your accent color. Prices, the cart line and checkout work exactly as with a dropdown. An add-on that isn't required and has no default has a None choice; a required one starts with none chosen unless it has a default.

Tiles, cards and swatches follow the colors and corners you set on the Widget customization page, whose preview shows a row of tiles.

Hints and help lines on the size fields

In the Size limits section, each size field can have:

• a hint after its name, up to 40 characters: "Height (mm) floor to lintel";
• a help line under the field, up to 100 characters: "Standard sizes: 2100 to 2200 mm".

Screen readers read the help line with the field.