Edit & Customization
This section guides you through customising the customisation of your BYOB bundle using custom CSS, and advanced styling options — so you can tailor the bundle experience to perfectly match your store’s design and branding.
In-App Editor
BundleSuite offers different customisation options for each type of bundle, so you can align your bundles with your store’s branding — no coding required in most cases!
Just click on the Launch Editor in your bundle page, make the necessary changes, hit Save.
For In-Page BYOB bundles, you get an intuitive in-app editor that gives you complete control over the layout and visual style:
Show or hide specific elements within the bundle layout
Edit headings, descriptions, and other content in real-time
Adjust font size, font style, and font-weight.
Customize button colors, spacing, and section background colors
All of this can be done directly from the In-Page BYOB Bundle Editor — no CSS knowledge needed!
Learn More About Editor Here : Launch Editor
Add Custom CSS or JS
BundleSuite supports advanced customizations through CSS and JS, allowing full control over styling and interactions.
To customize In-Page BYOB styles:
Go to Theme Customizer → App Embeds
Open BundleSuite Embed
Use the Custom CSS and Custom JS fields
You can tweak fonts, layout, colors, animations, and more using In-Page BYOB-specific class selectors.
🧩 Custom Class Field (for In-Page BYOB Bundles)
In the App Embed settings, you’ll find a Custom Class field for In-Page BYOB Bundles.
Purpose: This field lets you choose exactly where the bundle appears on your product page.
How it works:
Enter the class name of the section where you want the In-Page bundle to appear.
If you leave it blank, the bundle will automatically appear in the main section by default.
Example:
If your product description section has a class like .product-description, you can enter product-description in this field to display the bundle right below that section.
Last updated