How to Integrate Shopify with Bubble

What Shopify Integration Does for Your Bubble App

Shopify integration connects your Bubble app to Shopify's e-commerce infrastructure covering products, orders, customers, inventory, and fulfillment. This lets you build custom storefronts, admin dashboards, order management tools, and specialized e-commerce experiences in Bubble while leveraging Shopify's battle-tested commerce backend for payment processing, inventory management, and shipping calculations.

There are two primary scenarios where this integration makes sense. First, you are building a custom frontend or management tool in Bubble that needs to interact with an existing Shopify store. Second, you are building an app in Bubble that handles the user experience and business logic while delegating the actual e-commerce transaction processing to Shopify. In both cases, the Shopify Admin API provides programmatic access to store data, and Shopify Webhooks push real-time updates to your Bubble app when things change on the Shopify side.

This is not a trivial integration. Shopify's API is extensive, versioned, and has specific authentication requirements depending on whether you are building a public app, a custom app, or using an access token for a single store. Understanding the right approach before you start building saves significant rework.

Core Use Cases with Trigger and Action Logic

Use Case 1: Custom Storefront with Bubble Frontend

Build a unique shopping experience in Bubble that does not look or feel like a standard Shopify theme. Trigger: A user browses your Bubble app. Action: Your Bubble frontend fetches product data from Shopify's Storefront API, including product titles, descriptions, images, variants, and prices. Display products in Bubble's repeating groups with custom layouts, filtering, and search that go beyond what Shopify themes offer. When a user adds items to a cart, create a Shopify checkout using the Storefront API and redirect the user to Shopify's secure checkout for payment processing. After purchase, Shopify sends an order webhook to your Bubble Backend Workflow, where you record the order in your Bubble database and trigger any post-purchase logic.

Use Case 2: Order Management Dashboard

Build a custom admin interface in Bubble for managing Shopify orders. Trigger: Shopify webhooks for orders/create, orders/updated, and fulfillments/create push event data to Bubble Backend Workflows. Action: The Backend Workflows create or update order records in your Bubble database with order details, line items, customer information, fulfillment status, and payment status. Your Bubble admin dashboard displays orders with custom views, filters, and actions that Shopify's built-in admin does not support, including bulk operations, custom fulfillment workflows, team assignment, and priority flagging.

Use Case 3: Multi-Store Inventory Aggregation

Aggregate inventory data from multiple Shopify stores into a single Bubble dashboard. Trigger: Inventory webhooks from multiple Shopify stores push stock level changes to Bubble Backend Workflows. Action: The Backend Workflows update a centralized inventory database in Bubble with product SKUs, quantities, and location data from each store. Your Bubble app provides a unified view of inventory across all stores, with alerts for low stock levels, reorder triggers, and reporting that spans the entire product catalog.

Setup: API Connector Configuration

Authentication Approach for Single Store Access. For integrating with a single Shopify store, the most common Bubble use case, create a Custom App in your Shopify admin under Settings, then Apps and Sales Channels, then Develop Apps. Configure the API scopes your app needs such as read_products, write_orders, and read_inventory. Install the app to generate an Admin API access token. This token does not expire and provides access to the store's Admin API.

API Connector Setup in Bubble. Create a new API called Shopify in the API Connector. Set the base URL to https://your-store.myshopify.com/admin/api/2024-01/ using the current stable API version. Add the header X-Shopify-Access-Token with your access token stored as a private key. Create calls for the endpoints you need: GET /products.json for fetching products, GET /orders.json for fetching orders, POST /products.json for creating products, and PUT /orders/{id}.json for updating orders. Initialize each call with test data so Bubble maps the response fields correctly.

Webhook Setup for Real-Time Updates. Create Shopify webhooks either through the Shopify admin UI or via the API. Each webhook specifies a topic like orders/create or products/update, a callback URL pointing to your Bubble Backend Workflow endpoint, and the data format as JSON. When the specified event occurs in Shopify, it sends a POST request to your Bubble Backend Workflow with the full resource data. Verify incoming webhooks using the HMAC signature in the X-Shopify-Hmac-Sha256 header to ensure they genuinely came from Shopify.

Data Type Design for E-Commerce

Mirror the essential Shopify data structures in your Bubble database. Create data types for Product with fields for title, description, handle, vendor, product_type, shopify_product_id, images, and status. Create a Variant data type with title, price, sku, inventory_quantity, shopify_variant_id, and a linked Product. Create an Order data type with order_number, total_price, financial_status, fulfillment_status, shopify_order_id, customer email, and a list of OrderLineItems. Each OrderLineItem stores product title, variant title, quantity, price, and a linked Order. Store Shopify IDs on every record so you can reference them in API calls. Use the shopify_product_id and shopify_order_id for lookups when processing webhooks to prevent duplicates.

Common Pitfalls

API versioning. Shopify deprecates API versions on a regular schedule. Each version is supported for roughly twelve months after release. If you hardcode an API version in your Bubble API Connector calls and do not update it, your integration will break when that version is deprecated. Check Shopify's API versioning page quarterly and update your base URL to a supported version.

Webhook reliability. Shopify retries failed webhook deliveries for forty-eight hours, but if your Bubble Backend Workflow consistently fails to respond with a 200 status, Shopify will eventually delete the webhook. Monitor your Backend Workflow logs for webhook processing errors.

Rate limits. Shopify's Admin API uses a leaky bucket rate limiter. The default limit is two requests per second for standard plans and higher for Shopify Plus. Burst requests beyond the limit receive 429 responses. If your Bubble app fetches large product catalogs or processes many orders, implement pagination and add delays between batch requests.

Product data complexity. Shopify products can have multiple variants, each with its own price, SKU, and inventory level. Products can also have multiple images, metafields, and options. The data model is more nested than what most Bubble developers expect. Plan your data types to handle this hierarchy before building workflows.

Checkout security. Never build your own checkout flow in Bubble that processes Shopify payments. Always redirect to Shopify's hosted checkout for payment processing. Shopify's checkout handles PCI compliance, tax calculations, and shipping rates.

DIY vs Hiring a Bubble Developer

Fetching and displaying product data from Shopify in a Bubble repeating group is a manageable starter project. The API Connector setup is standard, and the products endpoint returns structured data that maps cleanly to Bubble's visual elements.

Full e-commerce integrations including custom storefronts with cart management, order processing webhooks, inventory syncing across multiple stores, and admin dashboards with bulk operations are complex projects. If e-commerce is a core function of your app, the integration needs to handle edge cases like partial fulfillments, refunds, inventory adjustments, and API version migrations reliably.

Build E-Commerce Experiences Beyond Shopify Themes

Related guides:

• how to build a subscription box with Bubble

Shopify integration gives your Bubble app access to enterprise-grade e-commerce infrastructure without building payment processing or inventory management from scratch. Whether you need a custom storefront, an operational dashboard, or a multi-store management tool, the combination of Shopify's backend and Bubble's frontend flexibility creates possibilities that neither platform offers alone. Talk to our Bubble developers about building Shopify-powered experiences in Bubble.