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 can build custom storefronts that offer 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.

Connecting to Shopify

Connecting to Shopify requires two essential credentials:

Your Shopify Domain: The URL of your Shopify store (typically in the format your-store.myshopify.com)
Shopify Storefront Access Token: A special API key that grants access to your store’s product data

These credentials allow Frontend to securely connect to your Shopify store and access your products, collections, and other storefront data through the Storefront API.

Setup Instructions

To build a landing page or storefront connected to Shopify with Frontend you will need to obtain your Shopify storefront credentials. Follow this quick guide to learn how:

1. Start a New Shopify Project

Select the Shopify Storefront tab when starting a new project from the homepage or the /projects page. You will need to enter form fields for your:

Your Shopify domain in the format my-store.myshopify.com.
A Shopify API Storefront Access token

Install the Shopify Headless App

To generate your storefront access token, install the Headless app and follow these steps:

Install the Shopify Headless App
Click Create Storefront. You can name this storefront anything you prefer.
Copy the Public access token which is also known as your Shopify Storefront API Access Token. This is a public token that provides access to your storefront, including products and collections.

If you need to modify any data that the token can access, you can also do so on this page. This token is primarily used to access your published products, collections, and cart.

3. Create Your Project

Once you have your credentials, continue with the project creation process. This will set up a base template with your Shopify storefront already connected.

Note: If you see any GraphQL-related errors, double-check your Shopify domain name and Storefront Access Token.

4. Start Building

You can now start prompting to build custom experiences using your Shopify products and collections.