Frequently Bought Together

Author: Anna Nguyen 5115 views

The Frequently Bought Together extension will help you choose to display products that are often purchased with the same main product. You can select the products in a fixed way, or display the products related to the main product through the metafield. This strategy is used to encourage customers to buy more products.

Note: You can use this extension on Pro & Premium. Upgrade now to unlock

1. How to install the Frequently Bought Together extension

Step 1: From your EComposer dashboard, go to CRO Extensions from the left sidebar menu.
Step 2: Search for the Frequently Bought Together extension.
Step 3: Click Details and install the extension on your store.

2. Call the Extension to the Editor & Customize

Call the Extension to the Editor: Inside the EComposer editor, open the Extensions tab from the left sidebar, then find the Frequently Bought Together extension from the installed extensions list and drag it into your desired position on the page. After adding it successfully, you can start customizing the extension settings and style.

2.1. Show certain products

Select product: Manually pick which products appear in the Frequently Bought Together section. The products selected in the Editor will be applied across all product pages and cannot be set dynamically for individual products.

If you’re using a single product template for all products, we recommend using Shopify metafields to pull product data instead.

Note: If you select certain products in Ecomposer Editor, they will show as a priority. If not, it will show the products that you had picked in Product Metafield.

2.2. Show Metafield products

After installing the extension, the “EComposer product bundle” metafield will be added to Shopify: product.metafields.ecomposer.product_bundle

Please go to Shopify Settings -> Metafields and metaobjects -> Products to check if the Metafield is there or not

Step 1: Open the Main Product.
Step 2: Scroll to Metafield → click Show All.
Step 3: Find the EComposer Product Bundle metafield.
Step 4: Select the relevant products and drag & drop to reorder the display list.

As a result, you don’t need to select any products manually. It will automatically display the products (in order) based on what you selected in the EComposer Product Bundle metafield.

3. How to configure the Frequently Bought Together extension

3.1. Content

The Content tab is mainly used to configure what the extension displays and its basic behavior/layout as the heading text and the product list layout.

Heading / Add to Cart Text / Total Price: Customize the label text.
Design: Choose between 2 pre-made designs for the Frequently Bought Together extension.
Layout Type: Display the extension in horizontal or vertical layout.
Button Animation: Enable the shaking animation. Once enabled, the Loop Times setting will appear.
Show Compare-at Price: Enable to display the compare-at price, or disable to show the final price only.
Disable Auto Select Bundle Product: Disable auto-select so bundle product checkboxes are unchecked by default.
Exclude Main Product: Exclude the main product from the bundle list.

3.2. Design

In the Design tab, you’ll find a wide range of settings to customize the checkbox, text style, button, pricing color, and more. You can check the details below to learn more about these customisation options.

General: You can change the background and more of the extension here.
Heading/Product Title: It mainly allows you to customize the alignment, font style, and color of that part.

Items box/Product image/Total box: It allows you to adjust the width of the element you’re editing, as well as customize its border, border radius, spacing, and related settings.

For the Product Image element, you’ll also be able to adjust its height.

Product Price/Product compare at price/Total text/Total price/Total compare price: It mainly allows you to customize the font style through the Typography settings, including changing its color.

Checkbox: This is the checkbox beside the variant selected, the settings are covered here. For example, you can change from a square checkbox to a circle checkbox.

Variant Select/Button: This section primarily allows you to configure the element’s alignment, width, height, typography (font family, size, weight, etc.), and color through the available design settings.

4. Translate

If your store supports multiple languages, you can follow the steps below to translate the Frequently bought together extension content in your translation app.

Step 1: In your translation app (for example, the Translate & Adapt app shown in the screenshot), go to Default Theme Content.