What customers see
The designer opens on your store domain inside your theme. On the left is the live 3D preview, on the right the choices.
Style and size first
If the design has styles, the customer picks one at the top. If it has several sizes, the size selector follows with the price of each size. The preview switches to the chosen model.
One colour per step
Each part with a colour choice is a step. The customer sees the current step, a row of numbered step pills showing progress, and Previous and Next buttons. A step can only be reached through Next, so no part is skipped. Once every step has been seen, Add to cart is available from any step.
On a phone the preview stays at the top while the choices scroll underneath.
Price
The price of the chosen size is shown and updates as the customer changes style or size. It is the variant price from Shopify.
Add to cart
Add to cart checks the design on the server, saves the configuration and adds the matching variant to the cart with the customer's choices as line properties. The cart line shows the customer's own preview image. There is no edit link from the cart; a customer who wants something different adds a new design.
Language
The designer follows the customer's browser language, English or Danish, regardless of the store's language. Money is formatted in the store's currency.