All Collections
App: Candy Rack
How to's
Candy Rack public API & options for developers
Candy Rack public API & options for developers

Candy Rack offers a public Window API that can improve the experience with the application.

Lucia Dvořáková avatar
Written by Lucia Dvořáková
Updated over a week ago

All code adjustments can be added to the head tag in the theme.liquid file or you can contact our support and we will happily assist you with any problem or customization request.

The customer success team has the ability to add these adjustments to a designated config.js file in our administration system, so access to the store is not required.

Custom Add To Cart button selectors

Candy Rack by default supports a variety of selectors to successfully trigger when Add To Cart button is clicked, yet it might happen that a theme uses selectors our app does not recognize. In that case, there is an option to specify custom selectors that are added to the array of supported selectors.

window.CANDYRACK_CUSTOM_BUTTON_SELECTORS = ['.atc-class-1','#atc-id']

Preventing Candy Rack to show based on a condition

In case the store uses some custom fields that need to be filled before clicking the Add To Cart button and our validation does not catch them, there is a way to manually prevent the popup to appear based on the return value of the following method.

// window.CANDYRACK_CAN_ATC: (button: HTMLElement) => boolean
window.CANDYRACK_CAN_ATC = (_button) => {
const input = document.querySelector('.custom-text-input')
if(input.value.trim().length === 0) {
return false
return true

The variant is not found

To successfully trigger the opening of the popup we need the right variant of the parent to determine the offers, it might happen, that our default selectors fail or don’t change when a different variant is selected. The function does not override default selectors and in case it returns undefined, the default case is handled. In case the variant can only be obtained via an asynchronous request, the response can be awaited.

// window.CANDYRACK_VARIANT_SELECTOR_FUNCTION: (button: HTMLElement) => Promise<number>;
const selectedVariant = button.closest('.variant-select')?.value
if(value) {
return Number(value)

Money formatting

Candy Rack supports the most popular multi-currency applications out of the box, it also formats the money based on the available APIs or theme settings. Yet, in case the formatting is not ideal, there is a way to override it.

// window.CANDYRACK_CUSTOM_FORMAT_MONEY: (amount?: number, currency: string) => string;
window.CANDYRACK_CUSTOM_FORMAT_MONEY = (amount, currency) => {
return `${currency} ${amount}`

Remove form validation

By default, Candy Rack handles form validation by triggering form.checkValidity(). Sometimes, this can cause issues, so the validation can be turned off completely.


Custom events

Candy Rack offers a range of custom events, that can be used to perform side effects - such as opening a drawer cart.

// Triggered when Add To Cart button is clicked
document.addEventListener('addToCartButtonClicked', (e) => {
// Some code

// Triggered when an offer is added
document.addEventListener('candyrack-offer-added', (e) => {
// Some code

// Triggered when an offer is removed
document.addEventListener('candyrack-offer-removed', (e) => {
// Some code

// Triggered when the popup closes
document.addEventListener('candyrack-closed', (e) => {
// Some code

If you're also interested in visual customizations of the pop-up, you can learn more in the How to customize the pop-up with CSS article.

Any questions? Click the chat icon at the bottom right of this page or email us at

Did this answer your question?