Before You Begin
Target audience. These instructions are specifically tailored for Shopify (e.g., Shopify Hydrogen), WooCommerce, or BigCommerce stores that use ReactJS for their front end. While they might still apply to other platforms with ReactJS front-ends, we do not take responsibility for any issues or incompatibilities that may arise when implementing them on different platforms.
Platform: Shopify, WooCommerce, BigCommerce.
Front-end technology: ReactJS.
Benefits of Headless Ecommerce
Full creative control. The headless approach separates the front and back ends, giving merchants unparalleled freedom to design their storefronts without being constrained by available themes and templates. This means you can create more unique, engaging, and branded customer experiences.
Improved site performance. By decoupling the front end from the back end, you can optimize your site's performance and load times. The lightweight front end can render faster, improving user experience and possibly boosting conversion rates.
Integrate with your preferred tools and services. Since Headless utilizes APIs to connect front and back ends, you can easily integrate with other third-party tools and services.
How to Integrate?
To integrate your Shopify, WooCommerce, or BigCommerce headless store with Omnisend, follow these two essential steps:
Step 1: Store Connection. Enable out-of-the-box functionality by connecting your store through the Omnisend account.
Step 2: API Connection. Enable frontend-based features by connecting through Omnisend API (see instructions below).
Available Use Cases
Below is a list of use cases that are available with an Omnisend account out of the box based on your store’s back end.
Welcome automation to greet new subscribers that are coming from native Shopify Forms.
Sending campaigns to your subscribers.
Ads sync to find lookalike audiences on Meta or Google.
Recover lost sales via Abandoned Checkout automation.
Build trust by sending automated order or shipping confirmation emails.
Build relationships by asking for a product review or getting feedback about the product shoppers bought recently.
Suggest related products based on what shoppers are buying.
Remind them to purchase again or reactivate those who did not make a purchase recently.
Not Available Use Cases
Below is the list of use cases that are not available and need to be enabled on your store’s front end via Omnisend API.
Omnisend Forms on your store to collect subscribers.
Welcome automation based on Omnisend Forms.
Recovering lost sales via Abandoned Cart automation.
Recapture shoppers who view specific products and browse specific pages.
Re-engage with shoppers about the products when out-of-stock products are back in stock.
Customer session tracking.
Instructions
Below are the instructions on how to add missing use cases, i.e., Omnisend Forms, frontend-based customer events, and session tracking via Omnisend API.
Add our JS snippet https://api-docs.omnisend.com/v5/reference/javascript-snippet. Forms, Welcome, and back-in-stock automations will start working out of the box.
To send Viewed Page and Viewed Product events, add triggers in your shop code: https://api-docs.omnisend.com/v5/reference/event-tracking. Together with the JS snippet, this will enable tracking of customer sessions.
To send Added Product to Cart events, add triggers in your shop code. The event payload should look like this: https://api-docs.omnisend.com/v5/reference/added-product-to-cart.
Example of how to send the event:
omnisend.push(["track", "added product to cart", { "abandonedCheckoutURL": "...", ... }])