How to Keep Colors, Sizes, Photos and Stock in Sync With Your Shopify Variants When You Use a Custom Options App

You can keep your Shopify variants and still use a custom options app. A calculator choice can follow a Shopify product option, so the shopper's pick selects the matching variant. The price, product photo, stock and cart follow it.

In Appify Custom Product Options this is called option sync. You do not type your colors and sizes a second time. The calculator reads them from the product.

Below is how it works, what follows the shopper's pick, and what to check when a product has more than one option.

Why keep the variants at all?

Your variants already hold things you maintain: photos, stock counts, SKUs and prices. A color or size that lives in two places is a color or size you have to update twice.

Option sync gives you one list. Add a variant in Shopify, and the calculator choices update with it. Remove one, and it leaves the calculator too. If you want to know where variants stop being the right tool, our guide to product options vs variants covers it.

Which options can follow a Shopify option?

Five option types can. Each has its own source setting on Basic settings.

Setting names as they appear in the editor. Details are in Option Basic Settings.

By default the source is Manual, which means you type each value yourself. Switch it to Shopify product option and pick which Shopify option the field represents, such as Color. The values you typed are hidden while sync is on, and they come back if you switch to Manual again.

What follows the shopper's pick?

With Sync option selection to Shopify variant picker on, which is the default, the pick is also selected in the theme's variant picker. From there:

• The variant. The variant added to the cart is the one the shopper chose.
• The photo. The product photo changes to match.
• The price. A calculator can start from the selected variant's Shopify price, so a variant priced higher starts higher. The Initial Price setting does this when its base price is the selected product variant.
• Stock. The stock that counts is the stock of the variant picked.
• The cart. The line carries the variant with the rest of the shopper's choices.

The shopper does not reload the page. If a choice should only drive the calculator and the Product Designer, turn the switch off for that option.

What if a product has Color, Size and Style?

Add one calculator option for each Shopify option. Color can be a swatch, Size a set of buttons, Style a dropdown. The variant that is selected is the full combination of every synced option.

If a calculator option already follows Color, the others show it as already used, so two fields never fight over the same option.

Swatches for variants that are not available show dimmed, and the shopper cannot select them. Nobody picks a combination that does not exist.

For bulk apparel, a quantity grid can take two of the options, such as Color and Size, and a synced Button option can take the remaining one, such as Style. The shopper enters a quantity per size and color in one order.

Can the Shopify value be used in formulas and rules?

Yes. The Shopify option value, for example Navy, is the choice token. You can use it in:

• pricing formulas
• visibility rules and value rules
• Personalization layers
• Product Designer bindings

A rule can also read the selected Shopify Color or Size without a calculator option at all. In rule conditions, choose the Shopify option as the source. You could show an upload field only when the Color is Red.

The rule reads the same label the shopper sees on the product page. A rule written as Color is Red still matches when the storefront shows a translated label such as Couleur and Rouge.

Does the Product Designer follow the variant?

It can. A preview scene can take its photo from the selected variant's image, a metafield, or a fixed image. When the shopper changes the color or size, the scene changes with it. The preview scenes guide has the details.

For wallpaper and patterns, an image swatch synced from Shopify variants can swap the canvas background. Each value shows that variant's featured image, with no per-value uploads. Set the canvas to show the variant's image with the Product image binding, as described in wallpaper and product image bindings.

What reaches the order?

The selected Shopify options appear on the order with the rest of the customer's choices. Your team sees the color and size next to the width, the artwork or whatever else was picked.

Customers who use Edit options in the cart can change the Shopify options too. The editor opens on the current published calculator with their selections filled in. When the product has more than one variant, the Shopify options show as dropdowns at the top. The Edit options from the cart guide covers the rest, and our article on editing configured products in the cart shows it in use.

Where can I see it working?

The T-Shirt Single demo uses it. Its Shirt Color swatch and its Size buttons follow the shirt's Shopify Color and Size options. Our T-shirt calculator breakdown walks through the pricing.

If you are new to the difference between native options and what an app adds, start with what product options are on Shopify. To see how the app sits on your store as a whole, read how Appify Custom Product Options works with Shopify.

How do I set it up?

1. Link a product to the calculator, so the editor can read its options.
2. Open Options & Pricing and add a Color swatch, Image swatch, Dropdown, Radio button or Button option.
3. On Basic settings, change the source from Manual to Shopify product option.
4. Under Shopify option, pick the option the field stands for.
5. Decide whether to keep Sync option selection to Shopify variant picker on.
6. For a product with several options, repeat for each one.

FAQ

Do I have to retype my colors and sizes?

No. With a Shopify source on, the choices come from the product's variants. When variants change in Shopify, the calculator choices update.

Can I turn sync off for one option?

Yes. The Sync option selection to Shopify variant picker switch is per option. Off means the choice drives the calculator and the Product Designer only.

What happens to the values I typed before?

They are hidden while a Shopify source is on, not deleted. Switch back to Manual and they return.

Do customers see sold-out combinations?

Swatches for unavailable variants show dimmed and cannot be selected.

Does the order show the Shopify options?

Yes. The selected Shopify options appear on the order with the rest of the customer's choices.