Shopify Integration

Shopify Platform

Shopify is the world’s leading eCommerce platform, powering millions of online stores across the globe. It provides merchants with all the essential tools needed to sell products online, including inventory management, payment processing, and order fulfillment.

Key advantages of Shopify include:

• Robust Backend: Reliable infrastructure for processing orders and managing inventory
• Extensive App Ecosystem: Thousands of apps to extend store functionality
• Secure Payments: Built-in payment processing and support for numerous payment gateways
• Scalability: Ability to handle stores of any size, from startups to enterprise

While Shopify provides its own storefront solution, many merchants are increasingly turning to headless commerce approaches to gain greater flexibility and performance.

Benefits of Headless eCommerce

Headless eCommerce separates the frontend presentation layer from the backend commerce functionality. With Frontend’s Shopify integration, you build the storefront in Hydrogen and Next.js while Shopify keeps running the commerce engine — an approach that offers significant advantages:

• Performance: Deliver lightning-fast shopping experiences with optimized frontend code
• Customization: Complete creative freedom to design unique shopping experiences
• Omnichannel: Deploy consistent shopping experiences across web, mobile, and other touchpoints
• Developer Experience: Use modern frontend frameworks and development approaches
• Content Integration: Seamlessly blend content and commerce for richer customer experiences
• Conversion Optimization: Implement custom checkout flows and UX optimizations

By decoupling the frontend from Shopify’s backend, you gain the freedom to create exactly the customer experience you envision while still leveraging Shopify’s powerful commerce engine.

Shopify Storefront API

Frontend uses the Shopify Storefront API with GraphQL to build performant shoppable pages and storefronts. This API is specifically designed for creating custom shopping experiences with direct access to product, collection, and checkout functionality.

The GraphQL-based approach offers several technical advantages:

• Precise Data Fetching: Request exactly the data you need, reducing payload sizes
• Single Request: Fetch multiple resources in a single API call
• Strongly Typed: Clear schema definition for improved development experience
• Real-time Updates: Access to the latest product information and inventory status
• Checkout Integration: Complete shopping cart and checkout functionality

Frontend AI is specifically optimized to generate efficient queries against the Storefront API, creating high-performance shopping experiences without requiring you to master the complexities of GraphQL or the Shopify API structure.

Requirements

To use the Shopify integration, you must have an existing Shopify store. If you don’t have one yet, create a store at shopify.com before proceeding.

Installing the Integration

1. Install the official Frontend app from the Shopify App Store — it generates the Storefront API access tokens for your shop
2. Navigate to Integrations in your Frontend project
3. Look for the Shopify integration
4. Add your store by its myshopify.com domain

Stores belong to your workspace, so you install the app and connect a store once — every project you create afterward can use it.

What You Get

Once you install the Shopify integration, your storefront — and the AI building it — gets direct access to your store’s commerce data:

• Products - Retrieve individual products or browse the full product catalog, with variants, pricing, media, and availability
• Collections - Access product collections to power collection pages, navigation, and merchandised sections
• Cart - Create carts and add, update, and remove line items from your storefront
• Checkout - Hand customers off to Shopify’s secure hosted checkout

Everything on your storefront reads from live Storefront API data, so product copy, pricing, and inventory always match what is actually in your store — no syncing or mirroring required.

If you add a shopping assistant to your storefront, the same capabilities are exposed to it as tools, so it can search the catalog, answer questions about inventory, build a cart, and send the customer to checkout without leaving the conversation.

Customizing Your Storefront

You can use Frontend AI to customize how your storefront uses this data. Simply describe the behavior you want:

• “Show images, pricing, and the compare-at price on every product card”
• “Recommend related products from the same collection when a customer adds an item to cart”
• “Require size selection before the add-to-cart button becomes active”
• “Add a collection browsing section to the homepage for customers who aren’t sure what they want”

Frontend AI will generate the appropriate code and apply your customizations automatically.