---
title: "Developer Custom CSS"
description: "How you can make targeted styling changes with specific classes"
url: https://help.biscuitsbundles.com/en/articles/9045765-developer-custom-css
collection: "Developer Documentation"
updated: 2026-03-31
language: en
---

# Developer Custom CSS

How you can make targeted styling changes with specific classes

## **Getting Started**

Make sure you have read about editing Custom CSS in Biscuits App block

[How to edit Custom CSS ›](https://help.biscuitsbundles.com/en/articles/9310095-how-to-edit-custom-css.md)

* * *

## 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.

```javascript
<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.

<table style="min-width: 75px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><td colspan="1" rowspan="1" style="background-color: #e8e8e8; width: 229px;"><p><br>​<strong>Description</strong></p></td><td colspan="1" rowspan="1" style="background-color: #e8e8e8; width: 265px;"><p><strong>Name</strong></p></td><td colspan="1" rowspan="1" style="background-color: #e8e8e8;"><p><strong>Value Example</strong></p></td></tr><tr><td colspan="1" rowspan="1" style="width: 229px;"><p>Show/hide the step number</p></td><td colspan="1" rowspan="1" style="width: 265px;"><p><code>--biscuits-step-number-display</code></p></td><td colspan="1" rowspan="1"><p>block</p></td></tr><tr><td colspan="1" rowspan="1" style="width: 229px;"><p>Set the opacity of all unselected options</p></td><td colspan="1" rowspan="1" style="width: 265px;"><p><code>--biscuits-unselected-opacity</code></p></td><td colspan="1" rowspan="1"><p>0.5</p></td></tr><tr><td colspan="1" rowspan="1" style="width: 229px;"><p>Show/hide soldout grid items</p></td><td colspan="1" rowspan="1" style="width: 265px;"><p><code>--biscuits-soldout-display</code></p></td><td colspan="1" rowspan="1"><p>flex</p></td></tr></tbody></table>

[View full list of CSS Variables ›](https://help.biscuitsbundles.com/en/articles/9310131-custom-css-variables.md)

**EXAMPLE**

```javascript
#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**

<table style="min-width: 75px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><td colspan="1" rowspan="1" style="background-color: #e8e8e880;"><p><strong>Attribute</strong></p></td><td colspan="1" rowspan="1" style="background-color: #e8e8e880;"><p></p></td><td colspan="1" rowspan="1" style="background-color: #e8e8e880;"><p></p></td></tr><tr><td colspan="1" rowspan="1"><p><code>data-biscuits-discount-type</code></p></td><td colspan="1" rowspan="1"><p>Know the discount type for the bundle—percentage, sum, you name it. Perfect for custom price displays.</p></td><td colspan="1" rowspan="1"><p><code>p</code>: percentage<br>​<br>​<code>f</code>: fixed<br>​<br>​<code>s</code>: sum of products<br>​<br>​<code>a</code>: amount discounted</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>data-biscuits-highlight</code></p></td><td colspan="1" rowspan="1"><p>Know the highlight style and get creative with how bundle items stand out.</p></td><td colspan="1" rowspan="1"><p><code>outline</code> / <code>filled</code></p></td></tr></tbody></table>

## **Step Level**

<table style="min-width: 75px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><td colspan="1" rowspan="1" style="background-color: #e8e8e880;"><p><strong>Attribute</strong></p></td><td colspan="1" rowspan="1" style="background-color: #e8e8e880;"><p></p></td><td colspan="1" rowspan="1" style="background-color: #e8e8e880;"><p></p></td></tr><tr><td colspan="1" rowspan="1"><p><code>data-biscuits-required</code></p></td><td colspan="1" rowspan="1"><p>1 or 0</p></td><td colspan="1" rowspan="1"><p><code>1</code> true<br>​<br>​<code>0</code> false</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>data-biscuits-style</code></p></td><td colspan="1" rowspan="1"><p>Know the display style of the step and get creative with which elements are visible on your grid items.</p></td><td colspan="1" rowspan="1"><p><code>portrait</code><br>​<br>​<code>portrait_compact</code><br>​<br>​<code>horizontal</code><br>​<br>​<code>horizontal_compact</code></p></td></tr><tr><td colspan="1" rowspan="1"><p><code>data-bicuits-quantity-errors</code></p></td><td colspan="1" rowspan="1"><p>A simple true/false</p></td><td colspan="1" rowspan="1"><p><code>true</code> / <code>false</code></p></td></tr><tr><td colspan="1" rowspan="1"><p><code>data-biscuits-selection-errors</code></p></td><td colspan="1" rowspan="1"><p>A simple true/false</p></td><td colspan="1" rowspan="1"><p><code>true</code> / <code>false</code></p></td></tr><tr><td colspan="1" rowspan="1"><p><code>data-biscuits-errors</code></p></td><td colspan="1" rowspan="1"><p>A simple true/false</p></td><td colspan="1" rowspan="1"><p><code>true</code> / <code>false</code></p></td></tr><tr><td colspan="1" rowspan="1"><p><code>data-biscuits-disable-unselected</code></p></td><td colspan="1" rowspan="1"><p>1 or 0, whether the styles of the step should disable other grid items when selection or quantity count meets the steps maximum</p></td><td colspan="1" rowspan="1"><p><code>1</code> true<br>​<br>​<code>0</code> false</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>data-biscuits-max-selected-reached</code></p></td><td colspan="1" rowspan="1"><p>Whether the customer has selected the maximum number of items for the step</p></td><td colspan="1" rowspan="1"><p><code>true</code> / <code>false</code></p></td></tr><tr><td colspan="1" rowspan="1"><p><code>data-biscuits-max-quantity-reached</code></p></td><td colspan="1" rowspan="1"><p>Whether the customer has selected the maximum quantity across the step</p></td><td colspan="1" rowspan="1"><p><code>true</code> / <code>false</code></p></td></tr></tbody></table>

## **Grid Item Level**

<table style="min-width: 75px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><td colspan="1" rowspan="1" style="background-color: #e8e8e880;"><p><strong>Attribute</strong></p></td><td colspan="1" rowspan="1" style="background-color: #e8e8e880;"><p></p></td><td colspan="1" rowspan="1" style="background-color: #e8e8e880;"><p></p></td></tr><tr><td colspan="1" rowspan="1"><p><code>data-biscuits-available</code></p></td><td colspan="1" rowspan="1"><p>A simple true/false</p></td><td colspan="1" rowspan="1"><p><code>true</code> / <code>false</code></p></td></tr></tbody></table>

* * *

# Testing

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

**Could not display content**