The Best of Both Worlds

You love Shopify for its order management, payments, and ecosystem. You want Astro for its speed and developer experience. Headless commerce (or “Composable Commerce”) allows you to have both.

How Astrify Works

Astrify themes use the Shopify Storefront API to fetch product data, inventory status, and handle cart logic, all while being hosted on high-performance edge networks like Vercel or Netlify.

Key Technical Components

1. The Storefront API

We use GraphQL to fetch only the data needed for each page. This reduces payload size compared to standard Shopify Liquid calls.

2. Static Site Generation (SSG)

Product pages are generated during the build process. When a user visits /products/cool-shirt, they are receiving a static HTML file, not a page that needs to be built by a server on the fly.

3. Client-Side Interactivity

For features like “Add to Cart” or live inventory checking, we use Astro Islands with lightweight React or Vanilla JS components.

// Example: Adding to cart via Storefront API
const cartAdd = await client.checkout.addLineItems(checkoutId, [
  { variantId: variantId, quantity: 1 }
]);

Why Not Just Use Shopify Hydrogen?

While Shopify Hydrogen is a great tool, Astro offers a simpler mental model and significantly less JavaScript overhead for content-heavy landing pages, making it ideal for performance-first brands.

Getting Started

Astrify themes come pre-configured with the Shopify client. Simply add your SHOPIFY_STOREFRONT_ACCESS_TOKEN and SHOPIFY_STORE_DOMAIN to your environment variables, and you’re ready to build.