---
title: "How to customise accordion summary items"
url: https://help.biscuitsbundles.com/en/articles/12008054-how-to-customise-accordion-summary-items
collection: "Developer Documentation"
updated: 2026-10-01
language: en
---

# How to customise accordion summary items

# **Accordion Summary — Common CSS Customisations**

![](https://staticfiles.gleap.io/helpcenter/65b350631ff56ccfb3879048/20260331005945_7676.png)

## **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](https://help.biscuitsbundles.com/en/articles/9310095-how-to-edit-custom-css.md)

**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

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.

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

Hide the icon and show the numeric counter.  
​

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

Enable the display of the steps total price in the summary/step header.

```javascript
.biscuits-bundle-form {
  --biscuits-accordion-summary-price-display: block;
}
```

* * *

## **Adjust colours (placeholder, selected, borders, text)**

## Instructions

Set RGBA channel values as r,g,b,a (not rgba()), and the app will render them correctly.

  
Placeholder summary item

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

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

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

Match your theme’s radius and border thickness, or set explicit values.

```javascript
.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 [hello@sundaelane.com](mailto:hello@sundaelane.com)

Happy coding, and thanks for teaming up with Biscuits Bundles!