How to Add Complementary Products in Shopify Store (Boost AOV)

Also, if you need help improving rankings for these pages, consider working with a Shopify SEO agency.

Methods for adding Complementary Products in Shopify Store

There are several ways to add Complementary Products to your Shopify Store. Some of these are listed below: 

1. Installing Shopify Search & Discovery App (FREE & Recommended)
2. Manually Add Complementary Products Using Metafields
3. Install a Frequently Bought Together App

You can increase conversions further by adding estimated delivery dates or enabling fast payments like Apple Pay in Shopify.

Method 1: Installing Shopify Search & Discovery App (FREE & Recommended)

Shopify offers a Free app called the Search & Discovery app, which you can use to display complementary products and filters in your Shopify Store. Follow these steps to add complementary products using the Search & Discovery app.

Step 1: Navigate to Shopify Admin > Apps.

Step 2: Click the Apps and Sales Channel Settings button.

Step 3: Visit the Shopify App Store.

Step 4: Search for the app, such as the Shopify Search & Discovery App.

Step 5: Install the app.

Step 6: Reconfirm the installation process.

Step 7: Navigate to the Recommendations tab.

Step 8: Select the product where you want to add the complementary products.

Step 9: Search the product or click the Browse button.

Step 10: Select the desired products and click the Add button.

Step 11: Save the changes.

Note: Complementary products will be automatically displayed on your store if your theme supports them. Complementary products are often featured on product pages, such as You may also like or Pairs well with sections. 

If your theme doesn't show these suggestions properly, check first whether you have the correct layout or refer to our Shopify theme SEO-friendly optimization guide.

Method 2: Manually Add Complementary Products Using Metafields

If you do not want to install an app, then you can add complementary products using the Metafields. Navigate to Shopify Admin > Settings > Metafields and Metaobjects and create a product metafield named Frequently Bought Together. Follow these steps to add complementary products using the Metafields.

Step 1: Navigate to Shopify Admin > Settings.

Step 2: Scroll down to the Metafields and metaobjects tab.

Step 3: Click on the products metafields tab.

Step 4: Click the Add definition button.

Step 5: Name it Frequently Bought Together and select the type as product and choose the type as list.

Step 6: Save the changes.

Step 6: Navigate to Shopify Admin > Products.

Step 7: Select the product that you want to update.

Step 8: Scroll down to the Metafields section.

Step 9: Populate the data with the relevant product and save the changes.

Step 10: Navigate to Online Store > Themes > Edit Code.

Step 11: Go to the main-product.liquid file depending on the theme.

Step 12: Add this code at your desired location.

    
        {% assign fbt_products = product.metafields.custom.frequently_bought_together %}
        {% if fbt_products != blank %}
            <div class="page-width">
                <div class="fbt-wrapper">
                    <h3 class="fbt-heading">Frequently Bought Together</h3>
                    <div class="fbt-grid">
                        {% for card_product in fbt_products.value %}
                            <div class="fbt-card">
                                <a href="{{ card_product.url }}" class="fbt-card__image-wrapper">
                                    {% if card_product.featured_image %}
                                        <img
                                            src="{{ card_product.featured_image | img_url: '400x' }}"
                                            alt="{{ card_product.featured_image.alt | escape }}"
                                            class="fbt-card__image"
                                        >
                                    {% endif %}
                                </a>

                                <div class="fbt-card__info">
                                    <h4 class="fbt-card__title">
                                        <a href="{{ card_product.url }}">{{ card_product.title }}</a>
                                    </h4>
                                    <p class="fbt-card__price">
                                        {{ card_product.price | money }}
                                    </p>
                                    <a href="{{ card_product.url }}" class="fbt-card__btn">View Product</a>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        {% endif %}
    

Step 13: Add this CSS at the end of base.css or theme.css file, depending on the theme

    
        .fbt-wrapper {
            margin-top: 40px;
        }
        .fbt-heading {
            font-size: 24px;
            margin-bottom: 20px;
            font-weight: 600;
        }
        .fbt-grid {
            display: grid;
            gap: 20px;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        }
        .fbt-card {
            background: #fff;
            border: 1px solid #e5e5e5;
            border-radius: 10px;
            overflow: hidden;
            transition: all 0.25s ease;
            display: flex;
            flex-direction: column;
        }
        .fbt-card:hover {
            border-color: #d0d0d0;
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }
        .fbt-card__image-wrapper {
            display: block;
            width: 100%;
            overflow: hidden;
            border-bottom: 1px solid #eee;
        }
        .fbt-card__image {
            width: 100%;
            height: auto;
            transition: transform 0.3s ease;
            aspect-ratio: 1 / 1;
            display: block;
        }
        .fbt-card:hover .fbt-card__image {
            transform: scale(1.05);
        }
        .fbt-card__info {
            padding: 15px;
            text-align: center;
        }
        .fbt-card__title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 8px;
        }
        .fbt-card__title a {
            color: #111;
            text-decoration: none;
        }
        .fbt-card__price {
            font-weight: 700;
            margin-bottom: 12px;
        }
        .fbt-card__btn {
            display: block;
            background: #000;
            color: #fff;
            padding: 8px 12px;
            border-radius: 6px;
            text-decoration: none;
            font-size: 14px;
            transition: background 0.2s ease;
        }
        .fbt-card__btn:hover {
            background: #333;
        }
    

Step 14: Save the changes.

Method 3: Install a Frequently Bought Together App

If you want to use more advanced features, such as frequently bought together, dynamic bundles, or automatic upsells, then you can install a third-party app from the Shopify App Store. Follow these steps to install an app from the Shopify app store for advanced customizations. 

Step 1: Navigate to Shopify Admin > Apps.

Step 2: Click the Apps and Sales Channel Settings button.

Step 3: Visit the Shopify App Store.

Step 4: Search for the app, such as the Frequently Bought Together CBB App.

Step 5: Install the app.

Step 6: Reconfirm the installation process.

Step 7: Select the type of recommendations you want to display on your store and click the Next button.

Step 8: Select the location where you want to display the recommendations and click the Next button.

Step 9: Click the Enable on theme editor button.

Step 10: Check this box and save the changes.