Getting Started
Make sure you have read about editing Custom CSS in Biscuits App block
Where does your custom code 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.
<styles>
/* Biscuits Bundles Variables get declared first */
.biscuits-bundle-form {
--biscuits-color-text: ...
--biscuits-color-card: ...
...
}
<styles>
<styles>
/* Your custom CSS will output here */
</styles>
<link rel="stylesheet" href="biscuits-section-bundle-product.css">
<!-- Biscuits Bundles code -->
CSS Variables
What CSS variables are available?
Our app features two kinds of CSS variables.
Primary Variables
The primary variables are connected to settings in the block customizer, making them easy to adjust from there with no extra CSS required.
Secondary Variables
Our secondary variables are set up for you to customize with your own CSS. Typically, you'll mainly need to tweak these secondary variables. However, if you want to change the base styles, you can inspect your theme to find and override the primary variables as needed.
| 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
#shopify-block-{{block.id}} .biscuits-bundle-form {
--biscuits-image-radius: 10px;
--biscuits-soldout-display: none;
--biscuits-soldout-order: 1;
--biscuits-divider-width: 2px;
--biscuits-step-number-display: none;
--biscuits-quantity-input-height: 45px;
--biscuits-max-width: 1600px;
--biscuits-slider-button-height: 40px;
--biscuits-item-image-aspect: auto;
--biscuits-image-fit: contain;
}
Custom Data Attributes
We aim to keep you fully informed as our <biscuits-bundle-form> and its steps go through validation. Our forms, along with their child elements, are equipped with data attributes that provide insights into the form's current state, allowing you to easily adjust styles to reflect errors and success.
Form Level
Attribute |
|
|
| Know the discount type for the bundle—percentage, sum, you name it. Perfect for custom price displays. |
|
| Know the highlight style and get creative with how bundle items stand out. |
|
Step Level
Attribute |
|
|
| 1 or 0 |
|
| Know the display style of the step and get creative with which elements are visible on your grid items. |
|
| A simple true/false |
|
| A simple true/false |
|
| A simple true/false |
|
| 1 or 0, whether the styles of the step should disable other grid items when selection or quantity count meets the steps maximum |
|
| Whether the customer has selected the maximum number of items for the step |
|
| Whether the customer has selected the maximum quantity across the step |
|
Grid Item Level
Attribute |
|
|
| A simple true/false |
|
Testing
Always thoroughly test your custom CSS to ensure it behaves as expected across all supported browsers and devices.
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!