How to add gift wrap to cart (drawer)?

Store Design
, , ,
1

Hi all,

How could I add the “gift-wrapping” option to my cart drawer?
I have set it up in the cart page, but it is not showing for my newly set-up cart drawer.
All the previous steps to set it up, I have gone through and it did show up for my cart page, but now that I have switched to cart drawer it is not showing anymore.

Anyone has an idea on how to fix this?

My store url: https://utrecht-winkel.nl/ and I am using the Dawn theme!
Thanks a lot in advance.

Kind regards,

Teun

2

Hi @WVU ,

I am from Mageplaza - Shopify solution expert.

You can refer to the following guide to make this customization:

Step 1: Create a Gift Wrapping Product

  1. Go to Shopify Admin > Products > Add Product
  2. Name it: Gift Wrapping (or any name you like)
  3. Set a price (e.g., $5.00)
  4. Uncheck the Sales Channels so the product is hidden from the storefront
  5. Save the product

Step 2: Get the Variant ID of the Gift Wrapping Product
You will need the variant_id of this product to add it to the cart via JavaScript.

You can find it in the URL when editing the product variant in the admin, or by exporting products to CSV.

Step 3: Edit the Cart Drawer Template

  • Go to Online Store > Themes > Edit code
  • Open the appropriate cart drawer file, usually:
    cart-drawer.liquid
    Or main-cart-items.liquid, depending on your theme
  • Add this checkbox HTML where you want the gift option to appear:

Step 4: Add JavaScript to Handle Checkbox Logic
Add this to your cart JS file or within tags in your cart drawer template:

document.addEventListener('DOMContentLoaded', function () {
  const checkbox = document.getElementById('giftWrapCheckbox');

  checkbox?.addEventListener('change', function () {
    const giftWrapVariantId = YOUR_VARIANT_ID; // e.g., 12345678901234

    if (checkbox.checked) {
      // Add gift wrapping to cart
      fetch('/cart/add.js', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          items: [{
            quantity: 1,
            id: giftWrapVariantId
          }]
        })
      }).then(() => location.reload());
    } else {
      // Remove gift wrapping from cart
      fetch('/cart.js')
        .then(response => response.json())
        .then(cart => {
          const item = cart.items.find(i => i.variant_id === giftWrapVariantId);
          if (item) {
            fetch('/cart/change.js', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
              },
              body: JSON.stringify({
                id: item.key,
                quantity: 0
              })
            }).then(() => location.reload());
          }
        });
    }
  });
});

*Result:

2025-07-07_10-02.png
2025-07-07_10-02.png1903×953 112 KB

Please let me know if it works as expected

Best regards!