Compatibility: All Shopify 2.0 FREE themes ONLY. Works from lower version to version 11
You are able to add a note in Shopify 2.0 and also add any product to upsell in the cart. This works in Dawn Theme and any Shopify 2.0 theme, even Refresh theme. If your product has multiple variants, it will add the first variant only.
Please make sure to check the demo store before buying. Password: made4uo
If you want to use cart page, please use this code instead. Do not use the code together.
NOTE: Gift wrap code for cart page and cart drawer are the same but different placement.
What you are buying:
- Add one product in just a click of a button in your cart drawer only (no cart page)
- Code is using ajax that updates the cart drawer
- Choose any product you want
- Design might have to depend to the Shopify theme being use
- The code might not work together with an app
What makes our code better:
- We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
- We do not leave or add codes use to advertise for our website
- Our code is mobile friendly
Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away.
To start:
1. Go to Admin store > Online Store > Themes > Actions > Edit code.
2. Open the Snippet folder and create a new snippet, name it "gift-wrap."
3. Then paste the code below. Click SAVE.
{% assign product = settings.product_gift_wrap %} {% assign variant_id = product.variants.first.id %} {% if product != blank %} {% if cart != empty %} <div class="giftWrapContainer"> <gift-wrap data-cart-type="{{ settings.cart_type }}" data-variant-id="{{variant_id}}" data-remove-link="cart/change?id={{ variant_id }}&quantity=0" data-add-link="cart/add?id={{ variant_id }}&quantity=1" > <div class="cartCheckbox" name="{{ settings.attribute_name }}"> <input type="checkbox" name="attributes[{{ settings.attribute_name }}]" id="drawerCheckbox"> <label for="drawerCheckbox">{{ settings.checkbox_label }}</label> </div> {% if settings.show_note %} <div class="cart__note field giftWrapNote"> <label for="attributeNote">{{ settings.note_label }}</label> <textarea form="cart" class="text-area field__input" id="attributeNote" name="attributes[{{settings.note_label}}]" placeholder="{{ 'sections.cart.note' | t }}" >{{ cart.note }}</textarea> </div> {% endif %} <script type="application/json" id="cartItems"> {{ cart.items | json }} </script> </gift-wrap> </div> {% endif %} {% endif %} <style> .giftWrapContainer { position: relative; width: 100%; max-width: 35rem; margin-bottom: 4rem; } .cartCheckbox { position: relative; margin-bottom: 1rem; } .is-empty .giftWrapContainer { display: none; } .giftWrapNote { margin-top: 5rem; } </style> <script> class GiftWrap extends HTMLElement { constructor() { super(); this.checkbox = this.querySelector("input"); this.checkbox.addEventListener("change", this.checkboxListener.bind(this)); this.cartItems = this.querySelector("#cartItems").textContent; this.note = document.querySelector("cart-note"); this.init(); } checkboxListener() { if(this.checkbox.checked == true) { this.addItem() sessionStorage.setItem("check", "true"); } else { this.removeItem() sessionStorage.removeItem("check"); } } init() { if (sessionStorage.getItem("check")) { this.checkbox.checked = true } else { this.checkbox.checked = false } this.hideBtn(); } hideBtn() { let giftItem = ''; if(this.dataset.cartType == 'drawer') { giftItem = document.querySelector(`quantity-popover [data-variant-id="${this.dataset.variantId}"]`); }else { giftItem = document.querySelector(`quantity-popover [data-quantity-variant-id="${this.dataset.variantId}"]`); } if(giftItem) giftItem.closest('quantity-popover').style.display = 'none'; } addItem() { if (this.dataset.cartType == 'drawer') { fetch(window.Shopify.routes.root + this.dataset.addLink) .then((response) => response.text()) .then((responseText) => { const html = new DOMParser().parseFromString(responseText, 'text/html'); const selectors = ['cart-drawer-items', '.cart-drawer__footer']; for (const selector of selectors) { const targetElement = document.querySelector(selector); const sourceElement = html.querySelector(selector); if (targetElement && sourceElement) { targetElement.replaceWith(sourceElement); } } this.hideBtn() }) .catch((e) => { console.error(e); }); } else { fetch(window.Shopify.routes.root + this.dataset.addLink) .then((response) => response.text()) .then((responseText) => { const html = new DOMParser().parseFromString(responseText, 'text/html'); const sourceQty = html.querySelector('cart-items'); document.querySelector('cart-items').innerHTML = sourceQty.innerHTML; this.hideBtn() }) .catch((e) => { console.error(e); }); } } removeItem() { if (this.dataset.cartType == 'drawer') { fetch(window.Shopify.routes.root + this.dataset.removeLink) .then((response) => response.text()) .then((responseText) => { const html = new DOMParser().parseFromString(responseText, 'text/html'); const selectors = ['cart-drawer-items', '.cart-drawer__footer']; for (const selector of selectors) { const targetElement = document.querySelector(selector); const sourceElement = html.querySelector(selector); if (targetElement && sourceElement) { targetElement.replaceWith(sourceElement); } } }) .catch((e) => { console.error(e); }); } else { fetch(window.Shopify.routes.root + this.dataset.removeLink) .then((response) => response.text()) .then((responseText) => { const html = new DOMParser().parseFromString(responseText, 'text/html'); const sourceQty = html.querySelector('cart-items'); document.querySelector('cart-items').innerHTML = sourceQty.innerHTML; }) .catch((e) => { console.error(e); }); } } } customElements.define("gift-wrap", GiftWrap); </script> |
4. Next, we will add our settings to allow customization. Open the settings_schema.json under the Config folder, and scroll down until you find the last "]." Before the closing bracket, add the code below.
,{ "name": "Gift Wrap", "settings": [ { "type": "product", "id": "product_gift_wrap", "label": "Product to add with checkbox" }, { "type": "text", "id": "checkbox_label", "label": "Checkbox label", "default": "Please include gift wrapping." }, { "type": "text", "id": "attribute_name", "default": "Gift Wrap", "label": "Attribute name" }, { "type": "checkbox", "id": "multiple_variants", "label": "Multiple variants" }, { "type": "checkbox", "id": "show_note", "label": "Show note", "default": true }, { "type": "text", "id": "note_label", "label": "Note label", "default": "Please provide more instructions." } ] } |
5. Next, you have to open the "cart-drawer.liquid" under the Snippet folder. Find the code below. See image for placement reference.
| <div class="cart-drawer__footer" {{ block.shopify_attributes }}> |
For newer version, you might have the code below instead.
| <div class="drawer__footer"> |
6. Then insert the code below.
| {% render 'gift-wrap' %} |
Last thing to do is to assign your product for gift wrap. Go to your theme editor, click Theme Settings, the Gift wrap. Then assign the product for giftwrap.
That's it (",) If this is too intense for you, do not hesitate to contact me using "Chat with us."