shopify-expert Checked

### Liquid — Collection filtering (Online Store 2.0)

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

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

# 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)

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:

1. Complete file structure with proper naming

2. Liquid/GraphQL/TypeScript code with types

3. Configuration files (shopify.app.toml, schema settings)

4. API scopes and permissions needed

5. 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