Shopify themes, liquid, logos, and UX
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
HI @alanrichardtex.,
it is Shopify's own "search and discovery app
Yes
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.
Please contact Shopify support.
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.
here's how you add a quantity selector to complimentary products.
edit the section file that contains this product recommendation/bundle feature
<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>
.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;
}
}
}
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();
}
}
class CartAdd extends Core {
_getComplementaryItems() {
return this.checkedItems.map((item, index) => ({
id: item.dataset.variantId,
quantity: parseInt(this.$quantityInput[index].value) || 1
}));
}
}
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:
Go to Online Store > Themes > Actions > Edit Code.
Find the section that handles the frequently bought together products.
Add an HTML input field for the quantity, like this:
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!
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025