Skip to main content
Developer Custom CSS

How you can make targeted styling changes with specific classes

Updated over a week ago

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

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.

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!

Did this answer your question?