Customize the Bundle Page

Create a bundle page that feels 100% on-brand by tweaking texts, colours, spacing, and scroll behaviour with a few lines of CSS. All snippets below go into Theme editor → Bundle Information app block → Custom CSS. Don’t forget to Save when you’re done.

Change text on the page

Open the bundle in Bundly.
Click Customize texts.
Edit button labels, headings, or helper copy as needed, then Save.

Style the Add to cart button

Adjust colour or shape to match your theme:

.bundly__block {
  --bundly-color-button: 214, 35, 35; /* brand red in RGB */
  --bundly-buttons-radius: 10px; /* shape */
}

Add side padding to the bundle page

Some themes don’t add horizontal spacing by default. Use this snippet to add left and right margins:

.bundly__block {
  margin-right: 25px;
  margin-left: 25px;
}

Increase or decrease 25px until it looks right.

Keep sticky headers from covering selected components

If your theme uses a sticky (fixed) header, tell the browser to scroll a bit lower whenever Bundly focuses a component:

.bundly__component {
  scroll-margin-top: 75px;
}

Replace 75px with your actual header height.

Need a hand or want a second opinion? Just let us know at support@bundly.app — we are always here to help!