Connect to Shopify

How to wire the Add to Cart and Buy Now buttons in index.html to your Shopify store via the Storefront API.

Step 1 Connect Supliful to Shopify

If you haven't done this yet, do it first — Supliful will push the product to your store.

Once pushed, the product will appear in your Shopify Admin under Products.

Step 2 Create a Storefront API Access Token

This is a public read-only token your HTML page uses to talk to Shopify. It is safe to put in client-side code.

Step 3 Get Your Product's Variant ID

Shopify uses a Global ID (GID) to identify each product variant. You need this to add items to the cart.

Alternatively, run this in your browser console after loading the Shopify Admin products page to list all variant IDs — but the URL method above is the quickest.

Step 4 Edit index.html — Add Your Credentials

Open index.html in a text editor. Find the <script> block near the bottom. Replace the existing addToCart() function with the code below.

First, add these three lines at the very top of the <script> block:

/* ── Shopify credentials — fill these in ── */
const SHOPIFY_DOMAIN = 'your-store.myshopify.com';      // ← your store URL
const SHOPIFY_TOKEN  = 'your_storefront_access_token';  // ← from Step 2
const VARIANT_GID    = 'gid://shopify/ProductVariant/12345678901'; // ← from Step 3

Then replace the existing addToCart() function entirely with this:

/* ── Add to Cart → Shopify Storefront API ── */
async function addToCart() {
  const qty = parseInt(document.getElementById('qty').value) || 1;

  // Visual feedback while loading
  const btn = document.getElementById('atc-btn');
  const origHTML = btn.innerHTML;
  btn.innerHTML = 'Loading…';
  btn.style.opacity = '0.7';
  btn.disabled = true;

  try {
    const res = await fetch(
      `https://${SHOPIFY_DOMAIN}/api/2024-01/graphql.json`,
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-Shopify-Storefront-Access-Token': SHOPIFY_TOKEN,
        },
        body: JSON.stringify({
          query: `
            mutation cartCreate($input: CartInput!) {
              cartCreate(input: $input) {
                cart { checkoutUrl }
                userErrors { field message }
              }
            }
          `,
          variables: {
            input: {
              lines: [{ merchandiseId: VARIANT_GID, quantity: qty }]
            }
          }
        })
      }
    );

    const json = await res.json();
    const errors = json?.data?.cartCreate?.userErrors;
    const checkoutUrl = json?.data?.cartCreate?.cart?.checkoutUrl;

    if (errors?.length) {
      console.error('Shopify error:', errors);
      alert('Could not add to cart. Please try again.');
      btn.innerHTML = origHTML;
      btn.style.opacity = '';
      btn.disabled = false;
      return;
    }

    // Update cart count badge
    cartCount++;
    const dot = document.getElementById('cart-count');
    dot.textContent = cartCount;
    dot.style.display = 'flex';

    // Show success then redirect to Shopify checkout
    btn.innerHTML = '✓ Added!';
    btn.style.background = '#8A3E08';
    btn.style.opacity = '';
    btn.disabled = false;
    setTimeout(() => { window.location.href = checkoutUrl; }, 800);

  } catch (err) {
    console.error(err);
    alert('Network error. Please try again.');
    btn.innerHTML = origHTML;
    btn.style.opacity = '';
    btn.disabled = false;
  }
}

Step 5 Add Your Product Image

Find this comment block in index.html:

<!--
  REPLACE: add your product image here
  <img src="your-product-image.png" alt="Colostrum Capsules 500mg bottle" />
-->

Download your labelled product image from the Supliful mockup tool (or upload your own PNG), then replace the entire <div class="gallery-placeholder">…</div> block with:

<img src="colostrum.png" alt="Colostrum Capsules 500mg bottle"
     style="width:100%; height:100%; object-fit:contain;" />

Place your image file in the same folder as index.html.

Step 6 Update Brand Name & Prices

Step 7 Test Locally

Open index.html directly in Chrome or Firefox. Click Add to Cart — you should be redirected to your Shopify checkout with 1× Colostrum Capsules in the cart.

Step 8 Deploy

Option A — Netlify (recommended, free)

Option B — Shopify as a Page (no external hosting needed)

Quick Reference