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.
Please make sure to check the demo store before buying. Password: made4uo
What you are buying:
- Add one product in just a click of a button in your cart page
- Choose any product you want
- Design might have to depend to the Shopify theme being use
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 %} {% assign remove_url = '' %} {%- for item in cart.items -%} {% if item.id == variant_id %} {% assign move_url = item.url_to_remove %} {% endif %} {%- endfor -%} {% if product != blank %} {% 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 %} {% 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. See image for placement.
| <div class="page-width{% if cart == empty %} is-empty{% endif %}" id="main-cart-footer" data-id="{{ section.id }}"> |
For Refresh theme, 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 }}> |
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.
That's it (",) If this is too intense for you, do not hesitate to contact me using "Chat with us."