Headless commerce separates your store's front end (what customers see) from the back end (order processing, inventory). If you use a ReactJS-based front end with Shopify, WooCommerce, or BigCommerce, you can connect both layers to Omnisend to unlock email campaigns, automation workflows, and customer tracking.
Not using a headless setup? Check:
Before You Begin
Target audience: These instructions are for Shopify (e.g., Hydrogen), WooCommerce, or BigCommerce stores using ReactJS for the front end. Other platforms or frameworks may require adaptation.
Platform: Shopify, WooCommerce, BigCommerce.
Front-end technology: ReactJS.
Benefits of Headless E-commerce
Track custom storefronts. Monitor customer behavior across your ReactJS UI, including page views, product clicks, and cart adds.
Use Omnisend Signup Forms. Embed email/SMS opt-in forms anywhere in your custom front end.
Automate based on store data. Trigger Welcome, Abandoned Cart, and Order Confirmation workflows using backend order events.
Faster performance. Your lightweight ReactJS front end stays fast while Omnisend handles backend automation and campaigns.
Setup Process
To integrate your Shopify, WooCommerce, or BigCommerce headless store with Omnisend, follow these two essential steps:
Step 1: Connect Your Store Backend
In your Omnisend account, go to Dashboard → Connect your store.
Select your platform (Shopify, WooCommerce, or BigCommerce) and follow the connection steps. Learn more about the connection steps based on your e-commerce platform.
💡 This enables out-of-the-box features like campaigns, Abandoned Checkout automation, and order confirmations. Find more details below.
Step 2: Connect Your Frontend via Omnisend API
Follow these steps to activate tracking, forms, and cart-based automation on your ReactJS front end.
Add the Omnisend JavaScript Snippet: Copy and paste the Omnisend JS snippet into your site's
<head>tag. This enables Signup Forms, Welcome Automation, and Back-in-Stock workflows to run automatically.Get the snippet: Omnisend JS Snippet Documentation
Track Viewed Page and Viewed Product Events: Add event triggers to your shop code to send page-view and product-view data to Omnisend. This enables automation for Browse Abandonment and Product Abandonment.
Code example: Event Tracking Documentation
Track Added Product to Cart Events: Send "Added Product to Cart" events whenever a customer adds an item. This powers Abandoned Cart Automation.
Event payload structure: Added Product to Cart Documentation
Example code:
omnisend.push(["track", "added product to cart", { "abandonedCheckoutURL": "...", ... }])
What Works Out of the Box (Backend Only)
Once you connect your store backend in Step 1, these features work automatically:
Welcome Automation – Greet new subscribers from native Shopify Forms.
Email Campaigns – Send newsletters to your contact list.
Ads Sync – Create lookalike audiences on Meta or Google.
Abandoned Checkout Automation – Recover checkouts started at your store's native checkout.
Order & Shipping Confirmation Emails – Auto-send transactional emails after purchases.
Product Review & Feedback Automation – Ask customers to review recent purchases.
Cross-Sell & Reactivation Workflows – Suggest related products or re-engage inactive customers.
What Requires Frontend Setup (API)
These features need Step 2 (API integration) to work:
Omnisend Signup Forms – Display pop-ups, embedded forms, or landing pages on your ReactJS site.
Welcome Automation (from Omnisend Forms) – Trigger workflows when visitors submit your custom forms.
Abandoned Cart Automation – Track cart adds on your frontend (not just checkout).
Product & Browse Abandonment – Re-engage visitors who view products or browse pages.
Back in Stock Automation – Notify customers when out-of-stock items return.
Customer Session Tracking – Monitor page views and product clicks.
Next Steps
Now that your headless store is connected, set up your first automation workflows:
Welcome Automation – Greet new subscribers.
Abandoned Cart Automation – Recover lost sales.
Abandoned Checkout Automation – Follow up on incomplete orders.
Product Abandonment – Re-engage visitors who viewed products.
Browse Abandonment – Bring back browsing visitors.
💡 Need developer resources? Read the full Omnisend API documentation.
FAQ
Do I need to add the JavaScript snippet if I've already connected my Shopify, WooCommerce, or BigCommerce store?
Yes for headless setups. When you connect your store backend, Omnisend automatically syncs orders, customers, and products. But for frontend tracking (viewed product, added to cart, browse abandonment), you must add the JavaScript snippet to your custom ReactJS front end.
What's the difference between frontend tracking and backend integration?
Frontend tracking (JavaScript snippet): Tracks browsing behavior (
page viewed,product viewed), displays Signup Forms, and enables Browse Abandonment. Does not sync products, orders, or cart data.Backend integration (store connection): Syncs products, customers, orders, and sends checkout events needed for Abandoned Checkout Automation, Order Confirmation, and revenue reporting.
Headless stores need both to unlock full Omnisend functionality.
How do I verify that Omnisend is receiving my custom events?
Go to Store Settings → API → API Logs in your Omnisend account. You'll see incoming events with timestamps, event names, contact IDs, and any error messages.
If you have any questions, please feel free to connect with our Support Team via in-app chat or [email protected].