shopify-expert

$29

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

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

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

• 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