Common CSS customisations

Example

Example

Instructions

Hide the step number of a single specific step.

Paste the following code into the custom css field

THEN adjust the 1 to be the step number you want to hide the step number for

[data-biscuits-step="1"] {
--biscuits-step-number-display: none;
}

For example - to hide step 2's number

[data-biscuits-step="2"] {
--biscuits-step-number-display: none;
}

Instructions

Hide the error message that appears once a selection is made on a step.

We only recommend hiding this error message if you have display running totals enabled on your app block to display how many selections the customer has left.

Paste the following code into the custom css field

.biscuits-bundle-step__messages {
  display: none !important;
}

To hide a single steps errors add the step selector infront of the above code

[data-biscuits-step="2"] .biscuits-bundle-step__messages {
  display: none !important;
}

Instructions

Hide the footer error messages that notify customers which step has an error preventing them from adding to cart.

Paste the following code into the custom css field

.biscuits-bundle-form__messages--error.biscuits-has-errors {
  display: none !important;
}

Instructions

Hide the display of product card prices.

This can be achieved with the display type portrait compact within bundle settings. However if your bundle rules requires a quantity selector, you will need to keep portrait and hide product price with custom code.

Paste the following code into the custom css field and hit save.

.biscuits-bundle-price {
  display: none !important;
}

Instructions

Adjust the font size for step titles to be smaller or larger.

Biscuits inherits the font size and styling of your themes h3. Many themes default font size for a h3 can be quite large, leaving your bundle to inherit a larger than preferred heading.

Paste the following code into the custom css field
​THEN change the 20px to be what ever font size you prefer and hit save.

.biscuits-bundle-form {
--biscuits-step-title-font-size: 20px;
}

Example

Example

Instructions

Set the product card image to display square. This code sets the aspect ratio of the product card images and can also be used to make them portrait or landscape. It also updates the "object-fit" to be cover so your images fill the full width and height of the new aspect ratio.
​

Paste the following code into the custom css field and hit save.​

.biscuits-bundle-form {
  --biscuits-item-image-aspect: 1;
  --biscuits-image-fit: cover;
}

For portrait you can replace the 1 with 0.7
For landscape you can replace the 1 with 1.6

Instructions

Set the product card product title to display none. This code the display of the product title to none and updates the variant title to full opacity for better hierarchy.
​

Paste the following code into the custom css field and hit save.​

.biscuits-bundle-item__product-title {
display: none !important;
}

.biscuits-bundle-item__variant-title {
opacity: 1 !important;
}

​

Instructions

Adding this CSS to the Custom CSS setting in your app block will override the Step Layout settings for how many products appear per row (products per row).

This is helpful if you’re showing the same bundle on multiple pages (for example, on a product page and the home page) and want to use a different number of products per row on each page.

Adjust the products per row only for step 1:

/* Target only step 1 */
[data-biscuits-step="1"].biscuits-bundle-step  .biscuits-bundle-step__products {
    --biscuits-column-mobile: 50.0% !important; /* 2 columns */
    --biscuits-column-desktop: 25.0% !important; /* 4 columns */
}

Adjust the products per row for all steps

/* Target all steps */
.biscuits-bundle-step  .biscuits-bundle-step__products {
    --biscuits-column-mobile: 50.0% !important; /* 2 columns */
    --biscuits-column-desktop: 25.0% !important; /* 4 columns */
}