Showing Choices as Buttons, Color Swatches or Image Swatches

A dropdown hides your choices until a shopper opens it. Buttons and swatches put them all on the page at once: every size as a button, every color as a little circle of paint, every fabric or map print as a tiny picture. Shoppers see what you make before they click, and one tap picks it. This works for your Variations (Size, Color and the like) and for your Options (gift wrap, a bulb, a finish). It is included on every plan, and nothing changes in your shop until you choose it.

A product page with Lamp Color shown as ten color circles, Deep Teal picked and named above the row, and Shade Size shown as three buttons with Medium 10 in picked, both rows circled
Color swatches for Lamp Color and buttons for Shade Size. The picked color is named above the row, and the photo switches to match.

The four ways to show choices

  • Dropdown: the usual select list. This is what every product has until you change it.
  • Buttons: each choice is a button with its name on it. The best pick for sizes, and it needs nothing else from you.
  • Color swatch: each choice is a circle of its color. A choice can have up to three colors, drawn as a diagonal split or slices, for heathers and two-tone work.
  • Image swatch: each choice is a small picture, such as a fabric, a glaze or a print. You can upload a swatch picture, or let IndieMade cut the choice's photo down to size.

Showing a Variation as buttons or swatches

  1. Go to Dashboard → Products and open the product. (For a shared Variation Template, open it from Dashboard → Variations instead; the setting is the same and every product using it follows.)
  2. In the Variations box, find the variation, such as Color.
  3. Change Show options as to Buttons, Color swatch or Image swatch.
  4. For a color swatch, each option now has a Color swatch row. Click the Color square to pick a color, or type a hex code such as #1f6a78. Click Add a second color (and then Add a third color) for a two-tone or three-tone swatch.
  5. For an image swatch, click Upload swatch on each option and choose a small square picture. If the option already has its own photo, the editor says Using the option photo and you can skip it.
  6. Click Save.
The Lamp Color variation in the product editor with Show options as set to Color swatch, and the Color swatch row under the Crimson option with its color, hex code, Remove and Add a second color, both circled
Show options as sits under the variation's switches. With Color swatch picked, every option gets a Color swatch row.
Give every option a color or a picture. A row of choices always shows in one style. If even one option has no color (or no picture), the whole row shows as name buttons instead, so it never looks half finished. Once every option has its swatch, the circles appear.

Changing how options look never changes your prices, stock or SKUs, and never asks you to click Update Products.

Showing an Option as buttons or swatches

Options with a list of choices (Select List, Radio Select and Checkboxes) have the same setting, called Show choices as. Open the product, or the option template under Dashboard → Options, and change it to Buttons, Color swatch or Image swatch. A Checkboxes option stays a pick-several option: shoppers can press more than one button.

The Bulb option template, a Radio Select option, with Show choices as set to Buttons, circled
An option template for a bulb choice, shown as buttons.

For a choice with an extra charge, the button shows the choice's name and the price on the page goes up as soon as the shopper taps it.

A product page with Shade Map shown as twenty small round pictures of map shades, a Leg Finish dropdown, and the Bulb option shown as three buttons: No bulb, Warm LED and Edison filament, the picture row and the buttons circled
Image swatches for a Variation (Shade Map), a dropdown left as it was (Leg Finish), and an Option shown as buttons (Bulb), all on one product.

The shape of the buttons

Open any product page on your shop while signed in, click the Settings gear in the bottom toolbar, and under Layout choose Option Button Shape: Fully rounded (the default), Slightly rounded or Square. Click Save. It changes every button on every product.

The Option Button Shape setting in Product Display Settings, set to Fully rounded, circled
Product Display Settings, opened from the Settings gear on a product page.

What shoppers see

  • The picked choice gets a strong outline in your shop's Secondary color from Design, so it stands out on any background.
  • The picked choice's name shows above a swatch row, so a shopper knows that teal circle is called Deep Teal.
  • A sold-out choice is dimmed, not hidden, and stays dimmed while the shopper tries other choices. To hide sold-out choices instead, use Hide out-of-stock variations in the same Settings gear.
  • If the option has a photo, the product photo switches to it when the shopper picks it. See Using the Upgraded Variations Editor for option photos.
  • Each row of choices gets its own line, so Size and Color never squeeze side by side.

Tips

  • Use Buttons for sizes and anything with words, Color swatch for paint, dye and glaze colors, and Image swatch for prints, fabrics and patterns that a color cannot show.
  • Swatch pictures are shown small and cropped square, so crop close to the pattern. A 200 by 200 pixel picture is plenty.
  • Keep a long list (twenty or more) of plain text choices as a dropdown. Twenty buttons is a lot of page.
  • Selling on Etsy too? Swatches are only how your IndieMade shop draws the choices. Nothing changes on your Etsy listings.

Related: Using the Upgraded Variations Editor · Using the Options Editor · Variation Templates

Questions? Email support@indiemade.com.