Customize bundle appearance using CSS properties (variables)
You can fine-tune the appearance of your bundle pages using CSS variables. These variables are defined by Bundly’s built-in themes and can be overridden in your store’s CSS to match your brand’s design.
Note: The default values listed below are from the Minimal theme.
How to Use
To customize your bundle, target the .bundly__block class and override any of the variables below. For example:
.bundly__block {
/* Change primary button color to match brand */
--bundly-color-button: 255, 0, 0; /* Red */
/* Make buttons more rounded */
--bundly-buttons-radius: 8px;
/* Make images more rounded */
--bundly-media-radius: 12px;
--bundly-product-card-corner-radius: 12px;
}
These overrides will only affect the Bundly app blocks.
Layout and Spacing
| Variable |
Description |
Default |
--bundly-spacing-unit |
Base spacing unit |
10px |
--bundly-grid-desktop-vertical-spacing |
Vertical spacing (desktop) |
28px |
--bundly-grid-desktop-horizontal-spacing |
Horizontal spacing (desktop) |
28px |
--bundly-grid-mobile-vertical-spacing |
Vertical spacing (mobile) |
16px |
--bundly-grid-mobile-horizontal-spacing |
Horizontal spacing (mobile) |
16px |
Typography
| Variable |
Description |
Default |
--bundly-font-heading-family |
Heading font family |
initial |
--bundly-font-heading-style |
Heading font style |
normal |
--bundly-font-heading-weight |
Heading weight |
700 |
--bundly-font-heading-scale |
Heading size multiplier |
1.05 |
--bundly-font-body-scale |
Body text size multiplier |
1 |
Colors
Colors are specified in R, G, B format (without rgb() ) for use with rgba() .
| Variable |
Description |
Default |
--bundly-color-foreground |
Text color |
0, 0, 0 |
--bundly-color-background |
Background color |
255, 255, 255 |
--bundly-color-shadow |
Shadow color |
14, 27, 77 |
--bundly-gradient-background |
Background gradient |
initial |
Buttons
Primary Buttons
| Variable |
Description |
Default |
--bundly-color-button |
Background color |
0, 0, 0 |
--bundly-color-button-text |
Text color |
255, 255, 255 |
--bundly-alpha-button-background |
Opacity |
1 |
--bundly-buttons-radius |
Border radius |
0 |
--bundly-buttons-border-width |
Border width |
1px |
--bundly-buttons-border-opacity |
Border opacity |
0 |
Secondary Buttons
| Variable |
Description |
Default |
--bundly-color-secondary-button |
Background color |
255, 255, 255 |
--bundly-color-secondary-button-text |
Text color |
0, 0, 0 |
--bundly-alpha-secondary-button-background |
Opacity |
0 |
--bundly-secondary-buttons-border-opacity |
Border opacity |
1 |
Button Effects
| Variable |
Description |
Default |
--bundly-buttons-shadow-opacity |
Shadow opacity |
0 |
--bundly-buttons-shadow-horizontal-offset |
Horizontal offset |
0 |
--bundly-buttons-shadow-vertical-offset |
Vertical offset |
0 |
--bundly-buttons-shadow-blur-radius |
Blur radius |
0 |
--bundly-buttons-radius-outset |
Shadow border radius |
0px |
Variant Pills (Option Selectors)
Basic Styling
| Variable |
Description |
Default |
--bundly-variant-pills-radius |
Border radius |
40px |
--bundly-variant-pills-border-width |
Border width |
1px |
--bundly-variant-pills-border-opacity |
Border opacity |
1 |
Effects
| Variable |
Description |
Default |
--bundly-variant-pills-shadow-opacity |
Shadow opacity |
0 |
--bundly-variant-pills-shadow-horizontal-offset |
Horizontal offset |
0 |
--bundly-variant-pills-shadow-vertical-offset |
Vertical offset |
4px |
--bundly-variant-pills-shadow-blur-radius |
Blur radius |
5px |
Color Swatches
| Variable |
Description |
Default |
--bundly-variant-pills-swatch-background |
Swatch background (per swatch) |
(Dynamic) |
Product Cards
Structure
| Variable |
Description |
Default |
--bundly-product-card-color-foreground |
Text color |
0, 0, 0 |
--bundly-product-card-color-background |
Background color |
255, 255, 255 |
--bundly-product-card-color-background-opacity |
Background opacity |
0 |
--bundly-product-card-corner-radius |
Border radius |
0rem |
--bundly-product-card-border-width |
Border width |
0rem |
--bundly-product-card-border-opacity |
Border opacity |
1 |
Content
| Variable |
Description |
Default |
--bundly-product-card-image-padding |
Image padding |
0rem |
--bundly-product-card-content-padding |
Content padding |
0rem |
--bundly-product-text-alignment |
Text alignment |
left |
Effects
| Variable |
Description |
Default |
--bundly-product-card-shadow-opacity |
Shadow opacity |
0 |
--bundly-product-card-shadow-horizontal-offset |
Horizontal offset |
0rem |
--bundly-product-card-shadow-vertical-offset |
Vertical offset |
calc(0.4 * var(--bundly-spacing-unit)) |
--bundly-product-card-shadow-blur-radius |
Blur radius |
calc(0.5 * var(--bundly-spacing-unit)) |
Media & Images
| Variable |
Description |
Default |
--bundly-media-radius |
Image border radius |
0 |
--bundly-media-border-width |
Image border width |
0 |
--bundly-media-border-opacity |
Image border opacity |
1 |
Badges (e.g. Sold Out)
| Variable |
Description |
Default |
--bundly-badge-corner-radius |
Border radius |
0 |
--bundly-color-badge-background |
Background color |
239, 240, 245 |
--bundly-color-badge-foreground |
Text color |
14, 27, 77 |
--bundly-color-badge-border |
Border color |
14, 27, 77 |
--bundly-alpha-badge-border |
Border opacity |
1 |
Modal / Popup
| Variable |
Description |
Default |
--bundly-popup-corner-radius |
Border radius |
0 |
--bundly-popup-border-width |
Border width |
0 |
--bundly-popup-border-opacity |
Border opacity |
0 |
--bundly-popup-shadow-opacity |
Shadow opacity |
0 |
--bundly-popup-shadow-horizontal-offset |
Horizontal offset |
0 |
--bundly-popup-shadow-vertical-offset |
Vertical offset |
0 |
--bundly-popup-shadow-blur-radius |
Blur radius |
0 |
--bundly-modal-padding |
Modal inner padding |
calc(2 * var(--bundly-spacing-unit)) |
Animation
| Variable |
Description |
Default |
--bundly-duration-short |
Short animation duration |
100ms |
Need help applying custom styles? Reach out to our support team, we’re happy to help