This guide will provide an overview of the different ways you can customize an add to cart (ATC) button.
💡 What you'll learn about
How to customize ATC button text & design (jump to section)
How to create an "Add all to cart" button (jump to section)
Inserting a custom link into the ATC button (jump to section)
Customizing ATC button behavior with code (jump to section)
Frequently asked questions (jump to section)
💡 Prerequisites
Octane Plus is required to insert a custom link into the ATC, or to use developer options.
How to customize ATC button text & design
Customizing ATC button text & behavior can be done inside of your results pages in the quiz editor. Customizing the design is done inside of the Design section.
📕 Customizing ATC button text & behavior
In the quiz editor, open the results page that you want to edit through the left menu.
Find the content block that holds the product(s) you want to edit.
In the left menu, expand the
BUTTON SETTINGSsection.Expand the "ADD TO CART" menu to edit your existing ATC button.
Click on "Add button" to add a new button under this content block's products.
Here, you'll be able to change what the ATC button does when it's clicked, as well as after it's been clicked. You can choose between these pre-set behaviors:
Button behavior | Before or after it's clicked? |
Add to cart | Before |
Go to checkout | Before & after |
Go to product page | Before & after |
To change the ATC button behavior to a custom link instead, jump to this section.
You can also switch what the button looks like between pre-set options. To edit each pre-set option, follow these steps:
📕 Customizing button design
In the quiz editor, go to the Design tab.
Go to "Colors & styles".
Scroll down in the left menu until you see the
BUTTONSsection.
You'll be able to change the colors and corner radius of the pre-set button options here.
How to create an "Add all to cart" button
"Add all to cart" buttons can be added in the TOP CONTENT or the BOTTOM CONTENT sections of a content block.
📕 Creating an "Add all to cart" button
In the quiz editor, open the results page that you want to edit through the left menu.
Find the content block where you want to add the button to.
In the left menu, expand the
TOP CONTENTor theBOTTOM CONTENTsection. This will affect whether the button appears above or below your products.Click "Add content".
Click on "Add all to cart" button.
💡 Here are some tips on the "Add all to cart" button
You can pick the specific content blocks that it adds products from, including different content blocks than the one that the button is in.
Creating a content block just for the "Add all to cart" button makes it easy to copy it into different results pages.
Custom links can't be added inside "Add all to cart" buttons.
Inserting a custom link into the ATC button
If your quiz logic type is set to Custom, you'll be able to replace the add to cart button functionality with a custom URL.
This is useful if you want to have the button link to a custom page instead of adding a product right away, or if your quiz is published on a non-Shopify store.
📕 Inserting a custom link into the ATC button
In the quiz editor, open the results page that you want to edit through the left menu.
Find the content block that holds the product(s) you want to edit.
In the left menu under
PRODUCTSclick on the product you want to edit.Under
PRODUCT DATA, expand the "Add to cart button" menu.Select the "Customize Add to cart button" option.
Customizing ATC button behavior with code
Octane AI includes custom Javascript events that can be used by developers to create new, code-based behaviors.
This includes custom events related to adding a product to the cart:
octane.quiz.addToCartoctane.quiz.addToCartError
These events can be used for a wide range of custom behaviors, but are especially useful for:
Triggering slide-out / tray shopping carts.
Updating the shopping cart icon.
Connecting quizzes to a non-Shopify checkout.
This article includes details on how to use this event for developers.
Frequently asked questions
Are there global add to cart button behavior settings?
Currently, ATC button behavior must be set per content block or product.
Content blocks can be copied across results pages, so you can create a template content block with the button behavior you'd like to have for all your pages and copy that across results.
How do I insert a custom ATC button link for dynamic and AI quizzes?
Custom ATC button links are available for custom quizzes only.
Why isn't my shopping cart updating when a product is added to the cart?
Some themes may not be able to visually react to a product being added to the cart from a quiz. In these cases, products are still being successfully added but won't visually update until the website is refreshed.
If this is happening with your website, this developer method can be used to create compatibility with your theme.