Hello everyone, welcome back to WebSensePro! Today, we’re diving into one of the most requested topics: adding a wishlist feature to your Shopify store without relying on third-party apps. Over the past few months, we’ve received numerous requests for this tutorial, and we’re thrilled to finally bring it to you.
Step 1: Create Template
Create a new template ‘wishlist’ and add the following code:
<!-- -Create template/page.wishlist.liquid- -->
<div class="page-width">
{% render 'wishlist' %}
</div>After creating template assign this to page. You can name it Wishlist
Step 2: Create New Snippet
Create a new snippet file called wishlist and add the following code:
<style>
/* Style for product display can be added based on your design requirements */
@media only screen and (min-width: 750px) {
.js-wishlistBlock {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap: var(--grid-desktop-horizontal-spacing);
}
}
.c-product {
cursor: pointer;
margin-bottom: 20px;
}
.c-product img {
width: 100%;
max-height: 300px;
object-fit: cover;
border-radius: 5px;
transition: all .5s ease;
}
.c-product img:hover {
transform: scale(1.03);
}
.c-product h3.c-product__title {
margin-top: 10px;
position: relative;
}
</style>
<div class="recently-title">
<h2 class="title inline-richtext h2 scroll-trigger animate--slide-in"><b>Wishlist</b></h2>
</div>
<div class="js-wishlistBlock">
<!-- Wishlist items will be displayed here -->
</div>
Step 3: Adding Wishlist Button In Product Page
Copy the following code and add in Custom Liquid block of product page template
{% if settings.enable-wishlist %}
<button onclick="toggleWishlist()" class="wishlist_button">
<svg width="30px" height="30px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<rect x="0" fill="none" width="24" height="24"/>
<g>
<path d="M16.5 4.5c2.206 0 4 1.794 4 4 0 4.67-5.543 8.94-8.5 11.023C9.043 17.44 3.5 13.17 3.5 8.5c0-2.206 1.794-4 4-4 1.298 0 2.522.638 3.273 1.706L12 7.953l1.227-1.746c.75-1.07 1.975-1.707 3.273-1.707m0-1.5c-1.862 0-3.505.928-4.5 2.344C11.005 3.928 9.362 3 7.5 3 4.462 3 2 5.462 2 8.5c0 5.72 6.5 10.438 10 12.85 3.5-2.412 10-7.13 10-12.85C22 5.462 19.538 3 16.5 3z"/>
</g>
</svg>
</button>
{% endif %}
Step 4: Add the following code in settings_schema.json
Copy the following code and add in settings_schema.json file below
{
"name":"Wishlist",
"settings":[
{
"type": "paragraph",
"content": "Subscribe our channel [websensepro](https:\/\/youtube.com\/@websensepro?sub_confirmation=1)"
},
{
"type":"checkbox",
"id":"enable-wishlist",
"label": "Enable Wishlist",
"default": false
},
{
"type":"checkbox",
"id":"wishlist-floating-button-position",
"label": "Enable Floating Button",
"default": false
},
{
"type": "select",
"id": "floating_button-position",
"options": [
{
"value": "middle-left",
"label": "Middle Left"
},
{
"value": "middle-right",
"label": "Middle Right"
},
{
"value": "bottom-left",
"label": "Bottom Left"
},
{
"value": "bottom-center",
"label": "Bottom Center"
},
{
"value": "bottom-right",
"label": "Bottom Right"
}
],
"default": "middle-right",
"label": "Floating Button Position"
}
]
},Step 5: Add Code in Theme.liquid
Add the following code in theme.liquid file below <body> tag
<script>
// Wishlist feature: Add or remove the current product from the wishlist
function toggleWishlist() {
const pdpData = {
productTitle: "{{ product.title }}",
productImg: "{{ product.featured_image | img_url: '' }}",
productPrice: "{{ product.price | money | remove_first: '' }}",
productUrl: "{{ product.url }}"
};
let wishlistData = JSON.parse(localStorage.getItem('wishlist')) || [];
const isAlreadyInWishlist = wishlistData.some(item => item.productTitle === pdpData.productTitle);
const wishlistButton = document.getElementsByClassName('wishlist_button')[0];
if (!isAlreadyInWishlist) {
wishlistData.push(pdpData);
localStorage.setItem('wishlist', JSON.stringify(wishlistData));
// alert('Product added to wishlist:', pdpData.productTitle);
wishlistButton.innerHTML = `<svg class="heart-filled" width="35px" height="35px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.3 5.71002C18.841 5.24601 18.2943 4.87797 17.6917 4.62731C17.0891 4.37666 16.4426 4.2484 15.79 4.25002C15.1373 4.2484 14.4909 4.37666 13.8883 4.62731C13.2857 4.87797 12.739 5.24601 12.28 5.71002L12 6.00002L11.72 5.72001C10.7917 4.79182 9.53273 4.27037 8.22 4.27037C6.90726 4.27037 5.64829 4.79182 4.72 5.72001C3.80386 6.65466 3.29071 7.91125 3.29071 9.22002C3.29071 10.5288 3.80386 11.7854 4.72 12.72L11.49 19.51C11.6306 19.6505 11.8212 19.7294 12.02 19.7294C12.2187 19.7294 12.4094 19.6505 12.55 19.51L19.32 12.72C20.2365 11.7823 20.7479 10.5221 20.7442 9.21092C20.7405 7.89973 20.2218 6.64248 19.3 5.71002Z" fill="#000000"/>
</svg>
<p class="wishlist_text">In Your Wishlist</p>
`;
} else {
wishlistData = wishlistData.filter(item => item.productTitle !== pdpData.productTitle);
localStorage.setItem('wishlist', JSON.stringify(wishlistData));
// alert('Product removed from wishlist:', pdpData.productTitle);
wishlistButton.innerHTML = `<svg class="heart-outline" width="40px" height="40px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<rect x="0" fill="none" width="24" height="24"/>
<g>
<path d="M16.5 4.5c2.206 0 4 1.794 4 4 0 4.67-5.543 8.94-8.5 11.023C9.043 17.44 3.5 13.17 3.5 8.5c0-2.206 1.794-4 4-4 1.298 0 2.522.638 3.273 1.706L12 7.953l1.227-1.746c.75-1.07 1.975-1.707 3.273-1.707m0-1.5c-1.862 0-3.505.928-4.5 2.344C11.005 3.928 9.362 3 7.5 3 4.462 3 2 5.462 2 8.5c0 5.72 6.5 10.438 10 12.85 3.5-2.412 10-7.13 10-12.85C22 5.462 19.538 3 16.5 3z"/>
</g>
</svg>
<p class="wishlist_text">Not In Wishlist</p>
`;
}
// Update the display after modifying the wishlist
displayWishlist();
}
// Remove the specified product from the wishlist
function removeFromWishlist(productTitle) {
let wishlistData = JSON.parse(localStorage.getItem('wishlist')) || [];
wishlistData = wishlistData.filter(item => item.productTitle !== productTitle);
localStorage.setItem('wishlist', JSON.stringify(wishlistData));
// Update the display after removing from the wishlist
displayWishlist(pdpData);
}
// Display wishlist items
function displayWishlist(pdpData) {
const wishlistData = JSON.parse(localStorage.getItem('wishlist')) || [];
if (wishlistData.length === 0) {
console.log('Wishlist is empty');
return;
}
const wishlistHtml = wishlistData.map(item => `
<div class="wishlist-product__list">
<div class="c-product">
<a href="${item.productUrl}">
<img src="${item.productImg}" alt="${item.productTitle}">
</a>
<h3 class="c-product__title card__heading h5">
<a class="full-unstyled-link" href="${item.productUrl}">${item.productTitle}</a>
</h3>
<p>${item.productPrice}</p>
{% comment %}<button onclick="removeFromWishlist('${item.productTitle}')">Remove</button> {% endcomment %}
</div>
</div>
`).join('');
const wishlistBlock = document.querySelector('.js-wishlistBlock');
// Add a check to ensure the element is not null before setting innerHTML
if (wishlistBlock) {
wishlistBlock.innerHTML = wishlistHtml;
} else {
console.error('Element with class "js-wishlistBlock" not found');
}
}
// Execute this function on DOM content load
document.addEventListener('DOMContentLoaded', function () {
// Fetch the wishlist data from localStorage
const wishlistData = JSON.parse(localStorage.getItem('wishlist')) || [];
// Set the initial button text based on whether the product is in the wishlist or not
const wishlistButton = document.querySelector('.wishlist_button'); // Use querySelector instead of getElementsByClassName
const productTitle = "{{ product.title }}";
if (wishlistButton) {
const isAlreadyInWishlist = wishlistData.some(item => item.productTitle === productTitle);
wishlistButton.innerHTML = isAlreadyInWishlist ? `<svg class="heart-filled" width="35px" height="35px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.3 5.71002C18.841 5.24601 18.2943 4.87797 17.6917 4.62731C17.0891 4.37666 16.4426 4.2484 15.79 4.25002C15.1373 4.2484 14.4909 4.37666 13.8883 4.62731C13.2857 4.87797 12.739 5.24601 12.28 5.71002L12 6.00002L11.72 5.72001C10.7917 4.79182 9.53273 4.27037 8.22 4.27037C6.90726 4.27037 5.64829 4.79182 4.72 5.72001C3.80386 6.65466 3.29071 7.91125 3.29071 9.22002C3.29071 10.5288 3.80386 11.7854 4.72 12.72L11.49 19.51C11.6306 19.6505 11.8212 19.7294 12.02 19.7294C12.2187 19.7294 12.4094 19.6505 12.55 19.51L19.32 12.72C20.2365 11.7823 20.7479 10.5221 20.7442 9.21092C20.7405 7.89973 20.2218 6.64248 19.3 5.71002Z" fill="#000000"/>
</svg> <p class="wishlist_text">In Your Wishlist</p>` : `<svg width="35px" height="35px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="heart-outline">
<rect x="0" fill="none" width="24" height="24"/>
<g>
<path d="M16.5 4.5c2.206 0 4 1.794 4 4 0 4.67-5.543 8.94-8.5 11.023C9.043 17.44 3.5 13.17 3.5 8.5c0-2.206 1.794-4 4-4 1.298 0 2.522.638 3.273 1.706L12 7.953l1.227-1.746c.75-1.07 1.975-1.707 3.273-1.707m0-1.5c-1.862 0-3.505.928-4.5 2.344C11.005 3.928 9.362 3 7.5 3 4.462 3 2 5.462 2 8.5c0 5.72 6.5 10.438 10 12.85 3.5-2.412 10-7.13 10-12.85C22 5.462 19.538 3 16.5 3z"/>
</g>
</svg>
<p class="wishlist_text">Not In Wishlist</p>
`;
} else {
console.error('Element with class "wishlist_button" not found');
}
// Display wishlist items
displayWishlist();
});
</script>
{% if settings.wishlist-floating-button-position' %}
<a href="/pages/wishlist" class="button-floating">
<svg width="30px" height="30px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<rect x="0" fill="none" width="24" height="24"/>
<g>
<path d="M16.5 4.5c2.206 0 4 1.794 4 4 0 4.67-5.543 8.94-8.5 11.023C9.043 17.44 3.5 13.17 3.5 8.5c0-2.206 1.794-4 4-4 1.298 0 2.522.638 3.273 1.706L12 7.953l1.227-1.746c.75-1.07 1.975-1.707 3.273-1.707m0-1.5c-1.862 0-3.505.928-4.5 2.344C11.005 3.928 9.362 3 7.5 3 4.462 3 2 5.462 2 8.5c0 5.72 6.5 10.438 10 12.85 3.5-2.412 10-7.13 10-12.85C22 5.462 19.538 3 16.5 3z"/>
</g>
</svg>
<p class="wishlist_text">Your Wishlist</p>
</a>
{% endif %}
Step 6: Add More Code in Theme.liquid
Add the following code above {% endstyle %} in theme.liquid file:
.wishlist_button{
background: none;
border: none;
display: flex;
align-items: center;
}
.wishlist_button svg{
border-radius: 50%;
margin: 10px 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: 1px solid #000;
padding: 5px;
}
.heart-filled path{
fill: red;
}
.button-floating{
position: fixed;
transform: translateY(-50%);
z-index: 1;
padding: 8px;
display: inline-flex;
align-items: center;
text-decoration: none;
color: #000;
background-color: #efefef;
border-radius: 6px 0 0 6px;
transition: all .5s ease;
}
.button-floating:hover{
background-color: #000;
}
.button-floating:hover svg, .button-floating:hover .wishlist_text{
fill: #fff;
color: #fff;
}
.wishlist_text{
margin-left: 7px !important;;
margin: 0px;
text-decoration: none;
}
{% assign button_position = settings.floating_button-position | default: "middle-right" %}
{% if button_position == "middle-left" %}
.button-floating{
top: 50%;
transform: translateY(-50%);
left: 0px;
width: fit-content;
border-radius: 0 6px 6px 0;
z-index: 11;
}
{% elsif button_position == "middle-right" %}
.button-floating{
top: 50%;
transform: translateY(-50%);
right: 0px;
width: fit-content;
border-radius: 6px 0 0 6px;
z-index: 11;
}
{% elsif button_position == "bottom-left" %}
.button-floating{
bottom: 30px;
left: 0px;
width: fit-content;
border-radius: 0 6px 6px 0;
z-index: 11;
}
{% elsif button_position == "bottom-center" %}
.button-floating{
bottom: 30px;
left: 50%;
transform: translateX(-50%);
width: fit-content;
border-radius: 6px 6px 6px 6px;
z-index: 11;
}
{% elsif button_position == "bottom-right" %}
.button-floating{
bottom: 30px;
right: 0px;
width: fit-content;
border-radius: 6px 0 0 6px;
z-index: 11;
}
{% endif %}
2 thoughts on “How To Add Wishlist in Shopify [Without APP]”
Facing an issue with floating button for wishlist!
Can you share more details of the issue?