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: Each built-in theme has its own default values. The tables below show the defaults of the Soft theme, which new Bundly blocks use, and of the Minimal theme. To see the theme of your block, open the theme editor, select the Bundly block, and look at Styles → 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 Soft Minimal
--bundly-spacing-unit Base spacing unit 12px 10px
--bundly-grid-desktop-vertical-spacing Vertical spacing (desktop) 28px 28px
--bundly-grid-desktop-horizontal-spacing Horizontal spacing (desktop) 28px 28px
--bundly-grid-mobile-vertical-spacing Vertical spacing (mobile) 16px 16px
--bundly-grid-mobile-horizontal-spacing Horizontal spacing (mobile) 16px 16px

Typography

Variable Description Soft Minimal
--bundly-font-heading-family Heading font family initial initial
--bundly-font-heading-style Heading font style normal normal
--bundly-font-heading-weight Heading weight initial 700
--bundly-font-heading-scale Heading size multiplier 1.05 1.05
--bundly-font-body-scale Body text size multiplier (Not set) 1

Colors

Colors are specified in R, G, B  format (without rgb() ) for use with rgba() .


Variable Description Soft Minimal
--bundly-color-foreground Text color 0, 0, 0 0, 0, 0
--bundly-color-background Background color 255, 255, 255 255, 255, 255
--bundly-color-shadow Shadow color 0, 0, 0 14, 27, 77
--bundly-gradient-background Background gradient initial initial

Buttons

Primary Buttons

Variable Description Soft Minimal
--bundly-color-button Background color 0, 0, 0 0, 0, 0
--bundly-color-button-text Text color 255, 255, 255 255, 255, 255
--bundly-alpha-button-background Opacity 1 1
--bundly-buttons-radius Border radius 14px 0
--bundly-buttons-border-width Border width 1px 1px
--bundly-buttons-border-opacity Border opacity 0 0

Secondary Buttons

Variable Description Soft Minimal
--bundly-color-secondary-button Background color 255, 255, 255 255, 255, 255
--bundly-color-secondary-button-text Text color 0, 0, 0 0, 0, 0
--bundly-alpha-secondary-button-background Opacity 0 0
--bundly-secondary-buttons-border-opacity Border opacity 1 1

Button Effects

Variable Description Soft Minimal
--bundly-buttons-shadow-opacity Shadow opacity 0 0
--bundly-buttons-shadow-horizontal-offset Horizontal offset 0 0
--bundly-buttons-shadow-vertical-offset Vertical offset 0 0
--bundly-buttons-shadow-blur-radius Blur radius 0 0
--bundly-buttons-radius-outset Shadow border radius 14px 0px

Variant Pills (Option Selectors)

Basic Styling

Variable Description Soft Minimal
--bundly-variant-pills-radius Border radius 14px 40px
--bundly-variant-pills-border-width Border width 1px 1px
--bundly-variant-pills-border-opacity Border opacity 1 1

Effects

Variable Description Soft Minimal
--bundly-variant-pills-shadow-opacity Shadow opacity 0 0
--bundly-variant-pills-shadow-horizontal-offset Horizontal offset 0 0
--bundly-variant-pills-shadow-vertical-offset Vertical offset 0 0
--bundly-variant-pills-shadow-blur-radius Blur radius 0 0

Color Swatches

Variable Description Soft Minimal
--bundly-variant-pills-swatch-background Swatch background (per swatch) (Dynamic) (Dynamic)

Product Cards

Structure

Variable Description Soft Minimal
--bundly-product-card-color-foreground Text color 0, 0, 0 0, 0, 0
--bundly-product-card-color-background Background color 255, 255, 255 255, 255, 255
--bundly-product-card-color-background-opacity Background opacity 0 0
--bundly-product-card-corner-radius Border radius 0rem 0rem
--bundly-product-card-border-width Border width 0rem 0rem
--bundly-product-card-border-opacity Border opacity 1 1

Content

Variable Description Soft Minimal
--bundly-product-card-image-padding Image padding 0rem 0rem
--bundly-product-card-content-padding Content padding 0rem 0rem
--bundly-product-text-alignment Text alignment start start

Effects

Variable Description Soft Minimal
--bundly-product-card-shadow-opacity Shadow opacity 0 0
--bundly-product-card-shadow-horizontal-offset Horizontal offset 0rem 0rem
--bundly-product-card-shadow-vertical-offset Vertical offset 0 calc(0.4 * var(--bundly-spacing-unit))
--bundly-product-card-shadow-blur-radius Blur radius 0 calc(0.5 * var(--bundly-spacing-unit))

Media & Images

Variable Description Soft Minimal
--bundly-media-radius Image border radius 0 0
--bundly-media-border-width Image border width 0 0
--bundly-media-border-opacity Image border opacity 1 1

Badges (e.g. Sold Out)

Variable Description Soft Minimal
--bundly-badge-corner-radius Border radius 100px 0
--bundly-color-badge-background Background color 238, 241, 234 239, 240, 245
--bundly-color-badge-foreground Text color 0, 0, 0 14, 27, 77
--bundly-color-badge-border Border color 238, 241, 234 14, 27, 77
--bundly-alpha-badge-border Border opacity 1 1

Modal / Popup

Variable Description Soft Minimal
--bundly-popup-corner-radius Border radius 14px 0
--bundly-popup-border-opacity Border opacity 0 0
--bundly-modal-padding Modal inner padding 20px calc(2 * var(--bundly-spacing-unit))

Animation

Variable Description Soft Minimal
--bundly-duration-short Short animation duration 100ms 100ms

Need help applying custom styles? Reach out to our support team, we’re happy to help

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us