---
title: "How to edit Custom JS"
url: https://help.biscuitsbundles.com/en/articles/9310206-how-to-edit-custom-js
collection: "Developer Friendly Features"
updated: 2026-07-12
language: en
---

# How to edit Custom JS

![](https://staticfiles.gleap.io/helpcenter/65b350631ff56ccfb3879048/20260331005943_6668.jpg)

Biscuits Bundles offers endless customisation with a **Custom CSS** and **Custom JS** fields in the Biscuits Bundle app block.

⚠️ We advise you only use custom JS field if you are pasting directly from one of our wonderful customisation guides or have previous knowledge and understanding of Javascript.

* * *

# 1\. Finding your App Block

If you haven't seen the Biscuits Bundle app block in your theme before, follow our guide on how to install Biscuits Bundle app block here.

[How to add Biscuits app block to your theme ›](https://help.biscuitsbundles.com/en/articles/9220075-how-to-add-biscuits-bundle-app-to-your-theme.md)

* * *

# 2\. Editing your Custom JS

Open your Biscuits Bundles app block in theme customiser, scroll down to the **Custom JS** field.

## Start right

Biscuits provides custom events for all of its major functionality. We recommend listening for the `BiscuitsBundleForm:ready` event to trigger your custom code. This will ensure all the correct components are initialised for you.

```javascript
document.addEventListener('BiscuitsBundleForm:ready', () => {
  //YOUR CODE HERE
});
```

[View full list of custom JS events ›](https://help.biscuitsbundles.com/en/articles/9045771-developer-javascript-and-events.md)

**⚠️ Don't** put the `:ready` event listeners inside of a "DOMContentLoaded" as our ready events will trigger before this.

### Example

For this example we want step 1 to act like a toggle when choosing the selected item.

![](https://staticfiles.gleap.io/helpcenter/65b350631ff56ccfb3879048/20260331005943_1170.png)

**CUSTOM JS CODE**

```javascript
document.addEventListener('BiscuitsBundleStep:ready', (event) => {
  let stepNumbers = [1,2,3];
  stepNumbers.forEach(function(stepNumber){
    let step = document.querySelector('[data-biscuits-step="'+ stepNumber+'"');
    if (step.dataset.biscuitsSelection != 's'){
      return;
    }
    let productItems = step.querySelectorAll('.biscuits-bundle-item');
    
    productItems.forEach(function(productItem){
      productItem.addEventListener('biscuits--product-selection', function(){
        if (productItem.classList.contains('biscuits--active')){
          let alreadySelectedItems = step.querySelectorAll('.biscuits-bundle-item.biscuits--active');
          alreadySelectedItems.forEach(function(selectedItem){
            if (selectedItem != productItem){
              selectedItem.click();
            }
          });
        }
      });
    });
  });
});
```

* * *

# 3\. Developer Custom JS

For more advanced details around Custom JS, read our in depth guide here.

[Developer Custom JS Guide ›](https://help.biscuitsbundles.com/en/articles/9045771-custom-javascript-and-events.md)

**Stuck or got questions?**

Use the chat widget below, or reach out to us at [hello@sundaelane.com](mailto:hello@sundaelane.com)

Happy coding, and thanks for teaming up with Biscuits Bundles!

  
​