Shopify Storefront API + Webflow: Custom UX Without Limitations

Bridges both layers via Shopify's Storefront GraphQL API

Shopify is one of the strongest commerce engines available, but its theme system can restrict design flexibility. Webflow offers complete visual control, but lacks deep commerce capabilities.

The real advantage comes from combining both. By using Shopify's Storefront API with Webflow as the frontend layer, you create a headless architecture where design and commerce operate independently, without compromise.

‍

‍

Why This Stack Matters

Shopify's default storefront uses Liquid templates. While reliable, it binds your frontend tightly to Shopify's rendering system. This makes advanced UI interactions, animations, and non-standard layouts difficult to implement.

Webflow removes those constraints. It outputs clean HTML, CSS, and JavaScript, allowing full control over layout and interaction design.

The Storefront API bridges the gap. It exposes Shopify's data layer through GraphQL, allowing Webflow to dynamically render products, collections, and carts.

• Webflow controls the experience
• Shopify handles commerce logic
• JavaScript connects both layers

Key benefit: You no longer have to choose between design freedom and commerce reliability. This architecture gives you both, without a dedicated backend in most implementations.

‍

Architecture Overview

The system works as follows:

1. Webflow hosts all frontend pages
2. JavaScript fetches data from Shopify via GraphQL
3. A cart is created and stored in the browser
4. Checkout is handled by Shopify via redirect

This removes the need for a backend in most implementations.

Why no backend?

The Storefront API token is safe for public frontend use. It only exposes read access to products and write access to cart operations. Sensitive admin operations remain behind Shopify's protected Admin API.

Connecting to Shopify

Start by generating a Storefront API token from your Shopify admin under Apps > Develop apps. This token is safe for frontend use and allows access to product and cart operations.

The core of the integration is a reusable GraphQL request function:

storefront.js

const SHOPIFY_DOMAIN = 'your-store.myshopify.com';
const STOREFRONT_TOKEN = 'your-storefront-access-token';
async function storefrontQuery(query, variables = {}) {
  const res = await fetch(`https://${SHOPIFY_DOMAIN}/api/2024-04/graphql.json`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Shopify-Storefront-Access-Token': STOREFRONT_TOKEN,
    },
    body: JSON.stringify({ query, variables }),
  });
  const { data } = await res.json();
  return data;
}

This function becomes the backbone of all data interactions throughout the integration.

Rendering Products in Webflow

Instead of storing products in Webflow CMS, data is fetched directly from Shopify and injected into the page. Using custom data- attributes keeps the system stable and independent from Webflow's class naming conventions.

product-render.js

function renderProduct(product) {
  if (!product) return;
  document.querySelector('[data-product="title"]').textContent = product.title;
  document.querySelector('[data-product="description"]').textContent = product.description;
}

In your Webflow design, add custom attributes to any element. For example, set data-product="title" on a heading element and the script will populate it automatically on page load.

Best Practice

Always use data- attributes rather than class names to target elements. This way your JavaScript stays completely independent from any future design changes in Webflow.

Creating a Headless Cart

The cart is created once and stored locally in the browser. This allows it to persist across page navigation without requiring a session or backend.

cart.js

async function getOrCreateCart() {
  let cartId = localStorage.getItem('cart_id');
  if (!cartId) {
    const data = await storefrontQuery(CREATE_CART, { lines: [] });
    cartId = data.cartCreate.cart.id;
    localStorage.setItem('cart_id', cartId);
  }
  return cartId;
}

Products are added to the cart using variant IDs, giving you full control over cart behavior and UI presentation.

+36%

average improvement in conversion rate reported by stores that implemented a slide-in cart drawer instead of a full page redirect to the cart.

Handling Variants

Shopify variants are combinations of options like size and color. Instead of relying on default dropdowns, you can create fully custom UI elements such as buttons, swatches, or image selectors. Each selection maps to a specific variant ID.

variants.js

function buildVariantSelectors(variants) {
  const variantMap = {};
  variants.forEach((v) => {
    const key = v.selectedOptions
      .map((o) => `${o.name}:${o.value}`)
      .sort()
      .join('|');
    variantMap[key] = { id: v.id, available: v.availableForSale };
  });
  return variantMap;
}

When a customer selects options, you build the same key string and look up the matching variant ID from the map. This enables fully custom product interactions with zero dependency on Shopify's default UI components.

‍

Custom Cart Experience

A slide-in cart drawer keeps users on the page and consistently improves conversion. The UI is built and animated entirely in Webflow, while Shopify manages the underlying cart data.

• Design the drawer in Webflow with your brand styling and animations
• Populate line items by querying the cart from Shopify's Storefront API
• Update quantities and remove items via GraphQL mutations
• Redirect to Shopify's hosted checkout URL for secure payment processing

Checkout security: Never attempt to build a custom checkout. Always redirect to Shopify's checkoutUrl returned by the cart object. Shopify handles PCI compliance, fraud detection, and payment processing.

‍

Collections Without CMS Duplication

Collections can be loaded directly from Shopify instead of duplicating data in Webflow CMS. This ensures product data stays consistent and reduces maintenance overhead significantly.

• Query collections and their products using a single GraphQL request
• Render product cards dynamically by cloning a hidden template element
• Implement pagination or infinite scroll using Shopify's cursor-based system
• Filter and sort products client-side or pass parameters to the GraphQL query

CMS vs Headless

Avoid syncing products into Webflow CMS. Any time a product updates in Shopify, your CMS becomes stale. Fetching live from the Storefront API means your frontend always reflects the true state of your catalog.

‍

Performance Optimization

When implemented correctly, this headless setup is consistently faster than traditional Shopify themes. A few key practices keep it that way.

• Cache product data in sessionStorage to avoid redundant API calls on repeat visits within a session
• Load scripts using defer so they do not block the initial page render
• Serve images via Shopify CDN and append size parameters to only load the resolution you need
• Batch GraphQL fields to fetch only the data each page actually requires
• Minimize repeated API calls by storing cart state locally and only syncing when mutations occur

2x

faster average page load compared to default Shopify Liquid themes, when the headless stack is correctly optimized with caching and deferred loading.

‍

Final Thoughts

This architecture removes the traditional tradeoff between design and functionality. You get complete control over the frontend while relying on Shopify for a stable, scalable commerce backend.

For modern ecommerce brands that care about experience as much as performance, this is no longer an alternative approach. It is the direction the industry is moving toward.