By default you're able to adjust product quantities in Smart Cart one number at a time. While this is the standard method across many carts, some merchants have customers that purchase in bulk and adjusting quantity one at a time is a friction point for those users.
Fortunately Rebuy has a solution for this that only requires a few steps to implement!
First, if you're new to Smart Cart please review these help docs to familiarize yourself.
This process involves adding code to your theme files. The code is written for you and instructions are provided. However you may feel more comfortable having a developer implement these changes for you.
Add a Smart Cart Template to your theme files
A Smart Cart template allows users to add or rearrange features in ways that aren't possible with the default Smart Cart.
This help doc explains how to add a custom template to your theme files. Please follow the instructions shown here.
Then return to this help doc for additional instructions.
We encourage you to test in a duplicate theme first, before making changes to your live theme.
Customizing the Smart Cart Template
Now that your theme has a Smart Cart template we need to modify it to allow for bulk updating product quantities.
Add new elements to Smart Cart
In your Smart Cart template, search for the classname .rebuy-cart__flyout-item-buy-more-save-more. That will take you to the element shown below in orange. Directly above that you'll see a <div and a </div>. As the image shows we'll be adding code between these two elements.
Too much space is not a concern. Add plenty so theres no chance you accidentally change the top </div>, the bottom <div or any surrounding code.
<-- Click here to view the code you'll paste between the </div> and <div
<-- Click here to view the code you'll paste between the </div> and <div
<form
id='quantityForm'
v-if="item.final_price > 0 && item.properties?._attribution !== 'Rebuy Gift with Purchase'"
v-bind:class="[item.key]"
v-on:submit=bulkUpdate($event)
tabindex='0'
>
<span class="sr-only">Quick edit quantity</span>
<input
id='quantityInput'
inputmode="numeric"
pattern="[1-9]*"
type="number"
value='1'
min='1'
max='20'
> </input>
<button
id='quantityButton'
class="rebuy-button"
type="submit"
> Update </button>
<p
id='quantityTip'
>Quickly update product quantity between 1 and 20.</p>
</form>
Be sure to click save!
The template code should now look like this. The code from above is pasted below the </div> and above the <div.
Add styling and functionality to the new elements
Scroll to the bottom of the template code and you'll see the last line is {% endraw %}. Add space below that and paste the code shown here.
Paste the code after the template. Below the {% endraw %}.
<-- Click here to view the code you'll paste after the {% endraw %}
<-- Click here to view the code you'll paste after the {% endraw %}
<style>
#quantityForm {
display: inline-flex;
margin:10px 10px 0 0;
height: 3rem;
gap: 2px;
}
#quantityInput {
border: 0.2rem solid black;
text-align: center;
/* border-radius: 5px; */
}
#quantityButton {
padding: .3rem;
/* border-radius: 5px */
}
#quantityTip {
position: absolute;
margin: 3rem 0;
font-size: 1.2rem;
visibility: hidden;
}
#quantityForm:hover #quantityTip,
#quantityInput:focus ~ #quantityTip {
visibility: visible;
}
#quantityForm ~ .rebuy-cart__flyout-item-subscription {
margin-top: 15px;
}
@media screen and (max-width: 500px){
#quantityInput {
width: 12rem;
}
#quantityButton:hover + #quantityTip {
visibility: hidden;
}
}
</style>
<script>
const bulkUpdate = (event) => {
event.preventDefault();
let inputValue = event.target[0].valueAsNumber;
const inputProduct = Rebuy.SmartCart.items().find(item => item.key === event.target.className);
const inputProductsInventoryLimit = inputProduct.product.selected_variant.inventory_quantity;
/* if no valid input is given, set it to 0 so they can try again */
if (isNaN(inputValue)) {
event.target[0].value = 0;
return
}
/* if the given number is more than the max inventory, lower it */
if (inputValue > inputProductsInventoryLimit) {
inputValue = inputProductsInventoryLimit;
event.target[0].value = inputValue;
}
/* if the numbers match, do nothing */
if (inputValue === inputProduct.quantity) {
return
}
/* if the numbers don't match run a change event */
if (inputValue !== inputProduct.quantity) {
Rebuy.Cart.changeItem({
id: event.target.className,
quantity: inputValue
});
// reset input value
event.target[0].value = 1;
}
}
</script>
Be sure to click save!
The template code should now look like this. The code from above is pasted below the {% endraw %}.
How this customization works
Your Smart Cart now has the ability to bulk increase quantity from 1-20 on all cart items that are not $0 and were not added by a Rebuy GWP widget. Additionally, it prevents bulk increasing over a products maximum quantity.
Meaning if the product has 15 left in stock, you could only bulk increase to 15.
This can be further customized, continue reading.
As the video below demonstrates, the code is a quantity adjustment. It is not a quantity addition.
Meaning that if the product quantity is 1 and you bulk update using 3, the product quantity will now be 3.
You're updating the quantity from 1 to be 3, not adding 3 more to the original 1.
Additional options available
The code will ignore free items and GWP widget items but you'll likely have other products you don't want customers bulk editing.
You may also want to change the amount that customers are able to bulk increase quantity by.
Excluding additional products from being bulk edited
You'll need to tag the items in Shopify first, we recommend a new common tag for all items you don't want bulk edited (ex: bulkedit).
Product tags from Shopify appear as classnames for items in Smart Cart. This allows you to use CSS to hide the bulk edit elements for items with that tag.
Product tags begin with tag- when they're classnames in Smart Cart. Using the product tag bulkedit as an example you can see the gift card product has the tag and the bulk edit elements are not showing. But they continue to show on the item above that is not tagged bulkedit.
Any item in Smart Cart that carries that product tag will not show bulk edit elements.
<-- See the CSS code you need and placement here
<-- See the CSS code you need and placement here
.tag-bulkedit #quantityForm {
display: none;
}Back in your Smart Cart template add this CSS below the <style> tag from the code you added previously. It should look like the image below when complete.
You could also place this CSS elsewhere. In the Rebuy Admin theme CSS or Smart Cart Custom CSS sections for example.
Adjusting the bulk edit quantity
The code is preset to bulk edit from 1-20. This prevents accidentally deleting the item by using 0 or wiping out inventory by adding 50 of any one item for example.
This can be easily adjusted to your stores needs.
Back in the code you pasted earlier max='20' is the line you need to edit. You can set it higher if needed but we strongly recommend leaving the min='1' alone.
Ensure the number stays in quotes! '20' with quotes is correct, 20 without quotes is wrong.
You'll also need to update the "between 1 and 20" to be "..1 and 30" for example. It should match the max= number from above.
Things to keep in mind
You can always exclude more products from being bulk edited. Simply tag them with the bulkedit tag in Shopify and use CSS.
See the "Excluding additional products" section above.
If you need to completely stop bulk editing you can use this CSS which will hide the bulk editing elements for every item in Smart Cart.
.rebuy-cart__flyout-item #quantityForm {display: none;}
To prevent bulk editing of subscription products you can use this CSS.
.rebuy-cart__flyout-item:has(.rebuy-cart__flyout-item-subscription) #quantityForm {
display: none;
}
The bulk editing elements all have unique IDs (see image above) so you can easily add CSS to them as you'd like.
This customization allows for unique behavior that is not natively available at this time. You're welcome to continue modifying things to meet your preferences however the Rebuy Support Team would unfortunately be unable to assist you with those changes.
You may prefer to have a developer implement those modifications for you. You're also able to review our Support policy here.