Disclaimer
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.
What are Headless Stores and Hydrogen?
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.
Potential Issues with Using Octane AI Quizzes on Headless Stores
When implementing Octane AI quizzes on headless stores, several challenges may arise due to the unique frontend architecture. The most common issues include:
CSS Conflicts: The store's theme CSS may override the quiz's styling, leading to unexpected visual changes that can affect user experience.
JavaScript Interference: Custom JavaScript implemented on the headless store may conflict with the quiz script or disrupt the "add to cart" functionality, potentially hindering user interactions. This is because we rely on Shopify's
add.jsscript in order to make CartAPI integration work out of the box. In this case, you might need to implement this integration using our JavaScript events to properly integrate Cart functionality.
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.
Solutions for Issues with Octane AI Quizzes on Headless Stores
To address the common problems associated with Octane AI quizzes in headless stores, particularly when using pop-up quizzes, you can try the following quick fix:
Include the Shopify.js Script: Manually add the Octane AI's
shopify.jsscript in a script tag in your Hydrogen code, just as you do with thequiz.jsscript tag. For quizzes embedded in pop-ups, you should only need theshopify.jsscript included. This integration helps ensure compatibility with our pop-ups and stats-tracking features.
Addressing CSS Conflicts
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!