Product Variants & Per-Option Pricing

Product variants let a single product carry the different choices a customer must make before they buy — like Size (S / M / L), Color (Red / Blue), or Storage (128GB / 256GB). Instead of creating three near-identical products for three sizes, you build one product and add an option group for each decision. This keeps your catalogue clean, your inventory simple, and your storefront easy to browse, while still capturing exactly what the customer wants.

The standout part of this June 2026 feature is per-option pricing. Each option can carry a small price change versus the base price — for example a Large pizza that costs +$2, or a Small size that is −$1 cheaper. The storefront shows that adjustment right on the option chip, recalculates the live price the moment a customer picks, and — most importantly — the order total is recomputed on our server from your saved prices, never from anything the browser sends. That means a manipulated cart can never overcharge or undercharge you.

Who is this for? Any store owner whose products come in choices: a clothing shop (size + color), a restaurant or bakery (portion size, add-ons), a phone or electronics store (storage, color), a coffee roaster (grind, bag weight). If your product is truly single — one fixed thing with one price — you simply leave the variants section empty and nothing changes. Variants are always optional, per product.

What / why: variants are built right inside the product editor, in a section titled Variants (optional), with the hint *"Add custom option groups (e.g. Color, Size). Leave empty for a simple product."* It appears both when you add a new product and when you edit an existing one, so you can introduce variants at any time without rebuilding the product.

Go to your dashboard, open your Store, and click Products (or Manage products) for the store you want. Click Add product to create a new one, or the edit (pencil) icon on an existing product. The editor opens as a modal with all the usual fields — name, image, description, category, price, status — and the Variants (optional) block sits below the price fields.

