You can direct customers to the Zest multiship experience directly from your Shopify store's shopping cart. This guide walks you through two ways to add the button:
Using an app block (the easiest option)
Using a custom script (for stores with unique setups)
Install With App Block
The quickest way to add the multiship cart button is through Shopify's theme editor using an app block.
Steps:
In your Shopify admin, go to Online Store → Themes.
Click Customize on your active theme.
In the theme editor, navigate to your Cart page or section.
Click Add block and select Multiship Cart Button from the Zest app.
Click Save.
Tip: We recommend placing the Multiship Cart Button below your standard checkout button so it's easy for customers to find without disrupting your usual checkout flow.
Configure Cart Button Settings
Once the app block is added, you can customize it to match your store's look and feel — all from the theme editor, no coding required.
Available settings include:
Button text – Customize what the button says to match your brand voice.
CSS classes – Add custom CSS class names to style the button so it fits seamlessly with the rest of your cart design.
Simply click on the app block in the theme editor to access these settings.
Install with Custom Script
If your theme doesn't support app blocks, or you have a custom cart setup, you can add the multiship button using a script. This option gives you full flexibility over how and where the button appears.
What you'll need:
An HTML element (such as a button) with a unique ID in your cart template. You'll reference that ID in the script below. Replace YOUR_BUTTON_ID with the actual ID you've chosen.
<script>
const button = document.getElementById('YOUR_BUTTON_ID')
async function updateButtonStatus() {
return fetch('/cart.js')
.then(response => response.json())
.then(cart => {
if (button) {
button.disabled = false;
button.title = '';
}
const hasGiftCards = cart.items.some(item => {
return item.gift_card || /\b(?:gift[ _-]?card)\b/gi.test(item.product_type);
});
const hasSubscriptions = cart.items.some(item => {
return item.selling_plan_allocation;
});
const errorTarget = hasGiftCards && hasSubscriptions
? "gift cards and subscriptions"
: hasGiftCards ? "gift cards"
: hasSubscriptions ? "subscriptions"
: null;
if (errorTarget) {
if (button) {
button.disabled = true;
button.title = "We're sorry — " + errorTarget + " aren't eligible for this feature.";
}
return null;
}
return cart.token
})
.catch(error => {
console.error('Error fetching cart:', error);
return null
});
}
button.addEventListener('click', async function() {
const eligibleCartTokenResponse = await updateButtonStatus();
if (eligibleCartTokenResponse) {
window.location.href = 'https://' + Shopify.shop + '/apps/zest/start-multi-ship/' + eligibleCartTokenResponse;
}
});
if (button) {
updateButtonStatus();
}
</script>
How it works:
When a customer clicks your button, the script checks whether their cart contains any items that aren't eligible for multiship (like gift cards or subscription products). If their cart is eligible, they're taken directly into the Zest multiship experience. If not, the button is disabled and a friendly message explains why.
Customization: You can style your button using standard HTML and CSS, and adjust the script logic to fit your store's needs. Your team can handle any custom work using your existing brand resources.
Eligibility Notes
The multiship cart button automatically handles a few cart scenarios:
Gift cards – Carts containing gift card products are not eligible for multiship and the button will be disabled.
Subscriptions – Carts with subscription items are not eligible for multiship and the button will be disabled.
Mixed carts – If a cart contains both gift cards and subscriptions, the button will be disabled and both reasons are surfaced to the customer.