Please note that while the following workarounds have been effective for some of our clients, our platforms do not officially support headless stores or the frameworks associated with them. We are actively working on enhancements to better accommodate these setups in the future. Currently, our support for headless stores is limited, and the solutions provided here are not guaranteed to work.

In simple terms, a headless store utilizes Shopify's backend without relying on its frontend. This architecture offers clients greater creative flexibility for theming and custom scripting, while still benefiting from Shopify's robust backend for processing transactions and purchases. Hydrogen is a popular framework that helps frontend developers easily build these custom storefronts for headless Shopify stores.

When implementing Octane AI quizzes on headless stores, several challenges may arise due to the unique frontend architecture. The most common issues include:

It’s important to thoroughly test the integration of Octane AI quizzes in your headless setup to identify and resolve these issues before launching the quiz publicly.

Regular embedded quizzes should work out of the box on most headless stores, including ones using Hydrogen, however, pop-up quizzes require some additional tinkering.

We use Shopify's Web Pixel to track revenue and conversion from the checkout page. You need to make sure your headless store supports the Web Pixel. You can check the Web Pixel API documentation here. Please note that this might require the help of a developer.

Unfortunately, there is no one-size-fits-all solution for CSS conflicts that may arise with Octane AI quizzes in headless stores, as these issues vary a lot from theme to theme. The best approach is to consult with a developer on your team to investigate the specific causes.

Additionally, our support team is available to assist you in reviewing your live quiz and identifying potential root causes for the CSS conflicts. Don’t hesitate to reach out for help!