Choosing the right way to display product variants is essential for a seamless shopping experience. The Fast Bundle app lets you showcase bundle variants in multiple formats, making it easier for customers to find and select the options they want. In this article, weâll walk you through the different variant display types and show you how to use swatches in your bundle variant selector.
Variant Display Options in Fast Bundle
The Fast Bundle app provides two main ways to display variants in a bundle:
1. Drop-down
The drop-down variant selector is the default option. Customers can view and select different variants by expanding the drop-down menu. This is a simple and familiar way to present product options.
2. Swatches
The swatches variant selector displays variants as tiles, making it more visual and user-friendly. There are two types of swatches available:
Color Swatch: Shows each variant as a solid color tile.
Image Swatch: Displays an image for each variant as set in the Shopify panel.
Insert image
â ď¸ Important Note:
The Image Swatch option is available exclusively on the Standard 10K plan and Enterprise plan.
How to Set Swatches for Your Bundle
In the Fast Bundle app, there are three ways to access the variant selector type settings:
1. Via the Settings Tab
Go to Fast Bundle app > Settings tab
Locate Variant Selector Type and select Swatches
2. While Creating a Bundle
In the bundle creation page, expand the Advanced Settings section
Under Variants > Variant Selector, choose Swatches
3. For Existing Bundles
Go to Fast Bundle app > Bundles tab
Select the bundle you want to update
Expand the Advanced Settings section
Under Variants > Variant Selector, select Swatches
â ď¸ Important Note:
When accessing the Swatches settings on a bundleâs edit page, you can only set swatches for the product(s) included in that specific bundle. In contrast, the Settings tab allows you to configure swatches for all your product variants across your store.
I. Setting Color Swatch for Variants
When you click the âSet Swatchesâ button, a window will open showing the variant category name in the "Product Option" section, along with the values assigned to each category.
To assign a swatch for a variant, simply click on the icon below:
In the Color tab, you can set a color swatch for the selected variant. Choose your color by moving the cursor over the color picker, or enter a specific color code in the field below.
Click the âApply Changesâ button to save your selection.
Once applied, the color will be set for the variant as shown in the image below:
â ď¸ Why Some Colors Appear as White Tiles in the Color Swatch
When selecting Color Swatch as your variant selector type, some basic colors, such as red, black, white, and pink, are automatically assigned to variant options that have the same value name in Shopify.
(For example, if a variantâs value name is âRedâ, the red color swatch will automatically be applied to it.)
However, you may notice that certain colors appear as white tiles.
In this image, the color Pink was automatically detected and displayed correctly in the widget without any manual setup. Meanwhile, Light Blue appears as a white tile because itâs a less common color and needs to be manually configured in the Color Swatch settings.
Once you set the color following the steps explained above, it will be correctly displayed in the widget.
That said, itâs recommended to set each color manually in the Color Swatch settings to ensure that the variant tile displays the exact color code youâve defined for that variant in your Shopify settings.
II. Setting Image Swatches for Variants (Exclusively available on the Standard 10K and Enterprise plans)
To configure an Image Swatch for a variant, click on the âSet Swatchesâ button and select the icon below:
Then, click on the Image tab.
Youâll need the CDN link of the image you want to display, so click the button below to be redirected to the related tab in Shopify.
Find the picture of the variant in the list, and if you donât see the picture for the variant you want, use the Upload button to add it.
Next, click on the link icon to copy the CDN link.
Paste this URL into the following field and click the âApply Changesâ button to save your selection.
As you can see in the image below, the variant image is successfully shown in the bundle variant selector:
â ď¸ Avoiding Duplicate Image Swatches Across Products
Images set in the Image Swatch settings are linked to the variant name. This means that if two products share the same variant name, the same image will be applied to both.
For example, in the store below, we have two products: Batman Keychain and Double Zip Pencil Case, and both have a variant named Black. In the steps above, an image swatch was set for the Black variant. As a result, the same image appears for the Black variant of both products.
To prevent this, each product should have a unique variant name.
How to fix it in Shopify:
1. Go to Products > Variant section
2. Select the variant you want to edit and click on its variant name.
3. Use the Replace option to rename the variant
4. Add a new entity
5. Assign a unique name to this variant and save
After assigning a new name to this variant, go back to the Swatches settings in Fast Bundle, delete the old Black variant image, and configure the image swatch for the newly named variant.
This ensures each product has its own unique swatch, and everything will display correctly in the bundle selector.
Do All Bundle Types Support Swatches in the Variant Selector?
Swatches are supported in most bundle types; however, they are not available for the "Mix and Match" bundle and the Volume discounts bundle with the Free Gift template.
These specific bundle types utilize a drop-down variant selector due to their unique structure and functionality, which is not compatible with swatch-based displays.
We hope this article was helpful! If you have any further questions or need additional assistance, donât hesitate to reach out to the Fast Bundle support team. You can contact us through the following options:
Live Chat: Get instant help via live chat on our website or through the Fast Bundle admin panel in your Shopify dashboard.
âEmail: Send your inquiries to Support@fastbundle.co, and our team will respond as quickly as possible.
â
Weâre always here to assist you!