---
title: "How to edit Custom CSS"
url: https://help.biscuitsbundles.com/en/articles/9310095-how-to-edit-custom-css
collection: "Developer Friendly Features"
updated: 2026-10-30
language: en
---

# How to edit Custom CSS

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

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 CSS and JS fields if you are pasting directly from one of our wonderful customisation guides or have previous knowledge and understanding of CSS.

* * *

# 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 CSS

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

There are two options when using the custom CSS field

[**CSS Variables**](#h_1eb81bc3b5)

[**Regular CSS**](#h_1eb81bc3b5)

* * *

## CSS Variables

-   CSS variables allow for easy changes to a site styles without a merchant needing to write CSS code.
    
-   Here are 3 example variables available to change in Biscuits Bundles app block
    

<table style="min-width: 75px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><td colspan="1" rowspan="1" style="background-color: #e8e8e880; width: 229px;"><p class="no-margin"><strong>Description</strong></p></td><td colspan="1" rowspan="1" style="background-color: #e8e8e880; width: 265px;"><p class="no-margin"><strong>Name</strong></p></td><td colspan="1" rowspan="1" style="background-color: #e8e8e880;"><p class="no-margin"><strong>Value Example</strong></p></td></tr><tr><td colspan="1" rowspan="1" style="width: 229px;"><p class="no-margin">Show/hide the step number</p></td><td colspan="1" rowspan="1" style="width: 265px;"><p class="no-margin"><code>--biscuits-step-number-display</code></p></td><td colspan="1" rowspan="1"><p class="no-margin">block</p></td></tr><tr><td colspan="1" rowspan="1" style="width: 229px;"><p class="no-margin">Set the opacity of all unselected options</p></td><td colspan="1" rowspan="1" style="width: 265px;"><p class="no-margin"><code>--biscuits-unselected-opacity</code></p></td><td colspan="1" rowspan="1"><p class="no-margin">0.5</p></td></tr><tr><td colspan="1" rowspan="1" style="width: 229px;"><p class="no-margin">Show/hide soldout grid items</p></td><td colspan="1" rowspan="1" style="width: 265px;"><p class="no-margin"><code>--biscuits-soldout-display</code></p></td><td colspan="1" rowspan="1"><p class="no-margin">flex</p></td></tr></tbody></table>

[View full list of CSS Variables ›](https://help.biscuitsbundles.com/en/articles/9310131-custom-css-variables.md)

### Example

For this example we want to hide the number next to the step title

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

**CUSTOM CSS CODE**

```javascript
#shopify-block-#{{block.id}} .biscuits-bundle-form {
  --biscuits-step-number-display: none;
}
```

* * *

## Regular CSS

If the style change you would like to make doesn't have a corresponding CSS variable, you may write CSS to override the default behaviour of Biscuits Bundles.

**Where does it output?**

Your custom CSS code is placed near the top of our Shopify theme block code. This ensures that you can override style variables before our Apps main styles are applied, however this also means you will need to add `!important` to any additional CSS styles you include.

**Example**

For this example we will give the subtotal and total section a background colour, border and padding.

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

**CUSTOM CSS CODE**

```javascript
.biscuits-bundle-totals {
  background: white;
  border-radius: 4px;
  padding: 1rem;
}
```

💡 **Tip: Use** [**jsbin**](https://jsbin.com/?css,output) **to edit your custom CSS**  
We recommend using an in browser code editor like [jsbin](https://jsbin.com/?css,output) when creating your custom CSS if you aren't a developer. Text editor programs like google docs, word, notes can interpret your code characters incorrectly and break the code.

💾 Once you have pasted your custom CSS remember to save your theme.

* * *

# 3\. Developer Custom CSS

For advanced Custom CSS, read our in depth guide here.

[Developer Custom CSS Guide ›](https://help.biscuitsbundles.com/en/articles/9045765-custom-css.md)

* * *

# Common CSS Customisations

You can view some of our most common, simple Custom CSS snippets to easily DIY here:

[Common CSS Customisations >](https://help.biscuitsbundles.com/en/articles/10671859-common-css-customisations.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!