All Collections
App Settings
Customization
How can I customize my bundle's appearance?
How can I customize my bundle's appearance?

Design Customization: Complete guide on customizing your bundle's appearance.

Updated this week

You can customize the design and appearance of your bundles according to your preferences in the Customization section.

If you don't find customization options for a section that you wish to change, such as the bundle builder, contact Fast Bundle support and we will help you with it. Our team is ready to assist you in achieving the desired outcomes for your bundles.

Unified Design Concept

When using the Fast Bundle customization tool, it's important to understand that the tool is designed to apply customization uniformly across all bundle types. This ensures a consistent look for your customers. Although different bundle types may have unique elements, common elements like the "Add to Cart" button will have the same design across all bundles.

If you need to differentiate the design for specific bundle types, you can use the "Custom CSS and JS" field in the customization section or contact Fast Bundle support.

Steps to Customize Your Bundles

1. Accessing the Customization Section


On the Fast Bundle admin panel, go to the "Customization" tab.


On the "Design" section, click on "Customize".



Here you can see an overall view of the Fast Bundle "Design Customization" tool.


2. Switching Views and Bundle Types

On the top of the page, you can change between different views that bundles appear there.



You can also change between different bundle types.



​3. Setting Background and Borders


​You can set the background of the bundle to be "Transparent" or set a color for it.






Next, you can set the border color, border width, and corner style.



4. Button Background

You can set the add to cart "Button" background and the button text color will change automatically based on the chosen background color.

If you want to change the text on the Add-to-Cart button, you can do so in the Translation section. For more details, see this article:


5. Customizing Text Color and Font


​You can choose your desired "Text" color and it will be applied to the bundle title, product title, total section, and prices.



You can write your desired "Font" to be applied to the bundle text or leave it empty to apply your default theme font. You can also change the font size.



If you want to change the text on your bundle, you can do so in the Translation section.


6. ​Additional Customization Options

​You have a variety of options for more customization in the "Additional customization" section.



Customizing Variant and Quantity Selector


You can set the background color for the "Select variant" section and the "Select variant" text color will change automatically.



You can also set the border color for this section.


Customize Badge Color


The "Badge color" will be applied for the bundle types that have a discount badge; Like the "Buy x get y" bundle.


Customizing Discount Option Section

In the "Discount options" section, which is exclusive to the "Product mix and match" bundle, you can set text and background color for the applied and unapplied discount options in the product mix and match bundle.


Change Bundles Page Layout

In the "Bundles page layout", you can set the layout and alignment of the "Bundles page".




Please note that the layout (horizontal or vertical) that you choose for the "Bundles page", will be applied to the bundles that you place in your shop using "Fast Bundle blocks" or "Custom liquid codes".

Title Alignment

"Title alignment" lets you change the bundle title position.


7. Custom CSS & JS


For changes not available through the Fast Bundle customization section, you can use the "Custom CSS & JS" section to add your own custom styles.




Did this answer your question?