Shopify Expert

What it does

When your agent uses it

• Customizing a Shopify theme with Liquid sections and templates
• Building a custom Shopify app with OAuth and webhooks
• Creating a headless storefront on the Storefront API or Hydrogen
• Adding checkout UI extensions or Shopify Functions
• Speeding up a slow Shopify theme

Example prompts

• “Add a care instructions block to the product template that reads from a metafield.”
• “Add filtering to the collection page using Online Store 2.0 filters.”
• “Write a Storefront API query that fetches a product by handle with its variants and images.”
• “Scaffold a Shopify app that listens for order webhooks and run it locally.”

Requirements

• The Shopify CLI
• A Shopify store to develop against

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

1. 1Requirements analysis — Identify if theme, app, or headless approach fits needs
2. 2Architecture setup — Scaffold with shopify theme init or shopify app create; configure shopify.app.toml and theme schema
3. 3Implementation — Build Liquid templates, write GraphQL queries, or develop app features (see examples below)
4. 4Validation — Run shopify theme check for Liquid linting; if errors are found, fix them and re-run before proceeding. Run shopify app dev…
5. 5Deploy and monitor — shopify theme push for themes; shopify app deploy for apps; watch Shopify error logs and performance metrics…

What it can do on your machine

Read from SKILL.md and the folder at commit 1be15d8. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  Shell commands in SKILL.md call:

  • shopify

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  Links to these hosts (documentation or services it may open):

  • github.com
  • synergetic.solutions
  • jeffallan.github.io

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Shopify Expert loads about 1.8k tokens when it runs, and up to ~27k if it reads all its reference files. Until then it costs about 155 tokens; SKILL.md has 405 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~155

When it runs · the whole SKILL.md, loaded when a task matches

~1.8k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~27k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from Jeffallan/claude-skills at commit 1be15d8, republished under its MIT licence (© Jeffallan). 405 words, ~1,819 tokens.

name

shopify-expert

description

Builds and debugs Shopify themes (.liquid files, theme.json, sections), develops custom Shopify apps (shopify.app.toml, OAuth, webhooks), and implements Storefront API integrations for headless storefronts. Use when building or customizing Shopify themes, creating Hydrogen or custom React storefronts, developing Shopify apps, implementing checkout UI extensions or Shopify Functions, optimizing performance, or integrating third-party services. Invoke for Liquid templating, Storefront API, app development, checkout customization, Shopify Plus features, App Bridge, Polaris, or Shopify CLI workflows.

license

MIT

metadata.author

https://github.com/Jeffallan

metadata.company

https://synergetic.solutions

metadata.version

1.1.0

metadata.domain

platform

metadata.triggers

Shopify, Liquid, Storefront API, Shopify Plus, Hydrogen, Shopify app, checkout extensions, Shopify Functions, App Bridge, theme development, e-commerce, Polaris

metadata.role

expert

metadata.scope

implementation

metadata.output-format

code

metadata.related-skills

react-expert, graphql-architect, api-designer

{% comment %} templates/product.liquid {% endcomment %}
<h1>{{ product.title }}</h1>
<p>{{ product.metafields.custom.care_instructions.value }}</p>

{% for variant in product.variants %}
  <option
    value="{{ variant.id }}"
    {% unless variant.available %}disabled{% endunless %}
  >
    {{ variant.title }} — {{ variant.price | money }}
  </option>
{% endfor %}

{{ product.description | metafield_tag }}

{% comment %} sections/collection-filters.liquid {% endcomment %}
{% for filter in collection.filters %}
  <details>
    <summary>{{ filter.label }}</summary>
    {% for value in filter.values %}
      <label>
        <input
          type="checkbox"
          name="{{ value.param_name }}"
          value="{{ value.value }}"
          {% if value.active %}checked{% endif %}
        >
        {{ value.label }} ({{ value.count }})
      </label>
    {% endfor %}
  </details>
{% endfor %}

query ProductByHandle($handle: String!) {
  product(handle: $handle) {
    id
    title
    descriptionHtml
    featuredImage {
      url(transform: { maxWidth: 800, preferredContentType: WEBP })
      altText
    }
    variants(first: 10) {
      edges {
        node {
          id
          title
          price { amount currencyCode }
          availableForSale
          selectedOptions { name value }
        }
      }
    }
    metafield(namespace: "custom", key: "care_instructions") {
      value
      type
    }
  }
}

# Theme development
shopify theme dev --store=your-store.myshopify.com   # Live preview with hot reload
shopify theme check                                   # Lint Liquid for errors/warnings
shopify theme push --only templates/ sections/        # Partial push
shopify theme pull                                    # Sync remote changes locally

# App development
shopify app create node                               # Scaffold Node.js app
shopify app dev                                       # Local dev with ngrok tunnel
shopify app deploy                                    # Submit app version
shopify app generate extension                        # Add checkout UI extension

# GraphQL
shopify app generate graphql                          # Generate typed GraphQL hooks

import { authenticate } from "../shopify.server";
import type { LoaderFunctionArgs } from "@remix-run/node";

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const { admin } = await authenticate.admin(request);

  const response = await admin.graphql(`
    query {
      shop { name myshopifyDomain plan { displayName } }
    }
  `);

  const { data } = await response.json();
  return data.shop;
};

© Jeffallan, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 5 other files (references) in skills/shopify-expert of Jeffallan/claude-skills.

• SKILL.md
• references/app-development.md
• references/checkout-customization.md
• references/liquid-templating.md
• references/performance-optimization.md
• references/storefront-api.md

Open the folder on GitHubat commit 1be15d8