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
Description | Name | Value Example |
Show/hide the step number |
| block |
Set the opacity of all unselected options |
| 0.5 |
Show/hide soldout grid items |
| flex |
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;
}
💾 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!