Getting Started
The following customisations require adding css code to your custom css field your Biscuits Bundle app block. If you haven't already, check out the guide for how to edit the custom css field in your Biscuits Bundle app block. How to edit custom CSS
Customisations are template specific
All bundle products that use this template will inherit the same styling. If you need a customisation to apply to just one bundle, create a dedicated template for that bundle.
Hide all step numbers (Now a feature)
New Feature
This customisation is now a feature in the Biscuits Bundle app, see Bundle Layout Settings for more information on how you can hide step numbers on your bundle.
Example
Example
Hide step number if only one step (Now a feature)
New Feature
This customisation is now a feature in the Biscuits Bundle app, see Bundle Layout Settings for more information on how you can hide step numbers on your bundle.
Example
Example
Hide a specific step number
Instructions
Instructions
Hide the step number of a single specific step.
Paste the following code into the custom css field
THEN adjust the 1 to be the step number you want to hide the step number for
[data-biscuits-step="1"] {
--biscuits-step-number-display: none;
}For example - to hide step 2's number
[data-biscuits-step="2"] {
--biscuits-step-number-display: none;
}Hide step error messages
Instructions
Instructions
Hide the error message that appears once a selection is made on a step.
We only recommend hiding this error message if you have display running totals enabled on your app block to display how many selections the customer has left.
Paste the following code into the custom css field
.biscuits-bundle-step__messages {
display: none !important;
}To hide a single steps errors add the step selector infront of the above code
[data-biscuits-step="2"] .biscuits-bundle-step__messages {
display: none !important;
}
Hide footer error messages
Instructions
Instructions
Hide the footer error messages that notify customers which step has an error preventing them from adding to cart.
Paste the following code into the custom css field
.biscuits-bundle-form__messages--error.biscuits-has-errors {
display: none !important;
}
Hide component product prices
Instructions
Instructions
Hide the display of product card prices.
This can be achieved with the display type portrait compact within bundle settings. However if your bundle rules requires a quantity selector, you will need to keep portrait and hide product price with custom code.
Paste the following code into the custom css field and hit save.
.biscuits-bundle-price {
display: none !important;
}
Adjust font size for step titles
Instructions
Instructions
Adjust the font size for step titles to be smaller or larger.
Biscuits inherits the font size and styling of your themes h3. Many themes default font size for a h3 can be quite large, leaving your bundle to inherit a larger than preferred heading.
Paste the following code into the custom css field
THEN change the 20px to be what ever font size you prefer and hit save.
.biscuits-bundle-form {
--biscuits-step-title-font-size: 20px;
}
Hide soldout/out of stock product cards (Now a feature)
New Feature
This customisation is now a feature in the Biscuits Bundle app, see Bundle Layout Settings for more information on how you can hide sold out product cards in your bundle.
Example
Example
Move soldout/out of stock product cards to the end of the grid/slider (Now a feature)
New Feature
This customisation is now a feature in the Biscuits Bundle app, see Bundle Layout Settings for more information on how you can hide sold out product cards in your bundle.
Example
Example
Make product card images square
Instructions
Instructions
Set the product card image to display square. This code sets the aspect ratio of the product card images and can also be used to make them portrait or landscape. It also updates the "object-fit" to be cover so your images fill the full width and height of the new aspect ratio.
Paste the following code into the custom css field and hit save.
.biscuits-bundle-form {
--biscuits-item-image-aspect: 1;
--biscuits-image-fit: cover;
}
For portrait you can replace the 1 with 0.7
For landscape you can replace the 1 with 1.6
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!