Product

The anatomy of a product configurator

Real-time preview, honest pricing, and shareable state that turns browsers into buyers

January 22, 2025

By Manweba

A configurator works when choosing feels like making something—not filling a form. Instant preview, clear price deltas, and a path to save or share are the spine. Everything else is optional complexity.

Preview that keeps up

Every meaningful choice should update the product view immediately. Delay turns creation into paperwork.

Animate state changes just enough to preserve continuity; do not put a spinner between “blue” and blue.

Live preview + running total

jsx

1import { useMemo, useState } from 'react';
2import { motion, AnimatePresence } from 'motion/react';
3
4const colors = {
5  midnight: { value: '#1e293b', delta: 0 },
6  ocean: { value: '#0ea5e9', delta: 20 },
7  forest: { value: '#10b981', delta: 20 },
8};
9
10const sizes = {
11  small: -30,
12  medium: 0,
13  large: 30,
14};
15
16export function ProductConfigurator() {
17  const [color, setColor] = useState('midnight');
18  const [size, setSize] = useState('medium');
19
20  const price = useMemo(
21    () =>=299 + colors[color].delta + sizes[size],
22    [color, size],
23  );
24
25  return (
26    <div className="grid gap-10 lg:grid-cols-2">
27      <div className="relative aspect-square overflow-hidden rounded-3xl">
28        <AnimatePresence mode="wait">
29          <motion.div
30            key={color + size}
31            initial={{ opacity: 0 }}
32            animate={{ opacity: 1 }}
33            exit={{ opacity: 0 }}
34            transition={{ duration: 0.25 }}
35            className="absolute inset-0"
36            style={{ backgroundColor: colors[color].value }}
37          />
38        </AnimatePresence>
39      </div>
40
41      <div className="space-y-6">
42        <p className="text-4xl">${price}</p>
43        <div className="flex gap-3">
44          {Object.entries(colors).map(([name, swatch]) =>=(
45            <button
46              key={name}
47              type="button"
48              onClick={() =>=setColor(name)}
49              className="h-12 w-12 rounded-full border border-white/30"
50              style={{ backgroundColor: swatch.value }}
51              aria-label={name}
52            />
53          ))}
54        </div>
55        <div className="flex gap-2">
56          {Object.keys(sizes).map((name) =>=(
57            <button key={name} type="button" onClick={() =>=setSize(name)}>
58              {name}
59            </button>
60          ))}
61        </div>
62      </div>
63    </div>
64  );
65}

Loading code…

Reveal options in layers

Lead with the decisions that change the product most (silhouette, material, color). Park advanced toggles behind “customize further” so first-time users are not negotiating twenty controls.

Price in the open

Show the running total and the delta on each option (+€20, −€30). Surprise totals at checkout kill trust; visible math builds it.

Save and share the exact build

Encode configuration in the URL so a shared link restores the same product. That turns personalization into distribution—colleagues and clients open the same artifact.

URL-backed configuration

jsx

1'use client';
2
3import { useCallback, useState } from 'react';
4import { usePathname, useRouter, useSearchParams } from 'next/navigation';
5
6export function ShareableConfigurator({ Options }) {
7  const searchParams = useSearchParams();
8  const router = useRouter();
9  const pathname = usePathname();
10
11  const [config, setConfig] = useState(() =>=({
12    color: searchParams.get('color') ???'midnight',
13    size: searchParams.get('size') ???'medium',
14  }));
15
16  const updateConfig = useCallback(
17    (next) =>={
18      setConfig(next);
19      const params = new URLSearchParams();
20      Object.entries(next).forEach(([key, value]) =>={
21        params.set(key, String(value));
22      });
23      router.replace(`${pathname}?${params.toString()}`, { scroll: false });
24    },
25    [pathname, router],
26  );
27
28  const share = async () =>={
29    const url = window.location.href;
30    if (navigator.share) {
31      await navigator.share({ title: 'My configuration', url });
32      return;
33    }
34    await navigator.clipboard.writeText(url);
35  };
36
37  return (
38    <div>
39      <Options config={config} onChange={updateConfig} />
40      <button type="button" onClick={share}>
41        Share this build
42      </button>
43    </div>
44  );
45}

Loading code…

Final thoughts

Ship the spine first: live preview, honest pricing, progressive options, shareable state. Grow complexity only where users ask for it—after they already feel ownership of the build.

Product

Website SEO that actually moves leads (not just rankings)

Structure, speed, intent pages, and tracking—SEO as a growth system, not a checklist theater

Read Article

Product

Client portal vs shared Drive: when custom software is worth it

Auth, roles, and workflows that turn scattered files into a product your clients trust

Read Article

Ready to build something this considered?

Browse services Start a project

Preview that keeps up

Reveal options in layers

Price in the open

Save and share the exact build

Final thoughts

Related Articles

Website SEO that actually moves leads (not just rankings)

Client portal vs shared Drive: when custom software is worth it