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 Shopif 2.0 theme, even Refresh theme. You can have a product with multiple variants and upsell your gift wraps or any other product.
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 %} {% assign remove_url = '' %} {%- for item in cart.items -%} {% if item.id == variant_id %} {% assign move_url = item.url_to_remove %} {% endif %} {%- endfor -%} {% if cart != empty %} <div class="giftWrapContainer"> <gift-wrap data-variant-id="{{variant_id}}" data-product-id="{{ product.id }}"> <div class="cartCheckbox" name="{{ settings.attribute_name }}"> <input type="checkbox" name="attributes[{{ settings.attribute_name }}]" value="Yes"> <a id="addLink" href="cart/add?id={{ variant_id }}&quantity=1">{{ settings.checkbox_label }}</a> <a id="removeLink" class="checkHide" href="{{ remove_url }}">{{ settings.checkbox_label }}</a> </div> {% if settings.multiple_variants %} <div class="cartCheckbox--variant select"> {%- for option in product.options_with_values -%} <label class="form__label" for="giftWrap"> {{ option.name }} </label> {%- endfor -%} <select id="giftWrap" class="select__select" name="attributes[{{settings.attribute_name}}]"> {%- for variant in product.variants -%} <option value="{{ variant.id }}" {% if forloop.first %}selected="selected"{% endif %}> {{ variant.title }} </option> {%- endfor -%} </select> {% render 'icon-caret' %} </div> {% endif %} {% 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 %} <style> .giftWrapContainer { position: relative; width: 100%; max-width: 35rem; margin-bottom: 4rem; } .checkHide { display: none !important } .cartCheckbox { position: relative; margin-bottom: 1rem; } .cartCheckbox a { color: rgb(var(--color-foreground)); text-decoration: none; line-height: 1.5; } .cartCheckbox a:before { content: ''; position: absolute; height: 20px; width: 20px; z-index: 1; left: 0; } .cartCheckbox--variant.select { display: flex; position: relative; width: 30%; min-width: 25rem; flex-direction: column; } .cartCheckbox--variant.select::after { display: none; } .cartCheckbox--variant.select > select { outline: 0.2rem solid rgba(var(--color-foreground),.5); outline-offset: 0.3rem; box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),0 0 0.5rem 0.4rem rgba(var(--color-foreground),.3); } .cartCheckbox--variant.select::before, .cartCheckbox.select::after{ display: none !important } .cartCheckbox--variant.select > select::before { pointer-events: none; content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: var(--inputs-radius-outset); box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset) var(--inputs-shadow-blur-radius) rgba(var(--color-base-text),var(--inputs-shadow-opacity)); z-index: -1; } .cartCheckbox--variant.select > select::after { pointer-events: none; content: ""; position: absolute; top: var(--inputs-border-width); right: var(--inputs-border-width); bottom: var(--inputs-border-width); left: var(--inputs-border-width); border: 0.1rem solid transparent; border-radius: var(--inputs-radius); box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground),var(--inputs-border-opacity)); transition: box-shadow var(--duration-short) ease; z-index: 1; } .cartCheckbox--variant.select svg { top: calc(65% - 0.2rem); } .is-empty .giftWrapContainer { display: none; } .giftWrapNote { margin-top: 5rem; } </style> <script> class GiftWrap extends HTMLElement { constructor() { super(); this.add = this.querySelector('#addLink'); this.remove = this.querySelector('#removeLink'); this.checkbox = this.querySelector('input'); this.select = this.querySelector('#giftWrap'); this.cartItems = this.querySelector('#cartItems').textContent; this.note = document.querySelector('cart-note'); if(!this.add) return; if(!this.remove) return; if(this.select) { this.select.addEventListener('change', this.addItem.bind(this)); } this.querySelectorAll('a').forEach(a => a.addEventListener('click', this.update.bind(this))); this.renderChanges(); this.getCartItems(); } update() { if(sessionStorage.getItem('check')) { sessionStorage.removeItem('check'); } else { sessionStorage.setItem('check', 'true'); } this.renderChanges(); } renderChanges() { if(sessionStorage.getItem('check')) { this.checkbox.checked = true; this.add.classList.add('checkHide'); this.remove.classList.remove('checkHide'); } else { this.checkbox.checked = false; this.add.classList.remove('checkHide'); this.remove.classList.add('checkHide'); } } addItem() { const addHref = `cart/add?id=${this.select.value}&quantity=1`; this.add.href = addHref; } getCartItems() { this.removeLinkUpdate(JSON.parse( this.cartItems)); } removeLinkUpdate(cartItems) { cartItems.map(item => { if(item.product_id == this.dataset.productId) { this.remove.href = sessionStorage.setItem('remove_href', `cart/change?id=${item.key}&quantity=0`); } }) this.remove.href = sessionStorage.getItem('remove_href'); } removedItem(line) { const removedItem = document.querySelector(`#CartItem-${line}`).dataset.variant; if(!removedItem) return; if(this.dataset.productId == removedItem) { this.update(); } } } 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. Lastly, we need to add the snippet in the main-cart-footer.liquid file under the Section folder. Open the file and find the code below.
| <div class="page-width{% if cart == empty %} is-empty{% endif %}" id="main-cart-footer" data-id="{{ section.id }}"> |
5. For Refresh theme, you have to open the "cart-drawer.liquid" under the Section folder. Find the code below.
| <div class="cart-drawer__footer" {{ block.shopify_attributes }}> |
6. Then insert the code below. See video for more information
| {% render 'gift-wrap' %} |
That's it (",) If this is too intense for you, do not hesitate to contact me using "Chat with us."