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
Instructions
Instructions
Hide the display of step numbers for all steps using our quick css variable.
Paste the following code into the custom css field and hit save.
.biscuits-bundle-form {
--biscuits-step-number-display: none;
}
Hide step number if only one step
Instructions
Instructions
Hide the step numbers only if the step has 1 step. This customisation for when you have more than 1 bundle product using the same template and you only want the single step bundles to hide their step numbers
Paste the following code into the custom css field
[data-biscuits-step="1"]:last-of-type .biscuits-bundle-step__number { display: none;
}
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 and hit save.
THEN change the 20px to be what ever font size you prefer.
.biscuits-bundle-step__number,.biscuits-bundle-step__title {
font-size: 20px !important;
}
Hide soldout/out of stock product cards
Instructions
Instructions
Hide products that are sold out and not available to add to the bundle.
Paste the following code into the custom css field and hit save.
[data-biscuits-available="false"].biscuits-bundle-item-card {
display: none !important;
}
Move soldout/out of stock product cards to the end of the grid/slider
Instructions
Instructions
Move products that are sold out and not available to add to the bundle to the end of the grid or slider, using our quick css variable.
Paste the following code into the custom css field and hit save.
.biscuits-bundle-form {
--biscuits-soldout-order: 1;
}
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!