ShopFront Documentation

ShopFront is an ecommerce design system built for agencies, brands, and teams who need speed, consistency, and full AI integration across every phase of design. It's aligned to Shopify — covering Dawn, Horizon, and checkout patterns — but works equally well for custom builds, headless architecture, and other ecommerce platforms.

This documentation covers how to set up your files, connect the plugin, run skills, and structure your system for teams of any size — from a single-brand freelance project to an enterprise multi-brand operation.

What's included

Your license gives you access to the full system — design files, plugin access, a dedicated skill server, and AI-ready documentation.

Prerequisites

Before working with ShopFront, you'll need:

• Figma (Professional or Organization plan) — required to publish files as libraries
• ShopFront access key — issued when your license is activated
• ShopFront plugin — installed from the Figma Community or provided directly
• AI API key (optional) — to use built-in AI chat (bring your own OpenAI / Anthropic key)

Access & setup

Once your license is activated you'll receive an access key. This key ties the plugin to your dedicated server and unlocks your skill set.

Entering your access key

1. Open the ShopFront plugin inside Figma
2. Navigate to Settings → Access
3. Paste your access key and confirm
4. The plugin will authenticate and connect to your server

Verifying the connection

Once connected, the plugin header will show your server status and version. Skills and documentation will populate automatically from your server.

Connecting your file

Your license is tied to one Figma file — your master design system file. All other files in your setup pull from this file as a library.

The plugin connects to this master file. Any updates to the system — new components, token changes, skill additions — live here first and propagate to all linked files through Figma's standard library sync.

Publishing as a library

To share components, styles, and variables across your team's working files, publish your master file as a Figma library.

1. In your master file, go to Assets panel → Libraries
2. Click Publish and confirm
3. Team members can then enable the library from their own files via the same panel

Unlimited designers can pull from the library under a single license — the restriction is on the master file itself, not on who consumes it.

Foundations file

The source of truth. The foundations file contains baseline spacing, radius, color, surface, type, and layout rules that all other elements abide by.

In most setups, this is your Master file itself. For enterprise teams with multiple brands, you may separate foundations into its own standalone file that brand files extend.

What lives here

• Design tokens (color primitives, spacing scale, radius, elevation)
• Typography scale and styles
• Surface and state token mappings
• Style guides — easily updated by AI tools

Access rules

• Read-only for most contributors
• Only the system owner makes intentional, versioned edits
• No direct modification by brand or product teams

Master components

Houses all globally shared components and patterns. Every element that will be used across the UI of multiple brands lives here — or is promoted here once approved.

What lives here

• Atomic elements — buttons, inputs, badges, icons, quantity controllers, review stars
• Shared modules — product cards, header patterns, cart drawers
• Page templates and standardized layout flows
• CRO and experiment patterns (reconciled and approved)

Governance

All UX changes to shared components flow through this file. Brand-level teams cannot fork or modify master components — changes must be proposed and promoted through the contribution workflow.

Brand libraries

Each brand gets its own library file. Brand libraries consume from the foundations and master components, then apply brand-specific styles, tokens, and extensions.

Rules

• May override only approved alias token layers
• Must map all tokens to core foundation primitives
• Brand-specific components live here — not in the master file
• No direct modification of master components

Working files

Day-to-day product and feature work happens in working files. These consume from the library stack above but have no publishing rights and cannot fork system components.

Rules

• Read-only access to system libraries
• No publishing rights
• All system-impacting changes routed upstream
• New patterns that serve the broader system are promoted to the master file when approved

Sandbox

An innovation and experimentation space. Used for testing new system concepts, cross-brand explorations, and CRO experiments before they're validated and promoted.

Plugin overview

The ShopFront plugin is the operating layer — a theme controller, skill runner, AI chat, and CLI in a single Figma panel.

Access key

Your access key is the credential that ties the plugin to your dedicated server. One key is issued per license — it can be used by an unlimited number of designers but cannot be recovered if lost, so store it somewhere safe.

All plugin functionality, AI usage, and skill server access require the key to be entered via the plugin. Any designer working in your Figma file can use the same key — there's no per-seat restriction.

Theme controller

Apply complete brand themes across the system from the Theme tab. The controller maps brand tokens to the system's alias layer — swapping color schemes, typography, radius, and spacing presets simultaneously.

Use it during initial brand setup or when switching between brand contexts in a multi-brand file.

Skills

Skills are repeatable, named operations that automate specific design system tasks — from naming conventions to page assembly.

Running a skill

1. Open the plugin and go to the Skills tab
2. Browse or search available skills
3. Select a skill and configure any required parameters
4. Click Run — the skill executes against your current selection or file

Adding custom skills

Custom skills can be pushed to your server via the CLI or plugin. Skills live on your server and are only available to files connected via your access key.

shopfront skill add ./my-skill.json
shopfront skill list
shopfront run my-skill --scope=page

Common built-in skills

• Apply metaobject naming — maps component names to Shopify metaobject field naming conventions
• Enforce token usage — detects hardcoded values and replaces them with the correct tokens
• Assemble landing page — builds a page from section templates based on a brief
• Export scheme JSON — generates settings_schema output for Shopify themes

AI integration

ShopFront is designed to work with AI tools at every level. You can connect via the plugin's built-in chat, or use an external AI tool connected to your skill server.

Figma MCP Console

For the full power of AI-driven design, connect using the Figma MCP Console or a compatible MCP client. This gives your AI tool direct, structured access to the skill server — reading documentation, running skills, and operating the design system programmatically.

Built-in chat

The plugin's Chat tab connects via your own API key (OpenAI or Anthropic). It reads from your skill server — same documentation, same skills — and can execute skills through conversation. Useful for on-the-fly guidance without leaving Figma.

