# Digital Product Variants

**Category:** Storefront  ·  **Min plan:** Pro  ·  **Slug:** `digital-product`  ·  **Theme:** `digital` only

Transforms the variant selector on Digital theme product pages into a sleek 2-step accordion UI. Shows final price on each option. One option highlighted at a time across all variant groups.

## Features

* 2-step accordion variant selector
* Final price shown per option (base + adjustment)
* One option highlighted at a time across all variant groups. An option picked earlier in another group is not removed from the order: it stays in the cart with its price adjustment, unless no combination in stock pairs it with the new pick.
* Smooth CSS animations matching Digital theme
* Keyboard accessible (Enter/Space to select)
* Zero product setup needed

## Why use it

The default storefront variant picker is fine for fashion-style stores, but on the **Digital** theme, which is built for digital goods and services, the accordion layout reads more like a configurator than a form. Customers see the final price update on each option as they pick.

## How to activate

1. Make sure your store uses the **Digital** theme ([`/dashboard/themes`](https://dzbuild.com/dashboard/themes)). The add-on is theme-locked. Digital is the theme for digital goods only: switching to it puts the whole store in digital mode and pauses the add-ons made for physical products, so do not switch a store that ships parcels just for this accordion (see [Storefront themes overview](https://dzbuild.com/docs/storefront/themes-overview.md)).
2. Open **Dashboard → Add-ons** at [`/dashboard/addons`](https://dzbuild.com/dashboard/addons).
3. Find **Digital Product Variants** under *Storefront*.
4. Click **Activate** (Pro plan required).

There is nothing to configure on the products themselves — your existing variant groups and options render in the accordion automatically.

Activation does not currently control this add-on

This is a known defect. The accordion renders on **every** Digital-theme product page that has variants, whether or not the add-on was activated — and deactivating it does not remove it. Until the activation gate is added, treat the accordion as the Digital theme's variant picker rather than something you switch on.

## What it looks like

* Each variant group becomes an accordion section. Only the first group opens automatically when the page loads.
* Tapping a group expands it. The customer picks one option and the section collapses — nothing else opens, so the customer taps the next group's header themselves.
* Each option's row shows: a colour dot (colour groups only), the option name, and the **final price** = base product price + option `price_adjustment`. The accordion never renders option thumbnails.
* Options that are out of stock stay visible with a sold-out label, but cannot be selected or keyboard-focused.
* Options disabled on the product are not shown at all, and a group whose options are all disabled is skipped entirely.
* The duplicate variant dropdowns and swatches in the Digital theme's sidebar purchase card are hidden while the accordion is active. Quantity, price and the buy button stay where they are.

## Validation behaviour

The **Add to cart** button, the buy-now button and the order form's submit button are always clickable. When one is clicked, the add-on only checks that **at least one option has been picked anywhere**; the per-group *Required* flags are bypassed. If nothing is selected, the selector is highlighted in red, the first unselected group opens and the page scrolls to it.

## Interaction with Cascading Variants

On a product that uses [Cascading Variants](https://dzbuild.com/docs/addons/cascading-variants.md), the cascading child groups are left out of the accordion, and because the accordion hides the standard picker, customers cannot see or pick them. Avoid cascading groups on Digital-theme products. If every group on the product is a cascading child, the accordion does not render at all and the standard picker stays.

## Tips

* Set `price_adjustment` correctly — it is the **delta** from the base price, not the absolute price. The pill shows base + adjustment.

## Theme requirement

This add-on only renders on the Digital theme. If you switch to `bloom`, `brico`, `prestige`, `promobi`, `showcase` or `starter`, the storefront falls back to the default variant picker until you re-enable Digital.