You can direct customers to the Zest integrated multiship experience in Shopify during checkout and within the shopping cart. This guide outlines how to add a multiship button to a brand’s shopping cart with an app block and custom script.
Install with App Block
To set up the multiship cart button with app blocks. Navigate to your theme editor, select cart, and add the Multiship Cart Button app block.
> We recommend that you add the app block below your checkout button.
Configure Settings
The Multiship Cart Button app block has several settings you can configure - including specifying CSS classes to better help your button match the look and feel of your site.
Install with Custom Script
If you do not use app blocks or have a custom set up, Zest can provide a script to trigger the multiship flow. You must have an HTML element with a specific ID. This is called out in the code below as “YOUR_BUTTON_ID”. That ID can then be inserted into the script. When the HTML element with the specified ID is clicked, the customer will be redirected to the Zest integrated cart multiship flow with their current cart.
<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>Using HTML and Javascript, you can customize the look and feel of their button and add custom logic for when it displays. Custom work is supported with your brand’s internal resources.