Show choices as swatches, images, buttons or a list

You choose how the customer sees an option's choices on the product page. Changing the style does not change the choices, their colors, their images or their prices.

Before you start

• The product has an option with choices, such as "Color" or "Size". See Let customers choose a color, size or design.

Steps

Path: Products > Open Product Studio > Options

1. Click the option to open its settings.
2. Under Display as, click the style you want:
   • Swatches: a color circle for each choice. Product Studio gives a color to any choice without one, and you change it from the color circle next to it.
   • Images: an image for each choice. Click Upload on each choice to add its image.
   • Buttons: a button with the choice name.
   • Dropdown: a dropdown list, and the customer picks only one choice from it.
   • Tabs: the choices as text tabs side by side.
   • Checkboxes: a checkbox for each choice, and the customer can pick more than one.

3. Click Review & publish, then Publish now. Until then, nothing changes in your store.

   On a phone: to see the new style, open Preview.

What your customers see

The customization goes live in your store within about a minute. The customer sees the choices in the style you chose.

Good to know

• Checkboxes does not work with priced choices. Turn off the price first, then choose Checkboxes.
• Choosing Dropdown turns off Can pick more than one if it was on, and a message tells you so.
• In Images, a choice without an image shows to the customer as a text button. A notice shows how many there are. If they have On product images, click Use the “On product” images.

Not showing?

• You do not see Display as? It shows only on an option with choices. It does not show on text or file upload options.
• You see fewer styles? The Font style option has only Buttons and Dropdown, and the Text color option has Swatches, Buttons and Dropdown.
• Did "This image type isn’t supported. Use PNG, JPG, WebP or SVG." appear? Upload the image in one of these types.
• A choice shows as a card with an image? This happens in Checkboxes, and in Swatches when the choice has no color. Delete its image to show it in the new style.
• What each setting means: Option settings in Product Studio.
• The customization widget does not show on the product page

Next

Add many choices at once from images