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.

Description	Name	Value Example
Show/hide the step number	`--biscuits-step-number-display`	block
Set the opacity of all unselected options	`--biscuits-unselected-opacity`	0.5
Show/hide soldout grid items	`--biscuits-soldout-display`	flex

View full list of CSS Variables ›

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
`data-biscuits-discount-type`	Know the discount type for the bundle—percentage, sum, you name it. Perfect for custom price displays.	`p`: percentage `f`: fixed `s`: sum of products `a`: amount discounted
`data-biscuits-highlight`	Know the highlight style and get creative with how bundle items stand out.	`outline` / `filled`

Step Level

Attribute
`data-biscuits-required`	1 or 0	`1` true `0` false
`data-biscuits-style`	Know the display style of the step and get creative with which elements are visible on your grid items.	`portrait` `portrait_compact` `horizontal` `horizontal_compact`
`data-bicuits-quantity-errors`	A simple true/false	`true` / `false`
`data-biscuits-selection-errors`	A simple true/false	`true` / `false`
`data-biscuits-errors`	A simple true/false	`true` / `false`
`data-biscuits-disable-unselected`	1 or 0, whether the styles of the step should disable other grid items when selection or quantity count meets the steps maximum	`1` true `0` false
`data-biscuits-max-selected-reached`	Whether the customer has selected the maximum number of items for the step	`true` / `false`
`data-biscuits-max-quantity-reached`	Whether the customer has selected the maximum quantity across the step	`true` / `false`

Grid Item Level

Attribute
`data-biscuits-available`	A simple true/false	`true` / `false`

Testing

Always thoroughly test your custom CSS to ensure it behaves as expected across all supported browsers and devices.

Could not display content

Help center