Frequently Bought Together Long Horizontal Display
FBT is a very common offer style that most customers are familiar with it from bigger e-commerce platforms like Amazon. Because of the popularity of this format, this type of display tends to convert well in any e-commerce store.
We recommend you use the Long Horizontal Look display style to better resemble the easily recognizable Frequently Bought Together offer you would see in stores like Amazon. In order to do this, you will need to choose the Wide Vertical Offer display.
Once you've selected a combination of products that are usually purchased together and created the offer, the only thing left to do is customize the look. You can do this with our custom editor, which allows you to adjust every element of the design—from text to button animations—in minute detail. Or, you can choose from our 100+ presets.
Once you are happy with the look of the bundle offer you can use our dynamic selector and choose the best position to place the offer on the product page.
For this display structure, we recommend you use a placement that is wide enough to accommodate it and make it blend well with the rest of your website. Our most recommended placement is right underneath the product images and product description and for this, you need to make sure that using the dynamic selector you pick the element that includes both columns.
This is made easier by our dynamic injector that allows you to select the Parent element of any of the smaller elements on the page and continue to go up the chain until you’ve found the larger element or section you’re looking for. The yellow line is only showing elements as you hover and you need to click on it to select it and it will be green when the element is selected.
After choosing the injection placement save and launch. You’ll now be able to check the look on the store page to make sure the placement is exactly how you wanted it.
“Shop The Look” Tiered Offers
A unique option offered by Bundle Bee is the tiered sliding feature with which you can create multiple auto-sliding offers that increase your chances of having your customers find a deal that’s perfect for them. To create this, you’ll need to select the Tiered Bundle Offer. By default, the bundle will be displayed on the product pages for the products included.
Please note: For more information on the difference between product and variant level specificity check out this article.
The next step would be selecting the desired Display structure. Choose either the vertical or horizontal one based on the available space and your desired positioning on the product page.
In this example, we’ll use one of the Multiple Auto Slide display options because we want our customers to be able to freely browse the different combos available and easily go back and forth between each one using the arrows.
We’ll now start by creating our first offer - referred to as the first tier. You can choose the products to be included, write a special Tier 1 title that reflects the offer by clicking the Edit icon and create the discount and top bundle message. In our example, for our first combo offer, we’ve chosen a pink dress with matching pink shoes and a pink handbag that will give our customers a 10% discount if bought together.
We’ll repeat this process and create 2 more tiered offers for a dress, shoes and handbag in matching colors. You can offer your customers higher discounts for less popular variants- for example, we’ve chosen a 15% discount for the tier combo with the handbag, shoes and dress in blue.
Once the 3 different combo offers are created we can move on to customization. Please note: As mentioned above, you can do this using the custom editor that allows you to oversee each element of the design from the text down to button animations in minute detail, or alternatively, you can choose one of the over 100 presets that we offer.
For this example, we opted for a simple look so we only customized the product description font, button color and tier title position.
We position our tiered combo of offers using the display relative to custom element method. For this offer, we choose the Vertical look, which means we can place the offer in a less wide area, such as the product details column at the top of the page.
Again, as seen in the above video, the element you’re hovering over will be highlighted by an interrupted yellow line. You can select any element on the page to position your bundle relative to and it will be highlighted by an interrupted green line.
After choosing the position on the product page, the last step is to confirm the look on the storefront.
Tiered Product Breaks Minimal Look
The minimalist tier offer is designed to offer bulk buy/quantity discounts for one specific product. We recommend using a product that doesn’t have variants and for which quantity break discounts make sense. In our example, we’ll use clay pellets for potting plants.
To start off, we’ll name our bundle and select Product level specificity, Tiered Bundle Offer and choose to display it on the page of the product included in the bundle.
For the display, we select the Minimalist Tiered Offers.
To build the offer simply select one product and add as many tiers as needed. Each tier should offer a greater discount for a higher quantity bought. Each new tier added will be displayed as an extra line.
With our example, we’ve chosen to offer our customers a 5% discount for buying 2 bags of clay pellets, 15% for buying 6, and finally 25% off for 10.
The final step is customizing the look of the offer. As the look is intended to be minimalist, we only customized the title and the button.
As in previous examples, inject the bundle, confirm the display and launch.
We choose to place it below the Buy Button.
By following the Product page redirect on the last step, we can confirm we are happy with the placement and confirm the result.