Works with the AI tools you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIGitHub CopilotGitHub CopilotGemini CLIGemini CLI+18 more

    shopify theme designer

    1

    An authentic skill for those who want to make a shopify liquid theme without any error

    $5

    Secure checkout via Stripe

    30-day refund guarantee

    Converts to your local currency at checkout

    0 installsSecurity scanned
    shopify theme designer

    shopify theme designer

    Example session with this skill installed

    Build a responsive 'Featured Product' section for a Dawn-based theme. Include settings for heading, product picker, and a toggle for showing the vendor. Use OS 2.0 schema.

    • Read your context and instructions
    • Compiled the shopify theme designer
    I have created the Featured Product section using Online Store 2.0 architecture. This section integrates directly with the Shopify Theme Editor, allowing merchants to select products and toggle visibility settings without touching code. ## Featured Product Section ```liquid {% comment %} sections/featured-product.liquid {% endcomment %} {%- if section.settings.product.featured_image != blank -%} {{ section.settings.product.featured_image | image_url: width: 800 | image_tag: loading: 'lazy', sizes: '(min-width: 990px) 50vw, 100vw', widths: '400, 800, 1200' }} {%- else -%} {{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }} {%- endif -%} {%- if section.settings.heading != blank -%}

    {{ section.settings.heading | escape }}

    {%- endif -%} {%- if section.settings.show_vendor and section.settings.product.vendor != blank -%}

    {{ section.settings.product.vendor }}

    {%- endif -%}

    {{ section.settings.product.title | default: "Example Product Title" }}

    {{ section.settings.product.price | money }} {%- if section.settings.product != blank -%} View Details {%- endif -%} {% schema %} { "name": "Featured Product", "tag": "section", "class": "section", "settings": [ { "type": "text", "id": "heading", "label": "Heading", "default": "Featured Product" }, { "type": "product", "id": "product", "label": "Product" }, { "type": "checkbox", "id": "show_vendor", "label": "Show vendor", "default": true } ], "presets": [ { "name": "Featured Product" } ] } {% endschema %} ``` **Next steps** 1. Upload this file to your theme's `/sections` folder. 2. Open the Theme Editor and add the "Featured Product" section to any JSON template. 3. Run `shopify theme check` to validate the Liquid syntax against your specific theme environment.

    Connects securely to your tools. The creator never sees your data.

    What you get

    Build OS 2.0 sections with merchant-editable schemas and blocks.Optimize Shopify image delivery using responsive Liquid filters.Audit storefronts for WCAG accessibility and mobile performance.Implement AJAX cart functionality for smoother ecommerce UX.

    About this skill

    The problem

    Building Shopify themes often leads to hardcoded styles that merchants cannot edit, or bloated Liquid code that slows down storefronts. Developers struggle to maintain Online Store 2.0 standards while ensuring accessibility and performance.

    What it does

    • Architects Online Store 2.0 themes using JSON templates, sections, and reusable blocks.
    • Generates Liquid markup with merchant-configurable {% schema %} settings.
    • Implements responsive image logic using srcset and sizes for optimal LCP.
    • Integrates Shopify AJAX Cart API for asynchronous storefront interactions.
    • Audits storefronts for WCAG AA compliance and Core Web Vitals performance.

    Frameworks & tools

    Shopify Online Store 2.0, Liquid, Tailwind CSS, Vanilla JS, Web Components, Shopify CLI, and Checkout Extensibility.

    Why this beats prompting it yourself

    General LLMs often output "vintage" Shopify code or hardcoded CSS that breaks the Theme Editor experience. This skill enforces strict OS 2.0 schema patterns, ensuring merchants can actually manage the site without calling a developer for every text change.

    Use cases

    • Convert static Figma designs into functional Shopify sections with full schema support.
    • Build custom cart drawers using the AJAX API to replace standard cart pages.
    • Refactor legacy Liquid themes into modern JSON-based architectures.
    • Create high-performance product landing pages with deferred non-critical assets.

    Known limitations

    Does not support editing checkout.liquid as it is deprecated; focuses on Checkout Extensibility. Requires a Shopify environment to preview rendered Liquid output.

    How to install

    Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.

    ~30 seconds
    1. 1

      Download the ZIP

      Free skills download straight away. Paid skills unlock right after purchase.

    2. 2

      Unzip into your skills folder

      Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.

    3. 3

      Ask your agent to use it

      Restart the agent if it was already running. It picks the skill up automatically - no config needed.

    Skills folder by agent

    Click the path to copy it. Create the folder if it does not exist yet.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    30-day refund

    Not a fit? Get your money back

    Trust & safety

    Security scanned

    Verified clean today

    • One-time purchase, yours forever

    Listedtoday

    Frequently Asked Questions