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 ›

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

Regular CSS

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

View full list of CSS Variables ›

Example

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

CUSTOM CSS CODE

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

CUSTOM CSS CODE

.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.

Developer Custom CSS Guide ›

Common CSS Customisations

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

Common CSS Customisations >

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!