All Collections
Troubleshooting & FAQs
The add to cart button doesn't update the shopping cart icon
The add to cart button doesn't update the shopping cart icon

#add-to-cart #buttons #quiz #shopping-cart

Mark Baek avatar
Written by Mark Baek
Updated over a week ago

When a product is added to a cart through an Octane AI quiz, the website's shopping cart icon may not show a visible change even if the product was successfully added.

Use this guide to learn why this happens, and what you can do.

๐Ÿ’ก What you'll learn

  • Why the shopping cart icon doesn't change

  • How to use the add to cart custom event

๐Ÿ’ก Prerequisites

The developer tools described in this guide are available on Octane Plus.

Shopping cart compatibility

Although Octane AI is designed to connect with Shopify stores using any theme, the exact way each theme's code is unique to each theme.

While this means merchants have access to a wide variety of store looks without needing to code a theme on their own, some themes will only reflect shopping cart changes from a quiz once the website is refreshed or a new page is navigated to.

Adding compatibility manually

Quizzes can be connected to your website's shopping cart icon through Octane AI's add to cart custom event.

This is a custom event that Octane Plus quizzes fire every time an add to cart button is pressed from the quiz.

Code can then be added to the website that listens for this event, and performs a function when it sees the event fired from the quiz.

After you set your website up to listen for the add to cart custom event, you can then add code to trigger functions (such as updating the cart icon) when the event triggers.

๐Ÿ” How to listen for Octane AI's custom events

Code must be added to your website's theme code that lets the website listen for certain custom events.


document.addEventListener('octane.quiz.addToCart', function (e) {console.log('completed'); console.log(e.detail);}, false);

Inside of this code snippet, 'octane.quiz.addToCart' means the custom event that fires when the add to cart button is pressed is being listened for. You can also replace octane.quiz.addToCart with the following events:

  • octane.quiz.completed

    • Fired when someone sees a result page.

  • octane.quiz.accessed

    • Fired when someone views a quiz

Octane AI's developer tools

The same method above can be used for other custom functionalities, such as triggering a slide out cart from the quiz or even creating custom landing pages.

Read more about Octane AI's developer tools here.

Did this answer your question?