# How to integrate Shopify with Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 25-30 min
- Compatibility: All Bubble plans (Shopify account required)
- Last updated: March 2026

## TL;DR

Integrate Bubble with Shopify by connecting to the Shopify Admin API via the API Connector plugin. Pull products, orders, and customer data into Bubble for custom dashboards, display Shopify products in a custom storefront, and redirect users to Shopify Checkout for payment. Use webhooks for real-time sync when orders or inventory change.

## Integrate Bubble with Shopify

This tutorial shows you how to connect Bubble to Shopify for building custom storefronts, dashboards, and e-commerce experiences powered by Shopify's backend.

## Before you start

- A Bubble account with API Connector plugin
- A Shopify store with products
- A Shopify private app or custom app with API credentials
- Basic understanding of REST APIs

## Step-by-step guide

### 1. Create a Shopify Private App for API Access

In Shopify admin → Settings → Apps and sales channels → Develop apps → Create an app. Grant the necessary API scopes: read_products, read_orders, read_customers. Generate API credentials — you will get an Admin API access token.

**Expected result:** You have Shopify API credentials with appropriate scopes.

### 2. Configure the API Connector

In Bubble, add a new API in API Connector: name 'Shopify API'. Set authentication to Private key in header: 'X-Shopify-Access-Token' = your access token. Add a GET call 'Get Products': URL = https://your-store.myshopify.com/admin/api/2024-01/products.json. Set Use as = Data. Initialize.

**Expected result:** Bubble can fetch product data from Shopify.

### 3. Display Shopify Products in Bubble

Add a Repeating Group on your storefront page. Set data source to Get data from external API → Shopify Get Products. Map fields: product title, description, price, images. Add an 'Add to Cart' button that constructs a Shopify checkout URL.

**Expected result:** Shopify products display in your Bubble storefront.

### 4. Handle Checkout via Shopify

For checkout, redirect users to Shopify's checkout. Use the Shopify Storefront API to create a checkout with selected products, then redirect the user to the checkout URL. Alternatively, use Shopify Buy Button for a simpler embedded checkout.

**Expected result:** Users complete purchases through Shopify's checkout.

### 5. Set Up Webhooks for Real-Time Sync

In Shopify admin → Settings → Notifications → Webhooks. Add webhooks for orders/create and products/update pointing to your Bubble backend workflow URLs. Create backend workflows in Bubble that process these webhook payloads and update your local data.

**Expected result:** Bubble stays in sync with Shopify inventory and orders in real time.

## Complete code example

File: `API Connector payload`

```json
{
  "api_name": "Shopify API",
  "authentication": {
    "type": "Private key in header",
    "key_name": "X-Shopify-Access-Token",
    "key_value": "YOUR_SHOPIFY_ACCESS_TOKEN"
  },
  "calls": [
    {
      "name": "Get Products",
      "method": "GET",
      "url": "https://your-store.myshopify.com/admin/api/2024-01/products.json?limit=50",
      "use_as": "Data"
    },
    {
      "name": "Get Single Product",
      "method": "GET",
      "url": "https://your-store.myshopify.com/admin/api/2024-01/products/[product_id].json",
      "use_as": "Data"
    },
    {
      "name": "Get Orders",
      "method": "GET",
      "url": "https://your-store.myshopify.com/admin/api/2024-01/orders.json?status=any&limit=50",
      "use_as": "Data"
    }
  ]
}
```

## Common mistakes

- **Using the Admin API on the client side** — The Admin API token grants full access to your Shopify store. Exposing it client-side is a severe security risk. Fix: Always mark the access token as Private in the API Connector.
- **Not handling Shopify API rate limits** — Shopify allows 40 requests per app per store. Exceeding this returns 429 errors. Fix: Cache Shopify data in Bubble's database and refresh periodically rather than calling the API on every page load.
- **Hardcoding the API version** — Shopify deprecates API versions. Hardcoded old versions may stop working. Fix: Use a recent stable API version and update annually when Shopify releases new versions.

## Best practices

- Cache Shopify product data in Bubble's database to reduce API calls.
- Use the Storefront API (not Admin API) for customer-facing product queries.
- Handle Shopify's API rate limits with caching and queuing.
- Set up webhooks for real-time inventory and order sync.
- Test with Shopify's development store before connecting to production.
- Keep the Admin API token private and never expose it client-side.

## Frequently asked questions

### Should I use the Admin API or Storefront API?

Use the Storefront API for customer-facing product queries (no authentication needed). Use the Admin API for order management, inventory, and backend operations that need full access.

### Can I process payments in Bubble instead of Shopify?

You can use Stripe directly in Bubble, but then you lose Shopify's inventory, shipping, and order management. For most cases, redirecting to Shopify Checkout is simpler.

### How do I sync inventory between Bubble and Shopify?

Use Shopify webhooks (products/update) to receive inventory changes in real time. Process the webhook in a Bubble backend workflow that updates cached data.

### Can I use Shopify's Buy Button instead of the full API?

Yes. Shopify's Buy Button is an embeddable widget you can add via an HTML element. It handles product display, cart, and checkout without API configuration.

### How do I handle product variants (sizes, colors)?

Shopify products include variants in the API response. Parse the variants array and display size/color options in dropdowns on your product page. For complex Shopify integrations, RapidDev can build custom storefronts.

### Is there a Bubble plugin for Shopify?

Check the Bubble plugin marketplace — some community plugins exist. The API Connector approach gives you more control and flexibility.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/integrate-bubble-with-shopify
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/integrate-bubble-with-shopify