Ecommerce with Shopify

1. 1

   Create or sign in to a Shopify account

   Use an existing store or create a new one at accounts.shopify.com.

2. 2

   Add the Headless sales channel

   From your store admin, add the Shopify Headless channel, then click Add Storefront.

3. 3

   Copy your access tokens

   Copy the public and private access tokens into your .env file.

4. 4

   Set your Storefront API access scopes

   Check Storefront API access scopes. unauthenticated_read_product_listings and unauthenticated_read_product_inventory are enough to get started, add more scopes if you need additional permissions.

This branch ships a generic product listing and product detail page setup that adapts based on the collections and products defined in your Shopify backend. The Storefront API query is pre-configured to fetch the extra product information you need, transformed into an easy-to-follow format before the site renders.

query Products {
  products(first: 50) {
    edges {
      node {
        id
        title
        handle
        description
        priceRange {
          minVariantPrice {
            amount
            currencyCode
          }
        }
        featuredImage {
          url
          altText
        }
        variants(first: 1) {
          edges {
            node { id }
          }
        }
      }
    }
  }
}

Setting up button functionality is as simple as defining the variant ID on the page and specifying where you want the button to render. On click, the component creates a cart with the Storefront Cart API and redirects the customer to the checkoutUrl it returns, landing them on Shopify's hosted checkout.

---
// src/pages/products/[handle].astro
import BuyButton from "../../components/BuyButton.astro";

// Pass the variant's global ID; drop the button wherever you like.
const variantId = "gid://shopify/ProductVariant/1234567890";
---

<BuyButton variantId={variantId} quantity={1} />

Under the hood, the component runs a cartCreate mutation and follows the returned URL:

// On click, create a cart for the chosen variant…
const res = await storefront(`
  mutation CartCreate($lines: [CartLineInput!]!) {
    cartCreate(input: { lines: $lines }) {
      cart { checkoutUrl }
      userErrors { field message }
    }
  }
`, { lines: [{ merchandiseId: variantId, quantity }] });

// …then hand the buyer off to Shopify's hosted checkout.
window.location.href = res.data.cartCreate.cart.checkoutUrl;

/
├── public/
├── src/
│   ├── components/
│   │   └── Header.astro
│   ├── layouts/
│   │   └── BaseLayout.astro
│   ├── pages/
│   │   └── index.astro
│   ├── stores/
│   │   └── cart.ts
│   ├── styles/
│   │   └── global.css
│   └── utils/
│       └── shopify.ts
└── package.json

• Astro looks for .astro or .md files in src/pages/. Each file is exposed as a route based on its name.
• src/components/ is where Astro/React/Vue/Svelte/Preact components live, there's nothing special about it, it's just convention.
• Static assets like images go in public/, and src/utils/shopify.ts holds the Storefront API helpers and cart logic.