Fine-tune how options look and behave online

Before you start

Choose a template's look

1. 1

   Step 1: Open the option row

   Open the template's Online options and expand the option. Its Look choices appear as cards.

   The looks the option type can use are offered; the others are greyed. A line under the cards says which look Follows the option gives, such as Automatic (Colour swatches).

   

2. 2

   Step 2: Select a suitable look

   Choose the look that suits the offered values and the amount of explanation customers need.

Available looks

Info block shows the template's starting text and picture. It has nothing to select and does not block the line as an unanswered required choice.

1. 3

   Step 3: Adjust the presentation

   Set Values per row, Shape, Value names and Price on each value where the look supports them.

   Choose 2 to 6 values per row. Phone layouts below 750 px show no more than 3.

   Save the page. The option row shows Custom look when the template sets its own presentation.

   

   Row counts apply to color swatches, image swatches and image cards. Shape and value names apply to swatches; per-value pricing applies to choice looks.

   Color and round image swatches wrap at their natural size until a row count is set. Square image swatches and cards use grids.

Set a shared default

1. 1

   Step 1: Open the shared option

   Go to Settings›Products›Options and open the option. Choose Default look online and its presentation settings.

   The shared default is used by templates without their own look override.

2. 2

   Step 2: Add descriptions and a class

   For Dropdown values, enter Description (online), up to 160 characters. Radio list and Image cards show these descriptions.

   Enter Class name only if your theme styling needs it. Use letters, digits, hyphens or underscores, up to 60 characters.

   Save the option. Templates using it are queued to sync the changed storefront presentation.

   

   See Style the options block for using a class name.

3. 3

   Step 3: Check which setting wins

   Open a template that uses the option. Its own look wins over the shared default; otherwise the option's default wins over Automatic.

   If a stored look no longer fits its values or type, it remains saved but Automatic is displayed.

   Automatic uses available swatches or images where suitable. Other Dropdown choices use Buttons up to 8 values, then Dropdown.

Hide a staff-only choice

1. 1

   Step 1: Check its starting value

   Open the template option and review Starts as. A required option needs a starting value before it can be hidden.

   Choose that value deliberately. Online orders use it even though shoppers do not make the choice.

2. 2

   Step 2: Hide it online

   On Online options, turn on Hide on the online store. Read whether the help says online orders use a value or leave it blank.

   The row shows Hidden online as soon as you tick it, with a note on what online orders get. Save to keep it; staff can complete or change the choice later.

   

   Warning

   Hiding an option is not a way to keep its price confidential. The page still contains pricing needed to calculate its total.

   Customers can ask about a staff-only option through the portal, but cannot change it there themselves.

Share a design

1. 1

   Step 1: Choose the configuration

   On the product page, choose the desired options. Review the configuration before copying its link.

   The page now contains the choices the design link will refill.

2. 2

   Step 2: Copy or share the link

   Choose Copy design link or Share. Share opens the device's sharing interface when available and otherwise copies the link.

   The link carries the design rather than storing a saved price. It can contain up to 16,384 characters.

3. 3

   Step 3: Check the opened design

   Open the link to confirm the choices. It reports Design loaded with current prices or, for quote-only products, Your saved choices are loaded.

   If a choice is no longer available, the page asks for a replacement.

What happens next

Template changes sync that template; shared option changes sync the templates using it. Shopify's storefront cache can delay the visible result.

A saved design uses current prices when opened. It does not preserve a previous quote or guarantee a discontinued choice.

If something goes wrong