This guide explains what your shoppers see when they pick a material, choose product options, and add extras inside the customizer. It is for merchants who sell a product in more than one form, or who offer paid upgrades. Read it to understand the pickers, where prices show up, and how required choices stop someone from checking out too early.
The customizer is the page where a shopper personalizes your product. For the full flow, see how a shopper personalizes a product.
Choosing a material or variant
Some products come in more than one material. A framed poster and a tile might both carry the same artwork, for example. When that is the case, the customizer shows a material picker above the product options.
The picker only appears when there are two or more materials. If a product has a single material, the customizer skips the picker and goes straight to the options. So a shopper never sees a chooser with only one thing to choose.
You decide how the picker looks. It can render as image swatches, a button group, a segmented control, a dropdown, tile cards, a thumbnail grid, or color swatches. The style follows the display type you set on the product, so the same picker can look very different from one product to the next. You set this in the dashboard. See variants and options for how to configure it.
When a shopper picks a material, two things happen. First, the remaining product options and add-ons narrow down to what fits that material. A shopper only sees choices that apply to what they picked. Second, the preview image can switch to match the chosen material, so the live preview shows the right product. For more on that preview, see the live preview.
Adding extras (add-ons)
Add-ons are paid upgrades a shopper can attach to their product. A gift box, a premium frame, or a rush option are common examples. They appear below the options in the customizer.
Add-ons render in one of nine display styles, so they fit the kind of choice you are offering. The styles are a checkbox, a switch, radio buttons, a button group, a segmented control, a dropdown, color swatches, image swatches, and tile cards. You pick the style per add-on in the dashboard. See add-ons for setup.
Every priced choice shows its cost next to the label as a plus amount, like +5.00. A shopper sees exactly what each extra adds before they commit. Choices with no extra cost show no price, so a free option stays clean.
Required add-ons and auto-selection
Some add-ons are required. When you mark one as required, the shopper has to choose before they can add the product to the cart. If they try to add to cart without choosing, the customizer blocks it and shows an inline message that reads “Please choose” followed by the add-on name, right under that add-on. So no order goes through with a required choice left blank.
A single-choice add-on works a little differently. When an add-on has only one choice, the customizer selects it for the shopper automatically. The shopper does not have to tap anything, and a required single-choice add-on never blocks the cart. This keeps the form quiet when there is really nothing to decide.
How options, materials, and add-ons fit together
These three pickers stack from top to bottom in the customizer. The material picker comes first, the product options come next, and the add-ons come last. A shopper works down the list.
The order matters because the material choice filters everything below it. Pick a material, and the options and add-ons update to match. This keeps the form honest: a shopper only ever sees combinations you can actually produce.
The price a shopper sees reflects every paid choice. The base product price, any priced option, and each selected add-on add up so the total stays accurate as they make changes.
Why does the price not change when I pick an option?
Not every option carries a price. Only choices you set with an extra cost show a plus amount and change the total. Free options leave the price as it is.
A required add-on will not let me add to cart. What is wrong?
The required add-on has no choice selected yet. Pick one of its choices and the Please choose message clears, then Add to Cart works.
The material picker is not showing. Is that a bug?
No. The picker only appears for products with two or more materials. A single-material product skips it on purpose.
Can a material choice change the picture?
Yes. Picking a material, or an image-based add-on, can swap the product image shown in the live preview so it matches the choice.
If a shopper gets stuck on the customizer, point them to your support contact. If you hit an issue on the merchant side, contact support.
Next
Learn how all of this comes together in the shopper’s view in how a shopper personalizes a product.