how do I add quantity selector to "complimentary products"

[alanrichardtex]

Hi, so I noticed that when using the shopify complimentary products it does not show a quantity selector, and I would like it too. For example on this page https://alanrichardtextiles.com/products/drmb30 you see there is some drop down options, and then below there Is the “frequently bought together” products. I would like the customer to be able to also select quantities for the products in the frequently bought together section. Can someone please explain how I would set that up?

Thank you

[CodingFifty]

HI @alanrichardtex .,

Check the App or Feature- Determine which app or feature you are using for the “frequently bought together” section. Apps like Frequently Bought Together by Code Black Belt or Shopify’s built-in functionality might need direct app settings changes.

• Check the app’s settings to see if it already offers an option to enable the quantity selector.

[alanrichardtex]

it is Shopify’s own "search and discovery app

[CodingFifty]

Yes

[alanrichardtex]

there is no option in that app to enable the quantity selection that I see.. So I am trying to figure out how to edit the coding to make it doable.

[CodingFifty]

Please contact Shopify support.

[alanrichardtex]

I have also reached out to support… I was more so looking for a coding expert who could point me in the right direction as to what code to use and where to manually make the quantity selector show.

[azhar09]

To add a quantity selector to the “Frequently Bought Together” section, you’ll need to modify your theme code. Here’s a brief outline of what you can do:

1. Go to Online Store > Themes > Actions > Edit Code.

2. Find the section that handles the frequently bought together products.

3. Add an HTML input field for the quantity, like this:

   HTML:
   

4. Adjust the JavaScript to ensure the quantity is added correctly to the cart.

If you’re not familiar with coding, it’s best to consult a Shopify expert to implement this

Let me know if you need further help!

[loren_ecom]

hi @alanrichardtex

here’s how you add a quantity selector to complimentary products.

edit the section file that contains this product recommendation/bundle feature

1. Update HTML Code

2. Add CSS Styles

.quantity-selector {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: fit-content;
  
  button {
    padding: 8px 12px;
    background: none;
    border: none;
    cursor: pointer;
  }
  
  input {
    width: 50px;
    text-align: center;
    border: none;
    -moz-appearance: textfield;
    
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }
  }
}

3. Update JavaScript Component

class ProductBuyWith extends Core {
  elements = {
    // ...existing elements...
    quantityWrapper: '[data-quantity-wrapper]',
    quantityInput: '[data-quantity-input]',
    quantityPlus: '[data-quantity-plus]',
    quantityMinus: '[data-quantity-minus]'
  };

  render() {
    // ...existing render code...
    this._initQuantitySelectors();
  }

  _initQuantitySelectors() {
    this.$quantityWrapper?.forEach(wrapper => {
      const input = wrapper.querySelector(this.elements.quantityInput);
      const plus = wrapper.querySelector(this.elements.quantityPlus);
      const minus = wrapper.querySelector(this.elements.quantityMinus);

      plus?.addEventListener('click', () => this._updateQuantity(input, 1));
      minus?.addEventListener('click', () => this._updateQuantity(input, -1));
    });
  }

  _updateQuantity(input, change) {
    const newValue = Math.max(1, parseInt(input.value) + change);
    input.value = newValue;
    this._onChange();
    this._updateQuantityCount();
  }
}

4. Update Cart Addition Logic

class CartAdd extends Core {
  _getComplementaryItems() {
    return this.checkedItems.map((item, index) => ({
      id: item.dataset.variantId,
      quantity: parseInt(this.$quantityInput[index].value) || 1
    }));
  }
}

[OC-Hin]

I ran into the exact same limitation with Shopify’s complementary products — the Search & Discovery widget doesn’t support quantity selectors at all, and Shopify confirmed it can’t be customized from the app side.

If you’re comfortable editing theme code, you can inject a custom qty selector, but it becomes tricky because you also have to override the add-to-cart behavior to pass the selected quantity for each complementary item. It’s doable, but it’s a fair amount of JS/Liquid work.

For my store, instead of rebuilding that whole component, I ended up using a lightweight rule-based app to control quantities directly on the product and cart (min/max per item, enforce quantity before checkout, etc.). It doesn’t modify the complementary block visually, but it lets customers pick the correct quantity on the main PDP and still enforces limits cleanly.

If helpful, the app shopify I used

[SealSubs-Roan]

Hi @alanrichardtex

You’ll need to customize the “frequently bought together” snippet to add quantity inputs for each product. In the liquid code, iterate over the recommended products and display a number input for each variant. Then, modify your AJAX add-to-cart to read those quantities when adding all products at once.

[Easify-Ariel]

Hi @alanrichardtex

Hi! To allow customers to choose quantities for each product in the “Frequently Bought Together” section, you would need custom development, because Shopify’s default features only support selecting items on or off, without quantity selectors or additional customization.

However, you can achieve this very easily with Easify Product Options, no coding required. The app allows you to build your own fully customizable “Frequently Bought Together” group, and most importantly, each product in the group can have its own quantity selector.

Here’s an example I’ve created so you can see how it works:

• This is the result:

• This is the app setting:

First, you simply create a new Option Set in Easify and add the related products using a display type such as Checkbox, Product List, or Image. For each linked product, you can enable the “Allow Quantity Selector” option, allowing customers to increase or decrease the quantity directly on the product page.

The app combines simplicity with reliability, making it perfect for personalized products. And if you run into any issues, Easify’s support team is fantastic!