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
    }));
  }
}