Shopify

Connect Shopify to your Astro site using the Storefront API. Fetch products, collections, and cart data at build time or on the edge. No Liquid templates, full creative control.

Last updated: 2026-03-29

Setup

Create a custom app in your Shopify admin to get Storefront API access. You only need the Storefront access token. It's safe for client-side use and scoped to read-only product data.

Terminal

# .env
SHOPIFY_STORE_DOMAIN=your-store.myshopify.com
SHOPIFY_STOREFRONT_TOKEN=your-storefront-access-token

Install & Configure

Use the official Shopify Storefront API client or fetch directly with GraphQL. The Buy SDK is great for cart management, while raw GraphQL gives you full control over queries.

Terminal

# Install the Buy SDK
npm install shopify-buy

# src/lib/shopify.js
import Client from 'shopify-buy';

const client = Client.buildClient({
  domain: import.meta.env.SHOPIFY_STORE_DOMAIN,
  storefrontAccessToken: import.meta.env.SHOPIFY_STOREFRONT_TOKEN,
});

export async function getProducts() {
  const products = await client.product.fetchAll();
  return JSON.parse(JSON.stringify(products));
}

export async function getProductByHandle(handle) {
  const product = await client.product.fetchByHandle(handle);
  return JSON.parse(JSON.stringify(product));
}

export async function getCollections() {
  const collections = await client.collection.fetchAllWithProducts();
  return JSON.parse(JSON.stringify(collections));
}

Fetch in Astro Pages

Call your Shopify helper in the frontmatter of any Astro page. Products are fetched at build time for static sites, or on each request with SSR. No loading spinners, no client-side fetching.

Terminal

---
// src/pages/shop/index.astro
import { getProducts } from '../../lib/shopify';

const products = await getProducts();
---

<section class="grid grid-cols-2 md:grid-cols-3 gap-6">
  {products.map((product) => (
    <a href={`/shop/${product.handle}`} class="group">
      <img
        src={product.images[0]?.src}
        alt={product.title}
        class="rounded-lg aspect-square object-cover"
      />
      <h3 class="mt-2 font-medium">{product.title}</h3>
      <p class="text-sm text-gray-500">
        ${product.variants[0]?.price.amount}
      </p>
    </a>
  ))}
</section>

Cart & Checkout

Shopify handles checkout entirely. You redirect customers to a Shopify-hosted checkout URL. Use the Buy SDK to create a cart, add line items, and generate the checkout link. No PCI compliance needed on your end.

Terminal

// src/lib/shopify-cart.js
import Client from 'shopify-buy';

const client = Client.buildClient({
  domain: import.meta.env.SHOPIFY_STORE_DOMAIN,
  storefrontAccessToken: import.meta.env.SHOPIFY_STOREFRONT_TOKEN,
});

export async function createCheckout() {
  const checkout = await client.checkout.create();
  return checkout;
}

export async function addToCheckout(checkoutId, variantId, quantity = 1) {
  const lineItems = [{ variantId, quantity }];
  const checkout = await client.checkout.addLineItems(checkoutId, lineItems);
  return checkout;
}

// Redirect to Shopify checkout
// checkout.webUrl → 'https://your-store.myshopify.com/checkouts/...'

Best Practices

Keep your Shopify integration lean. Fetch only what you need and cache aggressively during development.