If you’ve ever shopped on big platforms like Amazon or Flipkart, you’ve probably used the Wishlist feature. It allows customers to save their favorite products for later, giving them a smoother shopping experience and helping store owners boost their sales.
In this guide, I’ll show you how to add a wishlist feature to your Shopify store without using any third-party app. No coding knowledge required—just follow along step by step.
What is a Wishlist Feature?
A wishlist is a feature that lets users save products they like but may want to purchase later. It gives them a personal list they can revisit, which increases the chances of future sales.
Wishlist vs Add to Cart – What’s the Difference?
- Add to Cart: For items customers want to purchase immediately.
- Wishlist: For items they like but may not be ready to buy yet.
So, the wishlist doesn’t interfere with the checkout process. It just helps retain interest in the product.
How to Add a Wishlist in Shopify Without an App
Follow these steps carefully:
Step 1: Create a Wishlist Page
- Go to your Shopify admin panel.
- Navigate to Online Store > Pages.
- Create a new page and name it Wishlist.
- Keep the visibility as Visible.\
Step 2: Create a Snippet
- Go to Online Store > Themes > Edit Code.
- In the left sidebar, find the Snippets folder.
- Click on Add a new snippet and name it
wishlist.liquid. - Paste your wishlist code here and save.
<button class=”wishlisticon” id=”wishlist-{{ productid }}”>❤</button>
<script>
$(document).ready(function () {
let productId = ‘{{ productid }}’;
let storageKey = “wishId-” + productId;
let $button = $(‘#wishlist-‘ + productId);
function updateWishlistCount() {
let count = 0;
for (let key in localStorage) {
if (key.startsWith(“wishId-“)) {
count++;
}
}
$(‘#wishlist-count’).text(count);
}
if (localStorage.getItem(storageKey)) {
$button.addClass(‘wishfillid’);
}
updateWishlistCount();
$button.click(function () {
if (localStorage.getItem(storageKey)) {
localStorage.removeItem(storageKey);
$button.removeClass(‘wishfillid’);
} else {
localStorage.setItem(storageKey, productId);
$button.addClass(‘wishfillid’);
}
updateWishlistCount();
});
});
</script>
<style>
.wishlisticon.wishfillid { background: red; color: white; border: none;}
.wishlisticon { border: 1px solid #a7a7a7; z-index: 1; position: absolute; bottom: 17px; right: 9px; border-radius: 50%; height: 35px; width: 35px; background: white; cursor: pointer;}
.wishlisticon:hover {display: block;}
</style>
Step 3: Create a Template for the Wishlist Page
- In the Templates folder, click Add a new template.
- Choose Page and name it
wishlist. - Make sure it’s in Liquid format.
- Paste the corresponding code and save.
<div class=”page-width”>
<h1 style=”padding-top:20px;”>Your wishlist</h1>
<div class=”row”></div>
</div>
<script>
$(document).ready(function(){
{% for product in collections.all.products%}
console.log(‘{{ product.title }}’)
var wishid = localStorage.getItem(“wishId-{{ product.id }}”)
console.log(wishid)
if(wishid == ‘{{ product.id }}’){
var wishgridid = `
<div class=” wishlist-grid”>
<span class=” wishclose-{{ product.id }}”>X</span>
<a href=”{{ product.url }}”> <img src=”{{ product.featured_image| image_url: width:280 , height:340 }} alt=””> </a>
<h4>{{ product.title }}</h4>
<p>{{ product.price | money}}</p>
</div>
`
$(‘.row’).append(wishgridid);
}
$(‘.wishclose-{{ product.id }}’).click(function(){
$(this).parents(‘.wishlist-grid’).remove();
localStorage.removeItem(“wishId-{{ product.id }}”)
})
{% endfor %}
})
</script>
<style>
.row {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
.wishlist-grid{
position:relative;
}
span[ class*=”wishclose”]{
background: #000000;
padding: 2px 12px;
color: white;
position:absolute;
left:0px;
cursor:pointer;
opacity:0;
}
.wishlist-grid:hover span {
opacity:1;
}
</style>
Step 4: Assign the Template to the Wishlist Page
- Go back to Pages > Wishlist in Shopify admin.
- On the right side, under Theme template, choose the newly created
wishlist. - Click Save.
Step 5: Render the Wishlist Snippet in Key Theme Files
You need to include the wishlist snippet in these files:
1. card-product .liquid
Paste the render code in your product card file to show the wishlist icon.
{% render ‘wishlist’, productid:card_product.id %}
2. main-product.liquid
Find the price block and paste the render code right below it. This adds the wishlist icon on the product page.
{% render ‘wishlist’, productid:product.id%}
3. header.liquid
Search for the cart icon, and below that, paste the wishlist count icon code. This will show a heart icon with a counter in the header.
<a href=”https://ecomellevate.myshopify.com/pages/wishlist”>
<div style=” align-items: center; right: 162px; position: absolute; display: flex; top: 42px;” class=”wishlist-header”>
❤️ Wishlist (<span id=”wishlist-count”>0</span>)
</div>
</a>
<script>
$(document).ready(function () {
let productId = ‘{{ productid }}’;
let storageKey = “wishId-” + productId;
let $button = $(‘#wishlist-‘ + productId);
function updateWishlistCount() {
let count = 0;
for (let key in localStorage) {
if (key.startsWith(“wishId-“)) {
count++;
}
}
$(‘#wishlist-count’).text(count);
}
if (localStorage.getItem(storageKey)) {
$button.addClass(‘wishfillid’);
}
updateWishlistCount();
$button.click(function () {
if (localStorage.getItem(storageKey)) {
localStorage.removeItem(storageKey);
$button.removeClass(‘wishfillid’);
} else {
localStorage.setItem(storageKey, productId);
$button.addClass(‘wishfillid’);
}
updateWishlistCount();
});
});
</script>
Make sure to save all files after editing.
Test the Wishlist Feature
- Go to your storefront and preview your theme.
- You should now see a heart icon under product cards and in the header.
- Clicking it will add products to your wishlist, and the count will increase.
- On the Wishlist page, you’ll see all saved products with the option to remove them.
Why Use a Wishlist Feature on Your Store?
- Increases customer retention
- Boosts return visits
- Improves overall user experience
- Helps users organize their shopping
Need Help?
If you face any issue while implementing this feature, feel free to contact me. I’ll be happy to help you out!
The wishlist feature is simple but powerful. And now, you’ve added it to your Shopify store—without using any app! This saves you monthly app fees and gives you full control over the customization.
