{% schema %} { "name": "Hero Banner", "settings": [ { "type": "text", "id": "heading" }, { "type": "richtext", "id": "body" }, { "type": "url", "id": "cta_link" } ], "presets": [{ "name": "Hero" }] } {% endschema %} {% assign heading = section.settings.heading %} {% if heading != blank %} <section class="hero" data-section="{{ section.id }}"> <h1>{{ heading | escape }}</h1> {% if section.settings.body != blank %} {{ section.settings.body }} {% endif %} </section> {% endif %} {% for product in collection.products limit: 12 %} {% render 'product-card', product: product, show_vendor: section.settings.show_vendor %} {% endfor %} {{ 'theme.css' | asset_url | stylesheet_tag }} {{ 'application.js' | asset_url | script_tag }} {% liquid assign featured = collections['featured'] for item in featured.products render 'card', product: item endfor %} <style> :root { --color-primary: #0c0c0c; --color-accent: #28CD56; --font-heading: 'Geist', sans-serif; } .hero { min-height: 100vh; display: grid; } .hero h1 { font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: -0.02em; } </style> {% comment %} Synapse AI — five agents, one workflow. Code · Design · QA · Deploy · Monitor {% endcomment %} {% schema %} { "name": "Hero Banner", "settings": [ { "type": "text", "id": "heading" }, { "type": "richtext", "id": "body" }, { "type": "url", "id": "cta_link" } ], "presets": [{ "name": "Hero" }] } {% endschema %} {% assign heading = section.settings.heading %} {% if heading != blank %} <section class="hero" data-section="{{ section.id }}"> <h1>{{ heading | escape }}</h1> {% if section.settings.body != blank %} {{ section.settings.body }} {% endif %} </section> {% endif %} {% for product in collection.products limit: 12 %} {% render 'product-card', product: product, show_vendor: section.settings.show_vendor %} {% endfor %} {{ 'theme.css' | asset_url | stylesheet_tag }} {{ 'application.js' | asset_url | script_tag }} {% liquid assign featured = collections['featured'] for item in featured.products render 'card', product: item endfor %} <style> :root { --color-primary: #0c0c0c; --color-accent: #28CD56; --font-heading: 'Geist', sans-serif; } .hero { min-height: 100vh; display: grid; } .hero h1 { font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: -0.02em; } </style> {% comment %} Synapse AI — five agents, one workflow. Code · Design · QA · Deploy · Monitor {% endcomment %} {% schema %} { "name": "Hero Banner", "settings": [ { "type": "text", "id": "heading" }, { "type": "richtext", "id": "body" }, { "type": "url", "id": "cta_link" } ], "presets": [{ "name": "Hero" }] } {% endschema %} {% assign heading = section.settings.heading %} {% if heading != blank %} <section class="hero" data-section="{{ section.id }}"> <h1>{{ heading | escape }}</h1> {% if section.settings.body != blank %} {{ section.settings.body }} {% endif %} </section> {% endif %} {% for product in collection.products limit: 12 %} {% render 'product-card', product: product, show_vendor: section.settings.show_vendor %} {% endfor %} {{ 'theme.css' | asset_url | stylesheet_tag }} {{ 'application.js' | asset_url | script_tag }} {% liquid assign featured = collections['featured'] for item in featured.products render 'card', product: item endfor %} <style> :root { --color-primary: #0c0c0c; --color-accent: #28CD56; --font-heading: 'Geist', sans-serif; } .hero { min-height: 100vh; display: grid; } .hero h1 { font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: -0.02em; } </style> {% comment %} Synapse AI — five agents, one workflow. Code · Design · QA · Deploy · Monitor {% endcomment %} {% schema %} { "name": "Hero Banner", "settings": [ { "type": "text", "id": "heading" }, { "type": "richtext", "id": "body" }, { "type": "url", "id": "cta_link" } ], "presets": [{ "name": "Hero" }] } {% endschema %} {% assign heading = section.settings.heading %} {% if heading != blank %} <section class="hero" data-section="{{ section.id }}"> <h1>{{ heading | escape }}</h1> {% if section.settings.body != blank %} {{ section.settings.body }} {% endif %} </section> {% endif %} {% for product in collection.products limit: 12 %} {% render 'product-card', product: product, show_vendor: section.settings.show_vendor %} {% endfor %} {{ 'theme.css' | asset_url | stylesheet_tag }} {{ 'application.js' | asset_url | script_tag }} {% liquid assign featured = collections['featured'] for item in featured.products render 'card', product: item endfor %} <style> :root { --color-primary: #0c0c0c; --color-accent: #28CD56; --font-heading: 'Geist', sans-serif; } .hero { min-height: 100vh; display: grid; } .hero h1 { font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: -0.02em; } </style> {% comment %} Synapse AI — five agents, one workflow. Code · Design · QA · Deploy · Monitor {% endcomment %} {% schema %} { "name": "Hero Banner", "settings": [ { "type": "text", "id": "heading" }, { "type": "richtext", "id": "body" }, { "type": "url", "id": "cta_link" } ], "presets": [{ "name": "Hero" }] } {% endschema %} {% assign heading = section.settings.heading %} {% if heading != blank %} <section class="hero" data-section="{{ section.id }}"> <h1>{{ heading | escape }}</h1> {% if section.settings.body != blank %} {{ section.settings.body }} {% endif %} </section> {% endif %} {% for product in collection.products limit: 12 %} {% render 'product-card', product: product, show_vendor: section.settings.show_vendor %} {% endfor %} {{ 'theme.css' | asset_url | stylesheet_tag }} {{ 'application.js' | asset_url | script_tag }} {% liquid assign featured = collections['featured'] for item in featured.products render 'card', product: item endfor %} <style> :root { --color-primary: #0c0c0c; --color-accent: #28CD56; --font-heading: 'Geist', sans-serif; } .hero { min-height: 100vh; display: grid; } .hero h1 { font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: -0.02em; } </style> {% comment %} Synapse AI — five agents, one workflow. Code · Design · QA · Deploy · Monitor {% endcomment %} {% schema %} { "name": "Hero Banner", "settings": [ { "type": "text", "id": "heading" }, { "type": "richtext", "id": "body" }, { "type": "url", "id": "cta_link" } ], "presets": [{ "name": "Hero" }] } {% endschema %} {% assign heading = section.settings.heading %} {% if heading != blank %} <section class="hero" data-section="{{ section.id }}"> <h1>{{ heading | escape }}</h1> {% if section.settings.body != blank %} {{ section.settings.body }} {% endif %} </section> {% endif %} {% for product in collection.products limit: 12 %} {% render 'product-card', product: product, show_vendor: section.settings.show_vendor %} {% endfor %} {{ 'theme.css' | asset_url | stylesheet_tag }} {{ 'application.js' | asset_url | script_tag }} {% liquid assign featured = collections['featured'] for item in featured.products render 'card', product: item endfor %} <style> :root { --color-primary: #0c0c0c; --color-accent: #28CD56; --font-heading: 'Geist', sans-serif; } .hero { min-height: 100vh; display: grid; } .hero h1 { font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: -0.02em; } </style> {% comment %} Synapse AI — five agents, one workflow. Code · Design · QA · Deploy · Monitor {% endcomment %}

PRICING

Simple, transparent pricing.

Start free. Upgrade when you're ready. No surprises.

Free

Perfect for solo developers exploring Synapse.

$0forever

Start Free

✓Core IDE features
✓Basic AI suggestions
✓1 project
✓Community support
✓Liquid syntax validation
—Unlimited AI agents
—Shopify sync
—Priority support
—Advanced analytics
—Team collaboration

Pro

Everything you need to ship Shopify themes faster.

$29/month

Get Pro

✓Core IDE features
✓Basic AI suggestions
✓Unlimited projects
✓Priority support
✓Liquid syntax validation
✓Unlimited AI agents
✓Shopify sync
✓Priority support
✓Advanced analytics
✓Team collaboration

FAQ

Simple, transparent pricing.

Free

Pro

Common questions.