Compatibility: All Shopify 2.0 FREE themes ONLY. Works from lower version to version 11
Are you losing customers because they forgot what product they want? Or even forgot which website they saw the product? Look no further. Our wishlist code is not only allow your customers to add the product in their wishlist but also can add the product to cart. Not only that, they have an option to share their list using the Share API with javascript. Correct, we are using javascript on this code and they will have no to minimal affect to your website's speed.
We make the code not complicated for you to follow.
You can check the demo store here. Password: made4uo
What you are buying:
- Add a product in the wishlist
- May add the product to cart from wishlist
- Can share the wishlist to someone
- Customer's wishlist will not be available to admin page
- Will not work with other Shopify apps
- For newer version of Dawn theme, wishlist works with different type of header
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 Shopify store > Themes > Actions > Edit Code.
2. Open the Section folder, and create a new section, name it "wishlist".
3. Replace the default code with the code below. Make sure to SAVE.
<style> .wishlist--button label,.wishlist-remove--button { z-index: 2; background: {{ section.settings.button_background }}; color: {{ section.settings.button_color}}; width: 40px; height: auto; aspect-ratio: 1; position: absolute; margin: 1rem; right: 0; top: 0; display: flex; align-items: center; justify-content: center; border: 3px solid {{ section.settings.button_border }}; transition: scale 0.3s ease; } .wishlist--button label:hover, button.wishlist-remove--button:hover, .wishlist-share:hover { scale: 1.05; } .not-wishlisted { display: none !important; } .product-image--wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; } .product-image--wrapper { width: 100%; height: auto; max-width: 200px; aspect-ratio: 1; } .wishlist-product--wrapper { display: flex; column-gap: 2.5rem; row-gap: 5rem; flex-wrap: wrap; padding: 0; } .wishlist-product--wrapper li { list-style: none; position: relative; width: 100%; height: auto; max-width: calc((100% / 4) - 1.9rem); aspect-ratio: 1; display: flex; gap: 1rem; flex-direction: column; align-items: center; justify-content: space-between; } product-info .wishlist--button > label { display: flex; gap: 1rem; width: max-content; position: relative; height: auto; aspect-ratio: unset; padding: 0 0.5rem; } summary#HeaderMenu-wish:hover svg.icon { transform: scale(1.07); } .wishlist--button svg > path { stroke: {{ section.settings.button_color }}; } .wishlist--button input[id^="input-wish"]:checked ~ .wishlist--button svg > path { stroke: {{ section.settings.button_check_color }}; } .wishlist-remove--button svg { scale: 2.5; } .wishlist--button input[id^="input-wish"]:checked ~ label { color: {{ section.settings.button_check }}; background: {{ section.settings.button_check_background }}; } .wishlist--button input[id^="input-wish"]:checked ~ label > svg > path{ stroke: {{ section.settings.button_check }}; } .wishlist--button input { display: none; } .wishlist-product--wrapper h3 { text-align: center; margin: 0; } .wishlist--message { width: 100%; max-width: 300px; position: fixed; z-index: 10; opacity: 0; background: white; display: block; transform: translateX(-400px); transition-timing-function: cubic-bezier(.29, 1.01, 1, -0.68); transition: transform 2s, opacity 2s; border: 1px solid; display: flex; gap: 0.5rem; margin-top: -40px; padding: 0.5rem; } .wishlist--message.show-message { transform: translateX(50px); opacity: 1; } .wishlist--message > div { width: 100px; height: auto; aspect-ratio: 1; display: flex; align-items: center; } .wishlist--message img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; } .wishlist--message h4 { text-align: center } .wishlist-share { cursor: pointer; width: max-content; } #MegaMenu-wish { position: absolute; left: 0; width: 100%; z-index: 1; overflow-y: scroll; height: auto; max-height: 61vh; } .wish--count { position: absolute; background: {{ section.settings.icon_background }}; color: {{ section.settings.icon_color }}; height: 1.7rem; width: 1.7rem; border-radius: 100%; display: flex; justify-content: center; align-items: center; font-size: .9rem; left: 2.4rem; top: 1.9rem; line-height: calc(1 + .1 / var(--font-body-scale)); } summary#HeaderMenu-wish:hover .wish--count { text-decoration: none; } #Details-Wish summary:before { content: ''; position: fixed; background: rgba(var(--color-foreground),.5); width: 100vw; height: 100vh; left: 0; top: 150px; z-index: 1; display: none; } #Details-Wish[open] summary:before { display: block; } @media only screen and (max-width: 750px) { .wishlist-product--wrapper li { max-width: calc((100% / 3) - 1.7rem); } } @media only screen and (max-width: 481px) { .wishlist-product--wrapper li { max-width: calc((100% / 2) - 1.3rem); } } </style> <wishlist-component data-wish-label="{{ section.settings.button_label }}" data-share-title="{{ section.settings.share_title }}" class="hidden"> <div class="wishlist--message"></div> <div class="wishlist--container {% unless request.design_mode %}hidden{% endunless %}"> <div class="wishlist--wrapper page-width"> <div> <h2>{{ section.settings.heading }}<span class="wish--warning hidden"> is empty!</span></h2> <div class="wishlist-share {% unless request.design_mode %}hidden{% endunless %}"> <svg width="13" height="12" viewBox="0 0 13 12" class="icon icon-share" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" > <path d="M1.625 8.125V10.2917C1.625 10.579 1.73914 10.8545 1.9423 11.0577C2.14547 11.2609 2.42102 11.375 2.70833 11.375H10.2917C10.579 11.375 10.8545 11.2609 11.0577 11.0577C11.2609 10.8545 11.375 10.579 11.375 10.2917V8.125" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.14775 1.27137C6.34301 1.0761 6.65959 1.0761 6.85485 1.27137L9.56319 3.9797C9.75845 4.17496 9.75845 4.49154 9.56319 4.6868C9.36793 4.88207 9.05135 4.88207 8.85609 4.6868L6.5013 2.33203L4.14652 4.6868C3.95126 4.88207 3.63468 4.88207 3.43942 4.6868C3.24415 4.49154 3.24415 4.17496 3.43942 3.9797L6.14775 1.27137Z" fill="currentColor"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 1.125C6.77614 1.125 7 1.34886 7 1.625V8.125C7 8.40114 6.77614 8.625 6.5 8.625C6.22386 8.625 6 8.40114 6 8.125V1.625C6 1.34886 6.22386 1.125 6.5 1.125Z" fill="currentColor"/> </svg> <span>SHARE</span> </div> </div> <ul class="wishlist-product--wrapper"> {% for product in collections.all.products %} <li data-handle="{{ product.handle }}" class="{% unless request.design_mode and forloop.index < 5 %}not-wishlisted{% endunless %}"> <div class="product-image--wrapper"> <a href="{{ product.url }}" title="{{ product.title }}"> <img srcset=" {%- if product.featured_media.width >= 165 -%}{{ product.featured_media | image_url: width: 165 }} 165w,{%- endif -%} {%- if product.featured_media.width >= 360 -%}{{ product.featured_media | image_url: width: 360 }} 360w,{%- endif -%} {%- if product.featured_media.width >= 533 -%}{{ product.featured_media | image_url: width: 533 }} 533w,{%- endif -%} {%- if product.featured_media.width >= 720 -%}{{ product.featured_media | image_url: width: 720 }} 720w,{%- endif -%} {%- if product.featured_media.width >= 940 -%}{{ product.featured_media | image_url: width: 940 }} 940w,{%- endif -%} {%- if product.featured_media.width >= 1066 -%}{{ product.featured_media | image_url: width: 1066 }} 1066w,{%- endif -%} {{ product.featured_media | image_url }} {{ product.featured_media.width }}w " src="{{ product.featured_media | image_url: width: 533 }}" sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)" alt="{{ product.featured_media.alt | escape }}" class="motion-reduce" loading="lazy" width="{{ product.featured_media.width }}" height="{{ product.featured_media.height }}" > </a> </div> <h3>{{ product.title }}</h3> {% render 'price', product: product, price_class: '', show_compare_at_price: true %} <button class="wishlist-remove--button" data-remove="{{ product.handle }}" title="Remove from wishlist"> <svg aria-hidden="true" focusable="false" width="12" height="13" class="icon icon-close-small" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M8.48627 9.32917L2.82849 3.67098" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/> <path d="M2.88539 9.38504L8.42932 3.61524" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> {% if product.has_only_default_variant %} {%- form 'product', product, class: 'form', novalidate: 'novalidate' -%} <input type="hidden" name="id" value="{{ product.variants.first.id }}" /> <input type="hidden" min="1" type="number" id="quantity" name="quantity" value="1"/> <button type="submit"class="button" name="add">Add to cart</button> <noscript>{{ product | json }}</noscript> {% endform %} {% else %} <a href="{{ product.url }}" title="{{ product.title }}" class="button">Choose options</a> {% endif %} </li> {% endfor %} </ul> </div> </div> </wishlist-component> {% schema %} { "name": "Wishlist section", "settings": [ { "type": "text", "label": "Wishlist heading", "id": "heading", "default": "Wishlist" }, { "type": "header", "content": "Wish button settings" }, { "type": "color", "id": "button_background", "label": "Button background color" }, { "type": "color", "id": "button_color", "label": "Button text color", "default": "#3EA1E2" }, { "type": "color", "id": "button_check", "label": "Button checked text color", "default": "#ffffff" }, { "type": "color", "id": "button_check_background", "label": "Button checked backrgound color", "default": "#3EA1E2" }, { "type": "color", "id": "button_border", "label": "Button border color", "default": "#3EA1E2", "info": "Leave blank to remove border" }, { "type": "text", "label": "Button label", "id": "button_label", "default": "Wishlist", "info": "Applies on product page only" }, { "type": "header", "content": "Wish header icon count" }, { "type": "color", "id": "icon_background", "label": "Icon count background", "default": "#000000" }, { "type": "color", "id": "icon_color", "label": "Icon count text color", "default": "#ffffff" }, { "type": "text", "label": "Share title when sending", "id": "share_title", "info": "Title shows when sending using mail", "default": "Catches My Eye" } ], "presets": [ { "name": "Wishlist" } ] } {% endschema %} |
4. Go to Asset folder, and open global.js file.
class Wishlist extends HTMLElement { constructor() { super(); this.message = this.querySelector('.wishlist--message'); this.localItems = localStorage.getItem('wishlist'); window.addEventListener('load', this.init.bind(this)) } init() { if(!document.querySelector('#Wish-header--icon')) this.addWishIcon(); document.querySelector('#MegaMenu-wish').innerHTML = this.querySelector('.wishlist--container').innerHTML; const forms = document.querySelector('#MegaMenu-wish').querySelectorAll('form'); forms.forEach((form) => form.addEventListener('submit', this.showSubmitted.bind(this))); const removeBtns = document.querySelectorAll('.wishlist-remove--button'); removeBtns.forEach((btn) => btn.addEventListener('click', this.removeProduct.bind(this))); const wishlistShareBtn = document.querySelector('.wishlist-share'); wishlistShareBtn.addEventListener('click', this.shareWish.bind(this)); if(this.localItems) this.getProduct(); this.addProductToProductPage(); this.innerCards = document.querySelectorAll('.product-card-wrapper').length > 0 ? document.querySelectorAll('.product-card-wrapper'): document.querySelectorAll('.card-wrapper'); this.innerCards.forEach((card, index) => { this.addWishButtonToCard(card, index); }); if(this.localItems) this.buttonWishDesign(); } shareWish(e) { if (navigator.share) { let textMessage = "I shared my wishlist to you!\n"; document.querySelectorAll('#MegaMenu-wish li:not(.not-wishlisted)').forEach((list, index) => { const a = list.querySelector('a'); const link = a.href; const title = a.title; textMessage += ` ${index + 1}. ${title} - ${link}\n`; }); navigator.share({ title: this.dataset.shareTitle, text: textMessage }) .then(() => console.log('Successfully shared')) .catch((error) => console.error('Sharing error:', error)); } else { const message = '<small> Sorry, share API is not available in this browser!</small>'; e.currentTarget.insertAdjacentHTML('beforeend', message); } } showSubmitted(e) { e.preventDefault(); const currentForm = e.currentTarget; const jsonForm = JSON.parse(currentForm.querySelector('noscript').textContent); const addedHTML = `<div> <img src="${jsonForm.media[0].src}" alt="${jsonForm.media[0].alt}" height="100" width="100"> </div> <h4><strong>${jsonForm.title}</strong> has been added to cart!</h4>`; this.message.innerHTML = addedHTML; this.message.classList.add('show-message'); setTimeout(() => { this.message.classList.remove('show-message'); }, 2500); currentForm.submit() } buttonWishDesign() { const wishButtonInputs = document.querySelectorAll('.wishlist--button input'); wishButtonInputs.forEach((input) => input.checked = false); const storedWish = JSON.parse(localStorage.getItem('wishlist')); storedWish.forEach((handle) => { const wishlistedInput = document.querySelector(`.wishlist--button input[data-button-handle="${handle}"]`); if (wishlistedInput) wishlistedInput.checked = true; }); } getProduct() { const wishStorage = JSON.parse(localStorage.getItem('wishlist')); const wishBubble = document.querySelector('.wish--count'); const wishCount = wishStorage.length; if (wishCount > 0) { wishBubble.textContent = wishCount; wishBubble.classList.remove('hidden'); } else { wishBubble.classList.add('hidden'); } document.querySelectorAll(`#MegaMenu-wish [data-handle]`).forEach((wish) => wish.classList.add('not-wishlisted')); if (wishStorage != null) { if (wishStorage.length > 0) { document.querySelector('#MegaMenu-wish .wish--warning').classList.add('hidden'); document.querySelector('#MegaMenu-wish .wishlist-share').classList.remove('hidden'); } else { document.querySelector('#MegaMenu-wish .wish--warning').classList.remove('hidden'); document.querySelector('#MegaMenu-wish .wishlist-share').classList.add('hidden'); } wishStorage.forEach((wish) => { document.querySelector(`#MegaMenu-wish [data-handle="${wish}"]`).classList.remove('not-wishlisted'); }); } } removeProduct(e) { e.preventDefault(); const handle = e.currentTarget.dataset.remove; const storedWish = JSON.parse(localStorage.getItem('wishlist')); const newArray = storedWish.filter((item) => item != handle); localStorage.setItem('wishlist', JSON.stringify(newArray)); this.buttonWishDesign(); this.getProduct(); } addWishIcon() { const headerIconsWrapper = document.querySelector('.header__icons .header__search'); let wishCount = 0; if(localStorage.getItem('wishlist')) wishCount = JSON.parse(localStorage.getItem('wishlist')).length; let wishBubble = ' '; if (wishCount <= 0) wishBubble = 'hidden'; const wishIcon = `<details id="Details-Wish" class="mega-menu"> <summary id="HeaderMenu-wish" class="header__menu-item link focus-inset" role="button" aria-expanded="false" aria-controls="MegaMenu-wish"> <div style="display: flex"> <svg class="icon" id="Wish-header--icon" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"> <path d="M10 5.2393L8.5149 3.77392C6.79996 2.08174 4.01945 2.08174 2.30451 3.77392C0.589562 5.4661 0.589563 8.2097 2.30451 9.90188L10 17.4952L17.6955 9.90188C19.4104 8.2097 19.4104 5.4661 17.6955 3.77392C15.9805 2.08174 13.2 2.08174 11.4851 3.77392L10 5.2393ZM10.765 3.06343C12.8777 0.978857 16.3029 0.978856 18.4155 3.06343C20.5282 5.148 20.5282 8.52779 18.4155 10.6124L10.72 18.2057C10.3224 18.5981 9.67763 18.5981 9.27996 18.2057L1.58446 10.6124C-0.528154 8.52779 -0.528154 5.14801 1.58446 3.06343C3.69708 0.978859 7.12233 0.978858 9.23495 3.06343L10 3.81832L10.765 3.06343Z" fill-rule="evenodd"/> </svg> <span class="wish--count ${wishBubble}">${wishCount}</span> </div> </summary> <div id="MegaMenu-wish" class="mega-menu__content color-background-1 gradient motion-reduce global-settings-popup" tabindex="-1"> </div> </details>`; headerIconsWrapper.insertAdjacentHTML('afterend', wishIcon); } addProductToProductPage() { const productPage = document.querySelector('product-info > .product__title'); if (productPage) { let wishBoxProduct; let wishInputProduct; if(!document.querySelector('.wishlist--button')) { wishBoxProduct = document.createElement("div"); wishInputProduct = document.createElement("input"); } wishBoxProduct.className = "wishlist--button"; wishInputProduct.id = "input-wish-product"; wishInputProduct.name = "input-wish-product"; wishInputProduct.type = "checkbox"; const wishLabelProduct = document.createElement("label"); wishLabelProduct.htmlFor = "input-wish-product"; wishLabelProduct.innerHTML = `<svg class="icon" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"> <path d="M10 5.2393L8.5149 3.77392C6.79996 2.08174 4.01945 2.08174 2.30451 3.77392C0.589562 5.4661 0.589563 8.2097 2.30451 9.90188L10 17.4952L17.6955 9.90188C19.4104 8.2097 19.4104 5.4661 17.6955 3.77392C15.9805 2.08174 13.2 2.08174 11.4851 3.77392L10 5.2393ZM10.765 3.06343C12.8777 0.978857 16.3029 0.978856 18.4155 3.06343C20.5282 5.148 20.5282 8.52779 18.4155 10.6124L10.72 18.2057C10.3224 18.5981 9.67763 18.5981 9.27996 18.2057L1.58446 10.6124C-0.528154 8.52779 -0.528154 5.14801 1.58446 3.06343C3.69708 0.978859 7.12233 0.978858 9.23495 3.06343L10 3.81832L10.765 3.06343Z" fill-rule="evenodd"/> </svg> <span>${this.dataset.wishLabel}</span>`; wishBoxProduct.append(wishInputProduct); wishBoxProduct.append(wishLabelProduct); productPage.append(wishBoxProduct); const handleArray = wishBoxProduct.parentElement.querySelector('a').href.split('/'); const handle = handleArray[handleArray.length - 1]; wishInputProduct.setAttribute('data-button-handle', handle); wishInputProduct.addEventListener("change", (e) => { let old = localStorage.getItem("wishlist"); let array = []; if (e.target.checked) { if (old !== null) array = array.concat(JSON.parse(old)); array.push(handle); localStorage.setItem("wishlist", JSON.stringify(array)); } else { const handle = e.currentTarget.dataset.buttonHandle; const storedWish = JSON.parse(localStorage.getItem("wishlist")); const newArray = storedWish.filter(item => item != handle); localStorage.setItem("wishlist", JSON.stringify(newArray)); } this.buttonWishDesign(); this.getProduct(); }); } } addWishButtonToCard(card, index) { const wishBox = document.createElement("div"); wishBox.title = "Add to wishlist"; wishBox.className = "wishlist--button"; const wishInput = document.createElement("input"); wishInput.id = "input-wish--" + index; wishInput.name = "input-wish--" + index; wishInput.type = "checkbox"; const wishLabel = document.createElement("label"); wishLabel.setAttribute('tabindex', 1); wishLabel.htmlFor = "input-wish--" + index; wishLabel.innerHTML = `<svg class="icon" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"> <path d="M10 5.2393L8.5149 3.77392C6.79996 2.08174 4.01945 2.08174 2.30451 3.77392C0.589562 5.4661 0.589563 8.2097 2.30451 9.90188L10 17.4952L17.6955 9.90188C19.4104 8.2097 19.4104 5.4661 17.6955 3.77392C15.9805 2.08174 13.2 2.08174 11.4851 3.77392L10 5.2393ZM10.765 3.06343C12.8777 0.978857 16.3029 0.978856 18.4155 3.06343C20.5282 5.148 20.5282 8.52779 18.4155 10.6124L10.72 18.2057C10.3224 18.5981 9.67763 18.5981 9.27996 18.2057L1.58446 10.6124C-0.528154 8.52779 -0.528154 5.14801 1.58446 3.06343C3.69708 0.978859 7.12233 0.978858 9.23495 3.06343L10 3.81832L10.765 3.06343Z" fill-rule="evenodd"/> </svg>`; const handleArray = card.querySelector('a').href.split('/'); const handle = handleArray[handleArray.length - 1]; wishInput.setAttribute('data-button-handle', handle); wishBox.append(wishInput); wishBox.append(wishLabel); wishInput.addEventListener("change", (e) => { let old = localStorage.getItem("wishlist"); let array = []; if (e.target.checked) { if (old !== null) array = array.concat(JSON.parse(old)); array.push(handle); localStorage.setItem("wishlist", JSON.stringify(array)); } else { const handle = e.currentTarget.dataset.buttonHandle; const storedWish = JSON.parse(localStorage.getItem("wishlist")); const newArray = storedWish.filter(item => item != handle); localStorage.setItem("wishlist", JSON.stringify(newArray)); } this.buttonWishDesign(); this.getProduct(); }); card.append(wishBox); } } customElements.define('wishlist-component', Wishlist); |
5. Place the code below at the bottom of the file and SAVE.
If you have Dawn version 8 and higher, please follow the instructions below.
6. Open your theme editor, and under your header group, before the work Template, click the "Add section", and look for "Wishlist". Then click to add. Make sure to save. You are not done.
See image below for reference:
If you have Dawn version 7 and below. please follow the instructions below.
6. Go to the Layout folder, and open the theme.liquid.
7. Look for code {% section 'header' %}. Add a next line, and paste the code below. Then click SAVE. You are now done.
| {% section 'wishlist' %} |
See image for code placement
That's it (",)