Set your base price first (the product's Sales price / Price field), because every per-option adjustment is calculated relative to this base. If a medium drink is $3 and you want large to be $5, the large option's adjustment is +2, not 5. Getting the base right before you add price deltas saves you re-doing the math for every option later.

What / why: a group is one decision the customer makes — "Size", "Color", "Storage". Each group becomes a labelled row of buttons on the storefront, and the customer must pick exactly one option from every group. You can add up to 10 groups per product, which is far more than almost any real product needs.

Click + Add group. A small card appears with a Group name text field (placeholder *"Group name e.g. Color"*) and a red ✕ to remove the whole group. Type a clear, customer-facing name — this exact text is what shoppers will read, so write Size or Color, not internal codes. Group names are limited to 40 characters and must be unique within the product (you cannot have two groups both called "Size").

A blank option row is created for you automatically inside each new group. A group with no usable options is dropped on save — if you add a group but leave every option blank, that group simply won't be saved, and if you leave *all* groups empty the product stays a normal single-price product. This is deliberate: empty scaffolding never leaks onto your storefront.

What / why: an option is one selectable value inside a group — "S", "M", "L" inside Size, or "Red", "Blue" inside Color. Each option row has two fields side by side: the option label (left) and an optional ± price adjustment (right), plus a ✕ to remove that single option. You can add up to 50 options per group.

In the option label field (placeholder *"Option e.g. Red"*) type the value the customer sees, e.g. Large. Click + Add option to add another row, and repeat for every choice in that group. Labels are capped at 40 characters and must be unique inside their group — you cannot list "Red" twice under Color. Blank labels are ignored on save, so an empty trailing row never causes a problem.

The ± price box (placeholder *"± price"*, tooltip *"Price change for this option, e.g. 2 = +2, −1 = cheaper. Leave blank for same price"*) is where per-option pricing lives. Enter a positive number to charge more (2 makes that option cost +2 over the base), a negative number to charge less (-1 makes it 1 cheaper), or leave it blank / 0 for the same price as the base. You don't type a currency symbol — just the number; the storefront adds your store's currency automatically.

Two practical rules. First, you usually leave the *default* option's price blank (it equals the base) and only add deltas to the options that cost more or less — e.g. Size S blank, M blank, L +2. Second, the saved adjustment is clamped to a sane range (roughly ±1,000,000) and rounded to 2 decimals, so typos can't store an absurd value, but a deeply negative delta that would drop a line below zero is floored at 0 at checkout — we never charge a negative amount.

What / why: when you click Save (or Update), the builder serializes your groups and options into a single structured value stored on the product. Both the browser and our server validate it, so what gets saved is always clean — no blank groups, no duplicate names, no oversize text.

If something is off, you'll see a clear inline message before the product saves: *"Please name every variant group (or remove empty ones)"*, *"Group X needs at least one option"*, *"Duplicate group name"*, *"Duplicate option … in group …"*, or a *"too long"* / *"too many"* cap warning. Fix the flagged field and save again. These checks mirror exactly what the server enforces, so you never get a surprise rejection.

To change variants later, reopen the product in edit mode — the builder reloads your existing groups, options and price deltas exactly as saved, ready to adjust. Add a new size, fix a price, or remove an option, then Save. If you delete every option so nothing valid remains, the product reverts to a plain single-price item and the picker disappears from the storefront on the next save.

What / why: on the public store, every variant group renders as a labelled row of tappable chips on the product page, just above the Add to cart button. The group name is the label (e.g. "Size"), and each option is a pill the shopper taps to select. Only one chip per group can be active at a time — picking a new one deselects the previous, so the choice is always unambiguous.

Any option with a price adjustment shows it right on the chip — for example L +$2 or S −$1 — using your store's currency symbol, so customers see the cost difference before they choose, with no surprises at checkout. Options with no adjustment show just their label. If your theme displays a live price near the button, it updates instantly as the customer switches options.

Customers must choose one option from every group before they can add the item. If they tap Add to cart without completing the choices, they get a friendly nudge — *"Please choose: Size"* (naming the missing group) — and nothing is added until they pick. This guarantees you never receive an order that's missing a critical detail like which size or color the customer wanted.

In the cart, the chosen variant is shown beneath the product name (e.g. *"Size: M · Color: Red"*), and the line price reflects the option deltas. A neat detail: the same product added with different variants becomes separate cart lines — a Red M and a Blue L don't merge into one row — so quantities and prices stay correct per combination.

What / why: when the customer checks out, each cart line sends its chosen variants as simple group → option pairs (e.g. Size → M, Color → Red). The server stores these alongside the item, so the order record permanently shows exactly what was ordered. You'll see it in your Store orders screen under each item as a small line like *"Size: M · Color: Red"*.

The price is not trusted from the browser. On every order the server looks up the product fresh, takes its real sales price, and adds the price deltas only for options it can match by group name + option label in the saved variant definition. Unknown, deleted, or spoofed selections add zero. This is the anti-tampering guarantee: a customer (or a manipulated cart) can never invent a discount or dodge a surcharge — the total always reflects what *you* configured.

Edge cases are handled gracefully. If a product was deleted after the order was placed, the line falls back to the price the customer saw so the total is never silently wrong. If you later rename a group or option, old orders keep the text that was captured at purchase time (it's a snapshot), while new orders match against your updated definition. And a combination whose deltas would total below zero is floored at 0, never negative.

Name groups the way a customer thinks. Use plain, human labels — "Size", "Color", "Flavor", "Storage" — not internal SKUs or codes, because the group name is shown verbatim on your storefront. A clear name reduces hesitation and abandoned carts.

Anchor your base price on the most common option and adjust the rest. Set the product price to your standard/default choice (price delta blank), then add +/− only to the cheaper or pricier options. This is less error-prone than giving every option an absolute number and keeps the base price meaningful.

Keep groups to genuine decisions. Although you can add up to 10 groups and 50 options each, most products convert best with one or two short groups. Long lists of chips overwhelm shoppers on mobile; if you need many sizes, that's fine, but resist stacking unrelated decisions into one product.

Test the storefront after saving. Open the live product page, confirm the chips appear, that the price deltas show correctly with your currency, and that adding to cart produces separate lines for different combinations. A 30-second check catches a mistyped delta before a customer ever sees it.

Avoid renaming groups/options on active products. Price matching at checkout keys on the exact group name and option label. Renaming is allowed, but old in-flight carts may stop matching a renamed option (adding 0 instead of its delta). If you must rename, do it during a quiet period and re-check the price.

Do I have to use variants on every product? No — they are completely optional, per product. Leave the Variants section empty and the product behaves exactly as before: one fixed price, no picker. You can also add variants to some products and not others in the same store.

Can different options cost different prices? Yes — that's the per-option pricing feature. Each option can carry a + adjustment (costs more), a − adjustment (costs less), or nothing (same as base). The storefront shows the difference on the chip and the order total is recomputed from your saved prices on the server.

What stops a customer from manipulating the price in their browser? The server never trusts the browser's price. On every order it looks up the product, uses its real sales price, and only adds deltas for options it can match against your saved definition. Unknown or tampered selections add zero, and a line is never charged below zero. The total is always what you configured.

How many groups and options can I add? Up to 10 groups per product, 50 options per group, and each name or label can be up to 40 characters. These limits are generous — they exist to keep the storefront usable and to prevent abuse, not to constrain real catalogues.

Will the customer's choice show on the order? Yes. The chosen options are captured with the order and shown under each item as a short line like "Size: M · Color: Red" — in the cart, in the order confirmation, and in your Store orders screen — so you always know precisely what to prepare or ship.

Can I make some options free and others paid? Absolutely. Leave the ± price blank for the standard options and add a value only to the ones that change the price. For example a base T-shirt with Size S/M/L all the same price, but an XL at +3. Mix free and priced options freely within the same group.

What happens if I remove all variants from a product? It instantly becomes a normal single-price product again on the next save — the picker disappears from the storefront and the product is sold at its base price. Existing past orders keep the variant text they captured at purchase time as a permanent record.