Welcome to the Documentation Hub.
Whether you're evaluating Specifikit or are a new customer, you're in the right place. This guide provides an overview of the installation process and core concepts. **The complete, step-by-step technical documentation is included with your purchase. ** For hands-on help, every license includes free professional installation.
Getting Started
An overview of the Specifikit system, how it works, and the main installation steps.
Core Concepts
Understand the key building blocks like Components, Options, and Image Logic.
Support & Free Installation
Have us do the work for you or get help from our dedicated support team.
Getting Started: An Overview
Specifikit is a professional code solution, not a typical Shopify App. It installs directly into your theme, guaranteeing maximum performance and zero monthly fees. The entire system is managed through Shopify's native "Custom Data" (Metafields), meaning once installed, you never have to edit theme code again.
The process is straightforward and can be broken down into three main phases:
Phase 1
File Installation
This is a one-time setup process where the necessary files are added to your theme's code.
-
1
Add System Files: The core JavaScript, CSS, and Liquid files from your purchase are uploaded into the corresponding assets, sections, and snippets folders in your theme.
-
2
Create the Product Template: A new product.specifikit.json template is created. This tells Shopify which products should use the customizer interface.
-
3
Integrate with the Cart: A single line of code is added to your cart template to ensure customization details appear correctly.
-
4
Add Language Definitions: The text labels used throughout the customizer (e.g., "Your Configuration," "Save Design") are merged into your theme's locale file.
Don't Want to Do This Yourself? We'll Do It For You.
Every purchase of Specifikit includes our complimentary white-glove installation service. Our team will handle this entire phase for you, ensuring a perfect setup on your store.
Phase 2
Metafield Setup
This is the most important part of the setup. You need to tell Shopify what "secret notes" (Metafields) Specifikit will use to store its configurations.
-
1
Navigate to Custom Data: In your Shopify Admin, go to Settings > Custom data.
-
2
Select Products: Choose the "Products" section.
-
3
Add Definitions: You will click "Add definition" and create a set of specific metafields. The names and types must match our requirements exactly.
The full list of required definitions is provided in the Specifikit_Metafields_List.txt file within your purchased .zip package. This includes definitions for core settings, image configurations, conditional rules, and advanced features.
Phase 3
Product Configuration
Once the definitions are created, you can start building!
-
1
Assign the Template: Go to any product in your Shopify Admin and change its "Theme template" to product.specifikit.
-
2
Fill the Metafields: Scroll to the bottom of the product page to find the Metafields section. Here you will paste in JSON code to define your components, options, pricing, and image logic.
Use the Generator Tool!
You don't need to write a single line of this configuration code by hand. Our free, public Configuration Generator Tool provides a visual interface for building your product and generates the exact JSON you need to copy and paste.
Core Concepts
Understanding these building blocks will help you get the most out of Specifikit. The full technical details and code examples for each are in the documentation included with your purchase.
Components
What they are: The specific choices within a Component. For a "Color" component, the options might be "Red," "Blue," and "Green."
Key Properties:
- label: The name of the choice (e.g., "Premium Leather").
- handle: A code-friendly ID used for image naming (e.g., premium-leather).
- price_modifier: The extra cost to add for this option.
Options
What they are: The specific choices within a Component. For a "Color" component, the options might be "Red," "Blue," and "Green."
Key Properties:
- label: The name of the choice (e.g., "Premium Leather").
- handle: A code-friendly ID used for image naming (e.g., premium-leather).
- price_modifier: The extra cost to add for this option.
Image Logic (Simple Mode)
What it is: The system for swapping a single, flat product image based on selections.
How it works: You define a key_template (e.g., {fabric}-{color}). Specifikit builds a key like leather-red and looks for a matching image URL in your images map.
Image Logic (Canvas Mode)
What it is: The advanced system for stacking multiple transparent PNG images to create a composite visual.
How it works: You provide a base image (e.g., an empty gift box) and define layers for each option (e.g., a transparent PNG of a chocolate bar). Specifikit adds and removes layers as the customer makes selections.
Conditional Rules
What they are: "If/Then" logic to create a smart, guided experience.
Example: "WHEN the 'Frame Size' is 'Large', THEN DISABLE the 'Material' option 'Oak'." This prevents customers from ordering impossible combinations.
Advanced Features
What they are: Powerful, optional modules you can enable per-product.
Includes: 360° View, Augmented Reality (AR), Save & Share Designs, Price Breakdown, and more. Each is configured via its own dedicated metafield.
Support & Next Steps
We are committed to ensuring you have a successful experience with Specifikit.
Purchased Specifikit? Access Your Full Resources.
Your download package contains a folder named /Documentation with multi-page HTML guides. These files include the full, unabridged code examples, step-by-step tutorials, and advanced recipes needed for a complete setup.