CLI

The ShopFront CLI gives power users and AI agents the same access as the plugin, without needing the Figma UI. Useful for scripting, automation, and CI workflows.

# Authenticate
shopfront auth --key=YOUR_ACCESS_KEY

# List available skills
shopfront skill list

# Run a skill
shopfront run apply-metaobject-naming --scope=collection

# Push a custom skill
shopfront skill add ./path/to/skill.json

License overview

ShopFront is available under two license types — Brand and Agency. Each has distinct access, pricing, and obligations.

Your license covers the current version at time of purchase. This is not a lifetime updates agreement — future versions are separate releases. Previous license holders may receive reduced pricing on future releases.

License types at a glance

Brand license

For brands purchasing directly. One license per digital property. No approval process required.

The Brand License grants a single organization the right to use ShopFront for one Shopify storefront — whether that's a new build, a redesign, or ongoing optimization and CRO work.

Access key

Each brand license includes one access key. This key is issued once — keep it safe, as it cannot be recovered if lost. It can be used by an unlimited number of designers on your team.

What's included

• 1 access key — unlimited designers
• Full access to the Master design system file
• Checkout + Account standalone library
• Plugin access with dedicated skill server
• Access to updates for the purchased version

Restrictions

• Single digital property only
• Cannot be sublicensed or transferred
• No reverse engineering or decompiling
• No resale or redistribution in any form
• Cannot be used on Figma accounts with AI training opted in

Pricing

Multi-brand and enterprise discounts available. Pricing confirmed at point of sale.

Agency license

For select approved agency partners. Requires a signed contract and ongoing compliance with usage terms.

The Agency License allows approved studios and agencies to deploy ShopFront across client projects at a significantly reduced per-client rate. It is not available for general purchase — partners are evaluated and approved before a contract is issued. There are no annual fees.

What's permitted

• Deploying ShopFront for client projects at a per-client license rate
• Sublicensing to clients for their individual use
• White-labeling by written agreement only — must be discussed and approved case by case

Pricing

Agency licenses are priced per client project at a reduced rate compared to the Brand license. No annual subscription or renewal fees apply. Pricing is confirmed at the time your agency contract is issued.

Restrictions

• Sublicensees (clients) may not further sublicense
• No resale of ShopFront or its derivatives in any form
• No reverse engineering, decompiling, or rebuilding of system components
• Non-compete: you may not sell a product that competes with ShopFront, nor allow a competitor access to the system
• No white-labeling without a prior written agreement
• Agency is responsible for ensuring all sublicensees comply with these terms
• Cannot be used on Figma accounts with AI training opted in

Terms

The following terms apply to all ShopFront licenses. The full Software License Agreement is provided at time of sale.

No competition

During the term of this license you agree not to become a competitor of Vizzacco Design, sell a product that competes with ShopFront, or allow a competitor access to ShopFront.

Intellectual property

Vizzacco Design owns ShopFront and all related intellectual property. You may not modify (unless specifically permitted), decompile, or reverse engineer ShopFront, or permit others to do so.

No resale or white-labeling

ShopFront may not be resold, re-skinned, re-themed, broken apart, or redistributed in any form without the correct licensing agreement. Derivative products (including theme files) are not permitted. White-labeling requires a separate written agreement.

AI training

ShopFront may not be used on Figma accounts where AI training has been opted in. We confirm your opt-out of Figma's AI data training prior to file transfer.

Disclosure

You agree to immediately notify Vizzacco Design of any unauthorized use or disclosure of ShopFront or related intellectual property, and to cooperate in protecting it.

Indemnity

You agree to indemnify Vizzacco Design for any claims arising out of your use of ShopFront or the conduct of your sublicensees.

Limitation of liability

Vizzacco Design's liability is limited to a refund of the license fee. Vizzacco Design may elect to modify the software, provide an alternative solution, or issue a refund at their sole discretion.

Single brand setup

The simplest configuration. One master file, one brand, one team. Suitable for most agency project work and direct-to-consumer brands.

Agency setup

Agencies buy a separate license per client project. Each project gets its own Master file, access key, and skill server — fully isolated from other client work.

Recommended structure per project

• One Master file (client owns this on handoff)
• Checkout file connected as standalone library
• Working files for each UX pod or sprint team
• Sandbox file for experimentation and client reviews

Enterprise setup

For multi-brand systems, centralized design leadership, and organizations with multiple product or UX teams.

Who this is for

• Multiple UX pods or product teams
• Centralized design leadership
• Engineering orgs with multiple feature teams
• Brand and creative teams
• Regional or international teams
• Multiple partner agencies

Recommended file architecture

Maintenance focus

• Dedicated design system operations team
• Governance committee for system changes
• Quarterly system releases
• Multi-brand token architecture
• Documentation required for every extension

Version control

ShopFront follows an intentional versioning model. Changes to foundations and master components are deliberate, documented, and communicated before publishing.

Change types

Contribution

Anyone can propose changes. Not everyone can merge them. Contribution follows a clear upstream routing path based on impact.

How to propose a change

1. Build in a working file or sandbox
2. Document the pattern, its usage context, and rationale
3. Flag to the relevant system owner or governance lead
4. Wait for review and approval before promotion

Anything net-new that gets approved gets promoted upward as needed. If a new pattern serves the enterprise, it goes into the master component library. If it's a brand-level change, the brand library or foundations file gets updated.

Promotion workflow

Promotion is the process of moving an approved pattern from a working context into the shared system.

Brand marketing teams and partners have read-only and pull-down access to the approved library stack. This guards brand decisions while allowing teams to build with what has been approved.