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.
Prerequisites
- 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
Create a Shopify Private App for API Access
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.
Configure the API Connector
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.
Display Shopify Products in Bubble
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.
Handle Checkout via Shopify
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.
Set Up Webhooks for Real-Time Sync
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 working example
1{2 "api_name": "Shopify API",3 "authentication": {4 "type": "Private key in header",5 "key_name": "X-Shopify-Access-Token",6 "key_value": "YOUR_SHOPIFY_ACCESS_TOKEN"7 },8 "calls": [9 {10 "name": "Get Products",11 "method": "GET",12 "url": "https://your-store.myshopify.com/admin/api/2024-01/products.json?limit=50",13 "use_as": "Data"14 },15 {16 "name": "Get Single Product",17 "method": "GET",18 "url": "https://your-store.myshopify.com/admin/api/2024-01/products/[product_id].json",19 "use_as": "Data"20 },21 {22 "name": "Get Orders",23 "method": "GET",24 "url": "https://your-store.myshopify.com/admin/api/2024-01/orders.json?status=any&limit=50",25 "use_as": "Data"26 }27 ]28}Common mistakes when integrating Shopify with Bubble
Why it's a problem: Using the Admin API on the client side
How to avoid: Always mark the access token as Private in the API Connector.
Why it's a problem: Not handling Shopify API rate limits
How to avoid: Cache Shopify data in Bubble's database and refresh periodically rather than calling the API on every page load.
Why it's a problem: Hardcoding the API version
How to avoid: 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.
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to display Shopify products in my Bubble.io app and redirect users to Shopify for checkout. How do I set up the API Connector with Shopify's Admin API, fetch products, and handle the checkout flow?
Connect to Shopify via API Connector. Fetch products and display them in a Repeating Group. Add checkout buttons that redirect to Shopify. Set up webhooks for order and inventory sync.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation