how do I add quantity selector to "complimentary products"

how do I add quantity selector to "complimentary products"

alanrichardtex
Shopify Partner
60 3 3

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

 

Screenshot 2025-01-17 at 9.42.20 AM.png

,
Alan Richard Textiles, The Source for the Finest Home Furnishing Supplies. Distributor for Somfy Motors, Rollease, Velcro, & More!
Replies 8 (8)

CodingFifty
Shopify Partner
613 97 116

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.
Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
alanrichardtex
Shopify Partner
60 3 3

it is Shopify's own "search and discovery app

,
Alan Richard Textiles, The Source for the Finest Home Furnishing Supplies. Distributor for Somfy Motors, Rollease, Velcro, & More!
CodingFifty
Shopify Partner
613 97 116

Yes

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
alanrichardtex
Shopify Partner
60 3 3

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.

,
Alan Richard Textiles, The Source for the Finest Home Furnishing Supplies. Distributor for Somfy Motors, Rollease, Velcro, & More!
CodingFifty
Shopify Partner
613 97 116

Please contact Shopify support.

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
alanrichardtex
Shopify Partner
60 3 3

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. 

,
Alan Richard Textiles, The Source for the Finest Home Furnishing Supplies. Distributor for Somfy Motors, Rollease, Velcro, & More!
loren_ecom
Shopify Partner
2 0 0

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

 

 

<div class="#product-qty-selector">
    <div class="#product-qty-selector-input-wrapper">
        <input
            class="#product-qty-selector-input"
            type="number"
            name="complementary_qty[]" 
            value="1"
            min="1"
            step="1"
            data-complementary-qty
            aria-label="Quantity"
        >
    </div>
</div>

 

 

 

 

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

 

 

 

CleanShot 2025-01-19 at 22.12.31.gif

 

CleanShot 2025-01-19 at 21.54.34@2x.png

CleanShot 2025-01-19 at 21.55.09@2x.png

azhar09
Visitor
3 0 0

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:
    <input type="number" name="quantity" value="1" min="1" class="quantity-selector">

  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!