Configuration Generator Tool
Visually build your product customizer and generate guaranteed-valid JSON for your Shopify metafields.
Global Settings
The top-level group for your metafields.
Display & Behavior
Control how the customizer is presented. The value you generate here will override your theme's global 'Display Mode' setting for the specific product you apply it to.
Force this specific product to display in a certain mode, ignoring the general setting in your theme editor.
Core Components & Options
Define the customizable parts of your product. Each component represents a choice for the customer (e.g., Fabric, Color, Engraving).
No components yet. Click "Add Component" to start building!
-
The customer-facing name for this component.
Options for
Default Selections
Set the options that are pre-selected when a customer first views the product.
Add some components with options to set their default selections.
Image & Visuals Configuration
Configure the live product preview, from simple image swapping to complex multi-layer canvases.
Choose how preview images are generated.
Add camera angles like "Front", "Side". Add `default: true` to one to set the initial view. You can also add an SVG icon.
No views defined. Add a view to enable multi-angle previews.
Simple Mode Settings
Defines the structure of your image keys (e.g., `{view}-{fabric}-{hardware}`). Checkbox components are ignored.
Image to show if no specific match is found.
The static background image for your canvas.
Use the format `component_key:option_handle` (e.g., `fabric:premium-leather`).
Initial View
Define a specific starting image or canvas that appears before the customer makes any selections.
This is perfect for "Build-a-Box" products (showing an empty box) or for displaying a product silhouette before customization begins.
Logic & Add-ons
Create smart rules to guide customer choices and offer optional extras.
Conditional Rules
Show or hide options based on other selections. For example: WHEN 'Fabric' is 'Suede', THEN DISABLE 'Hardware' is 'Silver'.
No rules defined.
WHEN
THEN DISABLE
Add-ons
Offer optional extras like text monograms, gift wrapping, or separate accessory products.
No add-ons defined.
Advanced Feature Configuration
Enable and configure Specifikit's powerful optional features like 360° View and AR Preview.
Map option handles to color codes. This is only needed for color swatches; image swatches are configured in the component options.
Use `{frame_number}` as a placeholder for the frame number.
URL for the 3D model file for Android/Web.
URL for the 3D model file for iOS/iPadOS devices.
Generated Metafields
Ready to Generate
Add a component in the builder panel to see your metafields appear here.