# figma → shopify

Figma to Shopify, Online Store 2.0.

Send a Figma file. Ship as Shopify Online Store 2.0 sections and templates: Liquid with JSON schema, section groups, app-block ready, WCAG 2.2 AA. Dawn-derived or built on your existing theme. Tokens ported from Figma variables to settings_schema.json. Locofy Pro on the first pass, Liquid layer hand-written.

Get a Figma-to-Shopify quote

Shopify theme editor showing custom sections built from a Figma design.

Dev-to-dev.

Online Store 2.0 changed the game: JSON templates, section groups, app blocks. We build sections a merchant can rearrange in the theme editor without breaking anything. No page-builder apps, no {% include %} spaghetti, no locked-in third-party sections.

What you get.

Custom Liquid sections with proper JSON schema (blocks, settings, presets).
Section groups for header + footer, editor-friendly.
App-block support in every section that can host it.
Tokens ported to settings_schema.json so the merchant can tune colors + type without code.
Theme deployed via Shopify CLI (shopify theme push). Handover as a git repo + .zip.
Core Web Vitals green: lazy-loading, WebP, preloaded fonts.

Liquid section with JSON schema. Editor-friendly, no code required to tune.

{% comment %} sections/hero-split.liquid {% endcomment %}
<section class="hero hero--{{ section.settings.variant }}" aria-labelledby="hero-{{ section.id }}">
  <div class="hero__inner container">
    <p class="hero__eyebrow mono"># {{ section.settings.eyebrow }}</p>
    <h1 id="hero-{{ section.id }}" class="hero__title">{{ section.settings.title }}</h1>
    <a href="{{ section.settings.cta_url }}" class="btn btn--primary">
      {{ section.settings.cta_label }}
    </a>
  </div>
</section>

{% schema %}
{
  "name": "Hero split",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow" },
    { "type": "text", "id": "title", "label": "Title" },
    { "type": "url", "id": "cta_url", "label": "CTA link" },
    { "type": "text", "id": "cta_label", "label": "CTA label" }
  ],
  "presets": [{ "name": "Hero split" }]
}
{% endschema %}

Tool used: Locofy Pro (60% CSS + layout kept), Liquid + schema hand-written. No page-builder apps.

Turnaround and price.

Single Shopify section: $449, 5d.
Section pack (5 sections): $1,890, 10d.
Full Dawn-derived theme, 6 templates: $4,490, 21d.

Full pricing table. 14-day fix window on every ticket.

Related.

# get a quote

Send a Figma. We'll quote in 24 hours.

Paste a share link. Add a line about the output stack (React, HTML, WordPress). We'll reply with an indicative price and a start date.