Accordion Summary — Common CSS Customisations
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.
Change the width & aspect ratio of summary items
Instructions
Instructions
Set a fixed width and shape for each summary tile (square, portrait, landscape) and adjust spacing. --biscuits-accordion-grid-gap controls the spacing between tiles. Larger values = more space.
.biscuits-bundle-form {
--biscuits-accordion-item-width: 100px;
--biscuits-accordion-item-aspect-ratio: 1;
--biscuits-accordion-grid-gap: 8px;
}Tips
Square: 1
Portrait: 0.75 (taller than wide)
Landscape: 1.6 (wider than tall)
Show numbers instead of the “+” icon on the placeholder tile
Instructions
Instructions
Hide the icon and show the numeric counter.
.biscuits-bundle-form {
--biscuits-accordion-summary-icon-display: none; /* hide + icon */
--biscuits-accordion-summary-count-display: block; /* show number */
}Note: If both icon-display and count-display are set to block, they’ll overlap. Choose one based on your design preference.
Show the total price in the step header
Instructions
Instructions
Enable the display of the steps total price in the summary/step header.
.biscuits-bundle-form {
--biscuits-accordion-summary-price-display: block;
}
Adjust colours (placeholder, selected, borders, text)
Instructions
Instructions
Set RGBA channel values as r,g,b,a (not rgba()), and the app will render them correctly.
Placeholder summary item
.biscuits-bundle-form {
--biscuits-accordion-progress-background-color: 0,0,0,0;
--biscuits-accordion-progress-border-color: 225,225,225,1.0;
}
Selected/filled summary item
.biscuits-bundle-form {
--biscuits-accordion-success-background-color: 0,0,0,0;
--biscuits-accordion-success-border-color: 225,225,225,1.0;
}Count badge + page chrome
.biscuits-bundle-form {
--biscuits-accordion-page-background-color: 255,255,255,1.0;
--biscuits-accordion-text-color: 0,0,0,1.0;
}
Roundness & border weight
Instructions
Instructions
Match your theme’s radius and border thickness, or set explicit values.
.biscuits-bundle-form {
--biscuits-accordion-item-border-radius: 6px;
--biscuits-accordion-primary-border-thickness: 2px;
}
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!