Skip to main content
All CollectionsAdvanced
Hiding checkout methods by product tag
Hiding checkout methods by product tag

Disable or enable pickup, delivery, or shipping for certain groups of products based on the product tag

Jelizaveta avatar
Written by Jelizaveta
Updated over a week ago

Using product tags, you can hide checkout methods by adding a code snippet.

For example, if you have certain products that are only available for pickup, and you would like to hide the other method(s) such as delivery and/or shipping.

If you would like to show all methods to your customers and only display an error message when they are not available, you can use our native Conditional activation feature.

Read more about tags and how to add them to your products in the Shopify Add tags article.

Please reach out to us at [email protected]—we’ll be happy to implement this for you. Only proceed if you are comfortable editing code yourself.


Add a code snippet

These steps apply only to the Zapiet - Pickup + Delivery widget version 1 or 2. Which version of the widget am I using?

If you're on a legacy version, please reach out to us on chat, and we would be happy to update the widget to the newest version for you!

You will need to add the code in Zapiet - Pickup + Delivery > Settings > Developers, under Custom scripts.

function hasTag(tag) {
var products = ZapietWidgetConfig.products;
for (var i = 0; i < products.length; i++) {
var tags = products[i].tags;
for (var j = 0; j < tags.length; j++) {
if (tags[j] == tag) {
return true;
}
}
}
return false;
}
if (hasTag("Delivery Only")) {
Zapiet.show("delivery");
Zapiet.hide(["shipping", "pickup"]);
}
else if (hasTag("Pickup Only")) {
Zapiet.show("pickup");
Zapiet.hide(["shipping", "delivery"]);
}

The second half of this code needs to be modified to fit your needs—it has two parts, when you need to use two different tags.

The first part will only show delivery, and hide shipping and pickup for items tagged with “Delivery Only”.

To modify the code:

  • Replace “Delivery Only” with the tag you have created

    • Tags are case-sensitive, so make sure that the value matches the tag exactly.

  • Replace “delivery” with the method you want to show

  • Replace ([“shipping”, “pickup”]) with the methods you'd like to hide

if (hasTag("Delivery Only")) {
Zapiet.show("delivery");
Zapiet.hide(["shipping", "pickup"]);

The second part will show only pickup for items with “Pickup only” tag, and hide shipping and delivery. If you need to add multiple tags too:

  • Replace “Pickup Only” with the tag you have created

    • Tags are case-sensitive, so make sure that the value matches the tag exactly.

  • Replace “pickup” with the method you want to show

  • Replace ([“shipping”, “delivery”]) with the methods you'd like to hide

} else if (hasTag("Pickup Only")) {
Zapiet.show("pickup");
Zapiet.hide(["shipping", "delivery"]);
}

Note

If you are showing or hiding more than one method, it needs to be an array.

  • If you're using an array, use parentheses and brackets

([shipping”, “delivery”])
  • If you're using only one method, use parentheses only

(“pickup”)

Troubleshooting

If the changes are not visible at the cart page, make sure that:

  • The tags added in the code snippets match the tag on your product exactly (they are case-sensitive).

  • You have jQuery added in your theme files for the Online store 2.0 version. If not, you can add it on top of the cart file in your theme files:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Did this answer your question?