Skip to main content
How to edit Custom CSS
Updated over a week ago

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.

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

  • 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



Value Example

Show/hide the step number



Set the opacity of all unselected options



Show/hide soldout grid items




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


#shopify-block-{{}} .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.


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


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

💡 Tip: Use jsbin to edit your custom CSS
We recommend using an in browser code editor like jsbin 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.

Stuck or got questions?

Use the chat widget below, or reach out to us at [email protected]

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

Did this answer your question?