Of all the non-gaming playables, the configurator has the clearest logic. It does not invent an experience for the brand; it lifts the decisions the product page already asks for (colour, size, trim, bundle) and hands them to the viewer inside the ad. When it works, the viewer arrives at the store or the site having already built the thing they want, and the only question left is whether to buy it.
Whether a configurator suits your category is covered in the non-gaming playables guide. This one is about building a good one: which options to expose, which control fits each decision, how to keep the picture and the price honest, and how to stop the finished build being thrown away at the click.
Choose the two decisions that sell
The product page may offer nine options. The ad should offer two, occasionally three. Choose them by two tests: the option has to change the picture visibly, and it has to be a decision buyers actually hesitate over. Colour passes both for almost every physical product, which is why nearly every good configurator starts with it. The second is usually size, material, bundle or plan, whichever one your own sales data says people change their minds about.
Keep each decision to four to six options, and open on the best-selling configuration rather than the first item in the catalogue. The default is what most viewers see without touching anything, so it does more selling than any option behind it.
Match the control to the decision
A configurator lives or dies on its controls, and each kind of decision has one that fits.
- Swatches or tiles for discrete, visual choices: colour, finish, pattern. One tap, instant result, every option visible at once.
- A toggle for a binary add-on: gift wrap, extended warranty, the sport pack. On or off, with the picture and the price changing as it flips.
- A stepper for small whole numbers: quantity, seats, rooms, people in the household. Plus and minus buttons beat any other control for a range of one to eight.
- A slider for continuous ranges the viewer estimates rather than knows exactly: a budget, a monthly amount, a size in centimetres. Bound it to what is actually on offer, never wider.
Two mistakes recur. A slider used for three discrete options makes the viewer hunt for positions that snap; use tiles. And any control that hides its options, such as a dropdown, removes the thing a configurator exists to show. If an option is worth offering, it is worth being visible.
Every tap must change the picture
The feedback loop is the whole mechanic. A tap on a swatch should change the product in the same frame, not after a fade, not after a spinner. If the viewer cannot see the consequence of a choice, it stops feeling like a choice.
That makes the asset plan the main production decision. One photograph per colourway is the most convincing and the most expensive in bytes: six colours in two orientations is twelve images before anything else is added. Tinting a single neutral render is far lighter, but it only works for parts of a product that really are one flat colour: tint a photograph of leather and it looks like a filter. The usual compromise is photographs for the hero part and tinting for trims and accents, with every image exported at about twice its on-canvas size and converted to WebP.
Price is a formula, not a label
Showing a price turns a configurator into a quote, which is more persuasive and more dangerous. The safe way to build it is to compute the price rather than write it: a base price plus each option's cost, formatted once and displayed wherever it is needed. The alternative, a hand-written price label for every combination, grows multiplicatively. Six colours by three sizes is eighteen labels, and one of them will be wrong on the day prices change.
The price in the ad must be the price on the page
A viewer who configures a product at one price and lands on a page quoting another has been misled, whatever the reason. Use the same price source as the landing page, say whether the figure includes tax and delivery in the markets you serve, and put an end date on any promotional price. A creative quoting last month's price is still running somewhere after the price changed.
End on the build, not the brand
The last screen should show exactly what the viewer made (the product in their colour and size, a one-line spec, the price) with a call to action about that build: see it in your size, check availability, order this one. Copy that reuses the choices is the most specific copy there is: Midnight blue · size 9 · £89. A generic Shop now after a configurator throws away the most valuable thing the ad produced.
Hand the build to the landing page
The configured product should survive the click. For a website destination that is straightforward: the choices append as query parameters, colour=midnight&size=9, and the product page opens pre-selected. For an app, the choices have to travel on a measurement partner's tracking link, since store URLs cannot carry parameters, and on networks that choose the click destination themselves nothing can travel at all. The deep linking guide has the detail by network.
3D, or not
A rotating 3D model is the obvious ambition and rarely the right one. Real-time 3D costs a renderer, geometry and textures against a size cap built for 2D, plus load time on the low-end devices where volume is cheapest. A turntable made from a short sequence of pre-rendered frames gives most of the effect (the product turning under the viewer's finger) for a fraction of the cost and none of the device risk. Reserve true 3D for products whose shape is the selling point, and read the WebGL guide before committing.
Where it earns its cost
- Footwear and apparel with several colourways of one best-seller.
- Furniture, where fabric and finish change the product more than the shape does.
- Cars, with trim and paint: the configurator brands already run on their own sites, compressed.
- Phones, cases and accessories, where the colour is most of the decision.
- Cosmetics shades and meal kits, where the viewer builds a personal selection.
Building one in Playable Ads Maker
The Configurator interactive module is the fastest start: pick a colour, a trim and a size and watch the product update, re-skinned with your own images. Configurator – The Atelier Chair shows it running. To build one from parts, Slider, Toggle and Stepper objects each write straight to a variable, a Swap Image action changes the picture, a formula computes the price, and {tokens} drop the choices into any line of copy. Export with a web destination and the same variables can be carried into the click-through URL.
Create playable end cards in minutes—no code required.
Open Playable Ads Maker