How to Build a Shopify Product Configurator or Customizer

Last updated: November 4, 2026. Disclosure: Webiots develops Ultimate Product Options, the app used in the setup steps. App features and prices come from each app’s public Shopify App Store listing.

In this guide

• What a product configurator is
• Why Shopify variants aren’t enough
• Product customizer vs configurator
• 3 types of product customizer
• What a visual configurator needs
• How to build a configurator, step by step
• Setup with Ultimate Product Options
• Common mistakes
• The bottom line
• FAQ

What Is a Shopify Product Configurator?

A product configurator is a guided set of choices on the product page that lets shoppers build their own version of a product. Instead of one long dropdown, the shopper moves through steps: for example, material, then color, then engraving, then gift wrap. Fields appear only when they’re relevant, and the price updates as extras are added. Configurators are common for engraved jewelry, custom apparel, made-to-order furniture, signs and personalized gifts. Every choice is saved to the order as a line item property, so your team knows exactly what to make (Shopify Dev Docs).

Why Aren’t Shopify Variants Enough for a Configurator?

Variants are limited to 3 options per product and can’t collect text, files or show-and-hide rules. Each product can have up to 3 options and 2,048 variants (Shopify Help Center). The usual approach is to keep stocked choices, such as size, as variants and build everything else in an app. See how to add more than 3 options to a Shopify product.

What Is the Difference Between a Shopify Product Customizer and a Configurator?

A configurator guides shoppers through set choices; a customizer usually lets them add their own text or images, often with a live preview. Many apps and stores use the two words for the same thing, and most personalized products need a bit of both.

What Types of Shopify Product Customizer Are There?

There are three main types: options-based configurators, live-preview personalizers and 3D configurators. Choose by what your shoppers need to see before they buy. To compare apps across these types, see our comparison of 11 Shopify product options apps, which shows which plans include a live preview.

What Does a Visual Product Configurator Need on Shopify?

Clear images for every choice, so shoppers see what they’re picking, and a live preview only where they need to see their own design.

• Image swatches for materials, colors, fabrics and fonts, instead of text-only dropdowns.
• Product photos for each variant, so the main image changes when the shopper picks a variant such as color.
• A live preview for products where the shopper’s own text or photo is the product, such as name necklaces or photo gifts.
• Prices next to each choice, such as “+$40”, so the total isn’t a surprise.

How Do You Build a Product Configurator on Shopify?

Map the choices, decide which stay as variants, build the steps in an app, add rules and prices, then test.

1. Map every choice

Write down each choice in order, with its values and price. For example: Material (Silver, Gold +$40) → Font (Script, Serif) → Engraving text (up to 12 characters) → Gift box (+$6).

2. Decide what stays a variant

Keep choices you hold in stock, such as ring size or base material, as Shopify variants. Build made-to-order choices in the app.

3. Group the choices into steps

Put 2 to 4 related choices in each step, such as “Design”, “Personalize” and “Extras”, so the page isn’t overwhelming on mobile.

4. Add conditional logic

Show fields only when needed. For example, show “Engraving text” only after “Add engraving” is ticked. See how to set up conditional logic.

5. Add prices and required fields

Give each extra a clear price, and make the fields your team needs required. See how to charge extra for product options and how to make product options required.

6. Test every path

Place a test order for each main path, on mobile and desktop, and check every choice reaches the order and your packing slips.

How Do You Set Up a Configurator With Ultimate Product Options?

Build one option set, add conditional logic, then turn on the step wizard so shoppers move through the configurator one step at a time. Webiots develops Ultimate Product Options; plan details are from its App Store listing.

1. Install Ultimate Product Options and turn on its app embed in the theme editor.
2. Create an option set for the product, such as “Signet ring configurator”.
3. Add the choices from your map: image swatches for material and font, a text field for engraving, a checkbox for the gift box.
4. Add prices to the extras. Add-on pricing is on the free plan.
5. Add conditional logic (Basic plan, $7.99/month) so fields appear only when relevant.
6. Turn your choices into steps with option groups and the step wizard (Advanced plan, $12.99/month).
7. Assign the set to one product or a whole collection, and test on mobile.

What Are the Most Common Configurator Mistakes?

• Too many choices on one screen: group them into steps and hide what isn’t needed yet.
• Prices that appear late: show “+$40” next to each priced choice, not only at checkout.
• Invalid combinations: use rules so shoppers can’t pick options that don’t work together. See conditional logic trees.
• Orders missing details: make key fields required, and test the Buy it now button.
• Skipping mobile testing: long forms are harder to complete on a phone, so test every path there.

The Bottom Line

A good configurator starts on paper: map every choice, keep stocked items as variants, and build the rest as guided steps with clear prices. An options-based configurator covers most custom products; add a live preview or 3D only when shoppers truly need to see the design. Whatever you build, test every path on mobile with a real order. Ready to build yours? Install Ultimate Product Options free or learn more about the app.

Frequently Asked Questions

Does Shopify have a built-in product configurator?

No. Shopify offers up to 3 options and 2,048 variants per product, but no configurator with steps, text fields or conditional logic. Most stores add one with an app.

What is the difference between a product customizer and a configurator?

The terms overlap. A configurator usually means choosing from set options in steps, while a customizer often adds a live preview of the shopper’s own text or image. Many apps do both.

What is the best Shopify product customizer app?

It depends on whether you need a live preview. For options-based customization with add-on prices, Ultimate Product Options, Globo, Easify and others work well; for a live preview of the shopper’s text or photo, check which plan includes it, as it’s often on a higher plan.

Do I need a developer to build a configurator?

Not for an options-based configurator; an app handles it from a dashboard. A fully custom or 3D configurator usually needs a developer or a specialist app.

How many options can a configurator have?

Shopify variants allow 3 options per product. Options apps add choices on top of that without creating variants, so configurators aren’t limited to 3.

Can a configurator show the price as shoppers choose?

Yes. Options apps add a price to each extra and update the total as shoppers make choices, so there are no surprises at checkout.

Related Reading

• Best Shopify Product Options Apps (2026): 11 Compared
• Turning 20+ Product Choices Into a Step-by-Step Wizard
• How to Set Up Conditional Logic on Shopify Product Pages
• How to Add a Font Picker to Shopify Product Pages

Update Log

• November 4, 2026: Added a product customizer vs configurator comparison and a section on visual configurators and live preview.
• October 28, 2026: Rewritten: corrected Shopify’s variant limit, added the 3 types of product customizer, a step-by-step build guide and current app plan details; removed claims that weren’t backed by a source.
• August 2026: First published.

Sources

• Shopify Help Center: Adding variants
• Shopify Dev Docs: line_item properties
• Ultimate Product Options on the Shopify App Store