Where you can achieve what your competitors can’t

Add Gift Wrap Option in Shopify

This custom code is completely free to use, but please note it does not include 1-on-1 technical support. If you need a bespoke, done-for-you solution to customize your Shopify store, my team is here to help! Head to my channel homepage and use the link in the trailer to reach out.

{% comment %}
<!-- Designed by ONHOW Studio YouTube Channel - Anas El Medlaoui -->
{% endcomment %}

{% if product.metafields.custom.gift_wrapper.value %}
  {% assign onhow_studio_gift_product = product.metafields.custom.gift_wrapper.value %}
  {% if onhow_studio_gift_product.available %}

    <style>
      .onhow-studio-gift-container {
        margin: 15px 0;
        font-family: inherit;
      }
      .onhow-studio-gift-btn {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
        border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
        border-radius: 6px;
        background-color: color-mix(in srgb, currentColor 4%, transparent);
        cursor: pointer;
        font-family: inherit;
        font-size: 15px;
        line-height: 1.4;
        color: inherit;
        text-align: left;
        transition: background-color 0.2s ease, border-color 0.2s ease;
      }
      .onhow-studio-gift-btn:hover:not(:disabled) {
        background-color: color-mix(in srgb, currentColor 7%, transparent);
        border-color: color-mix(in srgb, currentColor 18%, transparent);
      }
      .onhow-studio-gift-btn:disabled {
        cursor: not-allowed;
      }
      .onhow-studio-gift-icon {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
      }
      .onhow-studio-gift-icon .onhow-studio-gift-icon-unchecked {
        display: block;
      }
      .onhow-studio-gift-icon .onhow-studio-gift-icon-checked {
        display: none;
      }
      .onhow-studio-gift-btn.is-added .onhow-studio-gift-icon .onhow-studio-gift-icon-unchecked {
        display: none;
      }
      .onhow-studio-gift-btn.is-added .onhow-studio-gift-icon .onhow-studio-gift-icon-checked {
        display: block;
      }
    </style>

    <div class="onhow-studio-gift-container">
      <button
        class="onhow-studio-gift-btn"
        id="onhow-studio-gift-btn-{{ section.id }}"
        data-variant-id="{{ onhow_studio_gift_product.selected_or_first_available_variant.id }}"
        data-original-text="Add {{ onhow_studio_gift_product.title }} (+{{ onhow_studio_gift_product.price | money }})"
      >
        <span class="onhow-studio-gift-icon" aria-hidden="true">
          <svg class="onhow-studio-gift-icon-unchecked" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg">
            <rect x="2" y="2" width="16" height="16" rx="3"/>
          </svg>
          <svg class="onhow-studio-gift-icon-checked" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg">
            <rect x="2" y="2" width="16" height="16" rx="3"/>
            <polyline points="5.5 10 8.5 13 14.5 7"/>
          </svg>
        </span>
        <span class="onhow-studio-gift-text">
          Add {{ onhow_studio_gift_product.title }} (+{{ onhow_studio_gift_product.price | money }})
        </span>
      </button>
    </div>

    <script>
      (function () {
        var btn = document.getElementById('onhow-studio-gift-btn-{{ section.id }}');
        if (!btn) return;

        btn.addEventListener('click', function () {
          var variantId = Number(btn.dataset.variantId);
          var originalText = btn.dataset.originalText;
          var textEl = btn.querySelector('.onhow-studio-gift-text');
          var sectionId = (document.querySelector('cart-items-component[data-drawer]') || {}).dataset?.sectionId;

          btn.disabled = true;
          textEl.textContent = 'Adding...';

          var payload = { items: [{ id: variantId, quantity: 1 }] };
          if (sectionId) payload.sections = sectionId;

          fetch(
            (window.Shopify && window.Shopify.routes && window.Shopify.routes.root
              ? window.Shopify.routes.root
              : '/') + 'cart/add.js',
            {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
              },
              body: JSON.stringify(payload)
            }
          )
            .then(function (r) {
              if (!r.ok) throw new Error('add failed');
              return r.json();
            })
            .then(function (data) {
              btn.classList.add('is-added');
              textEl.textContent = 'Gift Wrap Added \u2713';

              document.dispatchEvent(
                new CustomEvent('cart:update', {
                  bubbles: true,
                  detail: {
                    resource: data,
                    sourceId: 'onhow-studio-gift',
                    data: {
                      sections: data.sections || {}
                    }
                  }
                })
              );

              var drawer = document.querySelector('cart-drawer-component');
              if (drawer && typeof drawer.open === 'function') drawer.open();
            })
            .catch(function () {
              btn.disabled = false;
              textEl.textContent = originalText;
            });
        });
      })();
    </script>

  {% endif %}
{% endif %}

{% comment %}
<!-- Designed by ONHOW Studio YouTube Channel - Anas El Medlaoui -->
{% endcomment %}