Edit & Customisation

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 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 BYOB Bundle Editor — no CSS knowledge needed!

Learn More About Editor Here :

Launch Editor

---

Advanced Customization (Using Custom Section Class)

You can inject the bundle directly after any specific section on your product template using the Custom Section Class.

Where to find it:

• Theme Customizer→ App Embeds→ BundleSuite Embed → Custom Section Class field

Instructions:

• Enter the class name of the section you want the bundle to appear after (without the dot)

• Leave blank if you want it to appear in the main section

Example: If your product description is wrapped in a section with class product-info, enter product-info

Custom Template

You can showcase your bundle alongside custom content by creating a custom product template in your Shopify theme. This allows you to add banners, FAQs, testimonials, or any additional sections that enhance the shopping experience. Here’s how to set it up:

1. Go to Online Store > Themes > Customize.

2. In the Theme Editor, open any product page.

3. From the top dropdown, click “Create template”, give it a name (e.g., custom-bundle), and save.

4. Assign your bundle product to this new template. You can do this either from:

   • The theme editor, or

   • The Products section in your Shopify admin.

5. Return to your Online Store > Themes, click the three dots next to the "Customize" button, and choose Edit Code.

6. In the Sections folder:

   • Click “Add a new section”, name it (e.g., bundle-custom).

   • Remove the default schema and paste a simple custom container like:

     <div class="my-bundle"></div>
     

7. In the Templates folder, find the new template you created (product.custom-bundle.json).

   • Add your new section (e.g., bundle-custom) into the section order.

   • Save the file.

8. Go back to the Theme Editor, open your BundleSuite Embed, and in the field labeled Custom Section Class, enter the class you used (e.g., my-bundle).

9. Save your changes. Your custom template is now ready — you can add banners, blocks, testimonials, or any Shopify section you’d like.

Watch Tutorial To Create Custom Template

Add Custom CSS or JS

BundleSuite supports advanced customizations through CSS and JS, allowing full control over styling and interactions.

To customize BYOB styles:

1. Go to Theme Customizer → App Embeds

2. Open BundleSuite Embed

3. Use the Custom CSS and Custom JS fields

You can tweak fonts, layout, colors, animations, and more using BYOB-specific class selectors.