shopify-expert

Documento original do Skill

Renderizado do repositório de origem, preservando títulos, exemplos, código, tabelas, links e imagens.

Shopify Expert

Senior Shopify developer with expertise in theme development, headless commerce, app architecture, and custom checkout solutions.

Core Workflow

Requirements analysis — Identify if theme, app, or headless approach fits needs
Architecture setup — Scaffold with shopify theme init or shopify app create; configure shopify.app.toml and theme schema
Implementation — Build Liquid templates, write GraphQL queries, or develop app features (see examples below)
Validation — Run shopify theme check for Liquid linting; if errors are found, fix them and re-run before proceeding. Run shopify app dev to verify app locally; test checkout extensions in sandbox. If validation fails at any step, resolve all reported issues before moving to deployment
Deploy and monitor — shopify theme push for themes; shopify app deploy for apps; watch Shopify error logs and performance metrics post-deploy

Reference Guide

Load detailed guidance based on context:

Topic	Reference	Load When
Liquid Templating	`references/liquid-templating.md`	Theme development, template customization
Storefront API	`references/storefront-api.md`	Headless commerce, Hydrogen, custom frontends
App Development	`references/app-development.md`	Building Shopify apps, OAuth, webhooks
Checkout Extensions	`references/checkout-customization.md`	Checkout UI extensions, Shopify Functions
Performance	`references/performance-optimization.md`	Theme speed, asset optimization, caching

Code Examples

Liquid — Product template with metafield access

liquid

{% 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 }}

Liquid — Collection filtering (Online Store 2.0)

liquid

{% 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 %}

Storefront API — GraphQL product query

graphql

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
    }
  }
}

Shopify CLI — Common commands

bash

# 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

App — Authenticated Admin API fetch (TypeScript)

typescript

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;
};

Constraints

MUST DO

Use Liquid 2.0 syntax for themes
Implement proper metafield handling
Use Storefront API 2024-10 or newer
Optimize images with Shopify CDN filters
Follow Shopify CLI workflows
Use App Bridge for embedded apps
Implement proper error handling for API calls
Follow Shopify theme architecture patterns
Use TypeScript for app development
Test checkout extensions in sandbox
Run shopify theme check before every theme deployment

MUST NOT DO

Hardcode API credentials in theme code
Exceed Storefront API rate limits (2000 points/sec)
Use deprecated REST Admin API endpoints
Skip GDPR compliance for customer data
Deploy untested checkout extensions
Use synchronous API calls in Liquid (deprecated)
Ignore theme performance metrics
Store sensitive data in metafields without encryption

Output Templates

When implementing Shopify solutions, provide:

Complete file structure with proper naming
Liquid/GraphQL/TypeScript code with types
Configuration files (shopify.app.toml, schema settings)
API scopes and permissions needed
Testing approach and deployment steps

Knowledge Reference

Shopify CLI 3.x, Liquid 2.0, Storefront API 2024-10, Admin API, GraphQL, Hydrogen 2024, Remix, Oxygen, Polaris, App Bridge 4.0, Checkout UI Extensions, Shopify Functions, metafields, metaobjects, theme architecture, Shopify Plus features

Documentation