TemplatesProduct configurator template

Let customers build exactly what they want and see it instantly.

Visual Product Configurator Template. An Interactive Configuration and Pricing Template for Physical Products

  • Shell color swatches and material toggles update the product image in real time as selections change.
  • Quantity input drives live price calculation with configurable bulk discount thresholds and messaging.
  • Save configuration and direct email CTAs cover both self-serve and assisted purchase flows.
Sign in to installLive preview

About this template

A visual product configurator template that lets customers build their ideal product and see the result update live before reaching out or placing an order. Built around a physical product use case, the layout and interaction pattern are fully adaptable to any configurable product.

The template includes:

  • Live product image that updates visually as the customer changes colour and material selections
  • Colour swatch selector displaying named colour options as clickable swatches with the active selection labelled
  • Base material toggle for switching between two material options, with conditional sub-options that appear based on the active selection
  • Quantity input with a configurable bulk discount rule and helper text displayed below the field
  • Live price display showing total price and per-unit price updating in real time as quantity and options change
  • Save configuration CTA allowing customers to store or submit their chosen specification
  • Email us with questions CTA as a secondary action for customers who need assistance before committing
  • Product description block for positioning copy and key product details alongside the configurator

Instructions

Follow these steps to make the template your own:

  1. Replace the product name and description Update the headline and description block to reflect your actual product
  2. Update the product image Replace the placeholder image and connect it to your colour and material variants
  3. Configure colour swatches Add, remove, or rename the colour options and link each to the correct product image
  4. Set material options Update the material toggle labels and configure any conditional sub-options that appear per material
  5. Update pricing Set the base per-unit price and connect it to the quantity and option logic
  6. Configure the bulk discount rule Update the quantity threshold, discount percentage, and helper text to match your pricing policy
  7. Update the save configuration action Connect the button to your order form, CRM, or quoting flow
  8. Update the email CTA Replace the email address or link with your actual sales or support contact
  9. Match your branding Update colours, fonts, and button styles to align with your visual identity
  10. Test all variant combinations Verify the product image, price, and conditional options update correctly across every selection before going live

Confirm