+

Sample: Main product + 2 add-ons with live total and one-click add-all.

Liquid Code

{% comment %} LayoutKart - Frequently Bought Together (Dark Premium) {% endcomment %}
{% assign bundle_discount = 0.10 %}
<style>
.lk-fbt-b6{background:#0f172a;border:1px solid #1e293b;border-radius:12px;padding:20px;margin:24px 0;font-family:inherit;}
.lk-fbt-b6 h3{margin:0 0 6px;font-size:18px;}
.lk-fbt-b6 .lk-sub{margin:0 0 14px;font-size:13px;opacity:.65;}
.lk-fbt-b6 .lk-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.lk-fbt-b6 .lk-p{background:#fff;border:1px solid #eee;border-radius:10px;padding:10px;
width:150px;text-align:center;}
.lk-fbt-b6 .lk-p img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;}
.lk-fbt-b6 .lk-p .lk-t{font-size:13px;font-weight:600;margin:6px 0 2px;min-height:32px;}
.lk-fbt-b6 .lk-p .lk-pr{font-size:13px;font-weight:700;color:#22d3ee;}
.lk-fbt-b6 .lk-plus{font-size:22px;font-weight:700;color:#22d3ee;}
.lk-fbt-b6 .lk-total{display:flex;justify-content:space-between;align-items:center;
margin-top:16px;padding-top:14px;border-top:1px dashed rgba(0,0,0,.15);flex-wrap:wrap;gap:10px;}
.lk-fbt-b6 .lk-addall{padding:12px 26px;border:none;border-radius:10px;cursor:pointer;
background:#22d3ee;color:#0f172a;font-weight:700;font-size:15px;}
.lk-fbt-b6 input[type=checkbox]{width:18px;height:18px;accent-color:#22d3ee;}
@media(max-width:600px){.lk-fbt-b6 .lk-p{width:128px;}}
</style>
<div class="lk-fbt-b6" id="lkFbtb6">
  <h3>Frequently Bought Together</h3>
  <p class="lk-sub">Tick the items you want — save 10% when you bundle.</p>
  <div class="lk-row">
    <div class="lk-p">
      <img src="{{ product.featured_image | image_url: width: 300 }}" alt="{{ product.title | escape }}" loading="lazy">
      <p class="lk-t"><strong>This item:</strong> {{ product.title | truncate: 34 }}</p>
      <p class="lk-pr">{{ product.price | money }}</p>
      <label style="font-size:12px;"><input type="checkbox" checked disabled> Included</label>
    </div>
    {% for p in collections['bundle-addons'].products limit: 2 %}
    <span class="lk-plus">+</span>
    <div class="lk-p">
      <img src="{{ p.featured_image | image_url: width: 300 }}" alt="{{ p.title | escape }}" loading="lazy">
      <p class="lk-t">{{ p.title | truncate: 34 }}</p>
      <p class="lk-pr">{{ p.price | money }}</p>
      <label style="font-size:12px;"><input type="checkbox" class="lk-fbt-checkb6"
        data-price="{{ p.price }}" data-variant="{{ p.selected_or_first_available_variant.id }}" checked> Add</label>
    </div>
    {% endfor %}
  </div>
  <div class="lk-total">
    <div><span style="font-size:13px;opacity:.65;">Total for <span id="lkFbtNb6">3</span> items:</span><br>
    <strong id="lkFbtTotalb6" style="font-size:20px;">{{ product.price | money }}</strong></div>
    <button class="lk-addall" id="lkFbtBtnb6">Add Selected to Cart</button>
  </div>
</div>
<script>
(function(){
var box=document.getElementById('lkFbtb6');
var main={{ product.selected_or_first_available_variant.id }};
var mainPrice={{ product.price }};
function fmt(c){return '₹'+(c/100).toLocaleString('en-IN',{maximumFractionDigits:0});}
function recalc(){
var n=1,total=mainPrice;
box.querySelectorAll('.lk-fbt-checkb6:checked').forEach(function(cb){
n++;total+=parseInt(cb.getAttribute('data-price'),10);});
var disc=Math.round(total*0.10);
box.querySelector('#lkFbtNb6').textContent=n;
box.querySelector('#lkFbtTotalb6').textContent=fmt(total-disc)+' ';
var s=document.createElement('span');s.style.cssText='font-size:12px;color:#16a34a;font-weight:700;';
s.textContent='(10% off applied)';
box.querySelector('#lkFbtTotalb6').appendChild(s);}
box.querySelectorAll('.lk-fbt-checkb6').forEach(function(cb){cb.addEventListener('change',recalc);});
recalc();
box.querySelector('#lkFbtBtnb6').addEventListener('click',function(){
var items=[{id:main,quantity:1}];
box.querySelectorAll('.lk-fbt-checkb6:checked').forEach(function(cb){
items.push({id:parseInt(cb.getAttribute('data-variant'),10),quantity:1});});
this.textContent='Adding...';
fetch('/cart/add.js',{method:'POST',headers:{'Content-Type':'application/json'},
body:JSON.stringify({items:items})}).then(()=>location.href='/cart');});
})();
</script>

How to Add ‘Frequently Bought Together’ Section to Shopify

No app needed — this works with a free built-in Shopify feature called the Custom Liquid section. It takes about two minutes:

1. From your Shopify admin, go to Online Store → Themes.
2. Click Customize next to your live theme (works with Dawn and all Online Store 2.0 themes).
3. In the theme editor, use the top dropdown to navigate to your cart page (or product page for product-page effects).
4. In the left sidebar, click Add section → Custom liquid.
5. Delete the placeholder code, paste the code from your chosen variation above, and click Save.
6. Preview your store — the effect is live instantly. Drag the section up or down to reposition it.

Tip: Always duplicate your theme first (Themes → … → Duplicate) so you have a backup before editing.

Customize the ‘Frequently Bought Together’ Section

• Bundle products: replace the collection handle collections['bundle-addons'] with your own.
• Discount: change bundle_discount (0.10 = 10% off the add-ons) or set to 0 for no discount.
• Preselect: add checked to checkboxes you want ticked by default.
• Main product: the current product is always included — the box totals everything live via JS.

More Shopify Code Sections

Keep customizing your store with these copy-paste tutorials:

• Shopify Cart Upsell Section (You May Also Like)
• Shopify Product Page Custom Offer Box
• Shopify Product Page Discount Banner
• Shopify Sticky Add to Cart Bar
• Shopify Cart Free Shipping Progress Bar (Boost AOV)
• Shopify Product Page Stock Counter
• Shopify Product Card Quick View Button
• Shopify Cart Drawer Custom Design with Liquid
• Shopify Discount Code Copy Button

Conclusion

Bundling is the laziest way to raise average order value: the customer was already buying, you just made it easier to buy more. Pick a design, point it at the right add-on collection, and consider a small bundle discount to sweeten the deal. One click, three items, happier revenue per visitor.

Want a store that already has all of this built in? Check out LayoutKart’s readymade Shopify sections and templates — premium designs, clean Liquid code, ready to install.

Author: anurag Layoutkart