Cart upsells are one of the highest-ROI moves you can make — before touching any ads.
Before you can assign complementary products, Shopify needs to know the metafield exists.
Go to Shopify Admin → Settings → Custom data → Products → Add definition
and create it with the exact values below. This only needs to be done once per store.
# Fill in these exact values in the "Add definition" form: Name: Complementary products (Namespace — paste this exactly) Key: shopify--discovery--product_recommendation.complementary_products (The key is auto-generated when typing Complementary products Namespace) Type: List · Product (Select "Product" then toggle to List) Description: Complementary products (Optional but keeps admin clean)
There are two ways to assign complementary products. The easiest is the Search & Discovery app (free, built by Shopify). The second is directly through the product metafield in admin.
Option A — Search & Discovery app (recommended)
Open the Search & Discovery app from your Shopify admin. Navigate to
Product recommendations, search for a product, then click
Edit complementary products. Search and add up to 4 products that pair
well with it. Hit Save.
Shopify Admin
→ Apps
→ Search & Discovery
→ Product recommendations
→ Edit complementary products
→ Search & select up to 4 products
→ Save
shopify--discovery--product_recommendation.complementary_products metafield — the same one our Liquid code reads. Any product you link here will immediately appear in the cart upsell.
Option B — Directly in the product admin
Go to Shopify Admin → Products → [any product] → scroll to Metafields.
You'll see the Complementary products field you created in Step 1.
Click it and search to add products directly — no app needed.
Shopify Admin → Products → [Product name]
→ scroll to Metafields section
→ Complementary products
→ Search & select products
→ Save
Still in cart-drawer.liquid, find the closing </cart-drawer-items> tag and paste the full block
directly after it, before the div.drawer__footer:
{%- comment -%} ===== UPSELLS SECTION ===== {%- endcomment -%} {% style %} .cart-upsells-wrapper { padding-top: 10px; padding-bottom: 10px; border-top: 1px solid rgba(0, 0, 0, 0.08); } .cart-upsells-header { margin-bottom: 10px; } .cart-upsells-header h4 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: #555; font-weight: 500; } .cart_upsells { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; scroll-behavior: smooth; } .cart_upsells::-webkit-scrollbar { display: none; } .cart_upsells .upsell-item { flex: 0 0 80%; } .cart_upsells .card.card--standard.card--media.card--horizontal { display: grid; grid-template-columns: 0.4fr 1fr; border-radius: 8px !important; align-items: center !important; border: 1px solid rgba(0,0,0,0.08); overflow: hidden; } @media screen and (max-width: 767px) { .cart_upsells .card.card--standard.card--media.card--horizontal { grid-template-columns: 0.35fr 1fr; } } .cart_upsells .card__inner { height: 100%; } .cart_upsells .card__information { padding-top: 8px !important; padding-bottom: 8px !important; } .cart_upsells .card__heading { font-size: 12px !important; font-weight: 500; margin-bottom: 6px; } .cart_upsells .price { font-size: 12px !important; opacity: 0.8; } .cart_upsells .card--horizontal .media img { object-fit: cover !important; } .cart_upsells .quick-add__submit, .cart_upsells button { width: auto !important; min-width: auto !important; } .cart_upsells .quick-add__submit { padding: 6px 10px !important; font-size: 11px !important; min-height: unset !important; } @media screen and (min-width: 750px) { .cart_upsells .quick-add { opacity: 1 !important; } } .quick-add-modal[open][data-section="cart-drawer"] { z-index: 1001; } {% endstyle %} {% capture upsell_products %} {% for item in cart.items %} {% for upsell_product in item.product.metafields.shopify--discovery--product_recommendation.complementary_products.value %} {% assign upsell_already_in_cart = cart | line_items_for: upsell_product %} {%- if upsell_already_in_cart == blank -%} <div class="upsell-item"> {% render 'card-product', card_product: upsell_product, show_vendor: false, show_rating: false, quick_add: "standard", section_id: "upsell-cart", horizontal_class: true %} </div> {%- endif -%} {% endfor %} {% endfor %} {% endcapture %} {% if upsell_products != blank %} <div class="cart-upsells-wrapper"> <div class="cart-upsells-header"> <h4>67% also bought this...</h4> </div> <div class="cart_upsells"> {{ upsell_products }} </div> </div> {% endif %}
</cart-drawer-items> and before <div class="drawer__footer"> — this positions the upsell strip between the item list and the checkout button.
{{ 'quick-add.css' | asset_url | stylesheet_tag }} <script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script> <script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
Open layout/theme.liquid. Find the existing cart-drawer render line and replace it with the version below.
Wrapping it in a div with id="shopify-section-cart-drawer" lets Dawn's AJAX cart
re-render the full drawer — including your new upsell section — every time the cart updates, with zero extra JavaScript.
{%- comment -%} Original — comment this out {%- endcomment -%} {%- if settings.cart_type == 'drawer' -%} {%- render 'cart-drawer' -%} {%- endif -%}
<div id="shopify-section-cart-drawer" class="shopify-section"> {%- if settings.cart_type == 'drawer' -%} {%- render 'cart-drawer' -%} {%- endif -%} </div>
Go to Online Store → Themes → Customize → Theme Settings → Cart and set
the cart type to Drawer. The settings.cart_type == 'drawer'
condition in theme.liquid must evaluate to true for the drawer to render at all.
Change the social-proof heading to whatever fits your brand tone:
<h4>67% also bought this...</h4>
<!-- Other ideas: -->
<h4>Customers also love</h4>
<h4>Complete the look</h4>
<h4>You might also need</h4>
To control how many cards peek into view, adjust the flex value on
.upsell-item:
/* 80% = default | 90% = one card | 55% = peek two */ .cart_upsells .upsell-item { flex: 0 0 80%; }
Add an item to cart, open the drawer, and you should see complementary product cards scrolling horizontally below the item list. Products already in the cart are hidden automatically. Don't forget to assign complementary products to each item in your Shopify admin first!
I implement this kind of custom Shopify development daily — no apps, clean code, done fast. Tell me what you need and I'll get it done right.