How To Add A Wishlist On Shopify Store? (With & Without App)

Name: EComposer Landing Page Builder
Brand: EComposer
Rating: 5 (2154 reviews)

EComposer Team

Sep 17, 2024

comments

Want to add a wishlist to the Shopify store? You can add a wishlist to your store with or without a third app. This guide will show you how to do it.

How To Add A Shopify Wishlist (With An App)?

If you don't know how to code, try a Wishlist app first to see how it works. Later, you can think about making a custom solution. It would be more cost-effective rather than hiring a Shopify Developer.

We'll use Wishlist Plus to show you how easy it is to use a third-party app to make a Wishlist for your Shopify store. This app has 500 request tasks that can be used forever (no restart). If you need more ideas, read on another part of this blog.

Step 1: Search the Shopify App Store for "Wishlist Plus." Then click the "Install" button.

Guide to add a Shopify wishlist with Wishlist Plus app

Step 2: After installation, open Wishlist Plus in Shopify admin. In the dashboard app, click the "Get Started" button.

Step 3: Wishlist Plus will guide you through the 3-step process to automatically set your Wishlist so your shoppers can save their favorite items.

Step 4: In the first step, click the "Customize wishlist button." Here, you can choose the color, button style, icon style, and messenger call-to-actions for your Wishlist. On the left side, you can see the preview of your edit.

When satisfied, click the "Save & Next" button.

Step 5: Next, customize the "Customize launch point" option. For example, in the image, we have selected "Floating Button," and the button position is "Bottom right."

Once satisfied, click the "Save & Next" button for the next editing step.

Step 6: Finally, customize the "Customize wishlist page" option. Here you can:

Choose the Wishlist Page as a pop-up or separate page.
Configure the Add To Cart Button before and after your customer adds to the cart.

Step 7: Enable app embeds on the Shopify theme and "Save" your changes.

Now, your wishlist is displayed in your store.

How To Create A Shopify Wishlist (Without An App)?

If you know how to code and want to spend less money on outside apps, you can create your wish list page. This part will guide you through adding wishlist functionality to your Shopify store.

Step 1: Create A Wishlist Template

In your Shopify admin, navigate to Themes > Online Store. Next, click Actions > Edit for the theme you want to modify.

Guide to create a Shopify wishlist without an app

In the theme editor, navigate to the Templates directory. Click Add a new template, then select template type "Page."

We recommend you name the template wishlist. liquid and click Create.

Now, paste our code into the wishlist template you just created above.

NOTE: This code wraps the content rendered by the wishlist snippet (which we'll create next) within a container with the class page width.

{% render 'wishlist' %}

</div>

Step 2: Create A Wishlist Snippet

After step 1, in the theme editor, navigate to the Snippets directory.

Then, click the "Add a new snippet" button.

We recommend you name the snippet wishlist and click Done.

Now, paste our code into the wishlist snippet you just created above.

NOTE: This code defines styles for the wishlist section and creates a container element with the class js-wishlistBlock, where wishlist items will be displayed dynamically.

<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>

<h2 class="title inline-richtext h2 scroll-trigger animate--slide-in"><b>Wishlist</b></h2>

</div>

</div>

Step 3: Add Wishlist Button To Product Page (Custom Liquid)

In the theme editor, navigate to the "Customize" button. Locate the section where you want to add the wishlist button (e.g., within the product details).

Add the Custom Liquid block and paste the following code:

{% if settings.enable-wishlist %}

<g>

</g>

</svg>

</button>

{% endif %}

Make sure you click "Save" your changes.

Step 4: Add The Code In settings_schema.json

Now go back to your theme's code editor, then find "settings_schema.json."

After line 9 of code: "}," go to a new line and paste our code 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

Then, find a theme.liquid file and add the code below the <body> tag.

// 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">

</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">

<g>

</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 => `

</a>

<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>

`).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">

</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">

<g>

</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' %}

<g>

</g>

</svg>

<p class="wishlist_text">Your Wishlist</p>

</a>

{% endif %}

Step 6: Add More Code In Theme.liquid

After adding the above code to the theme.liquid file, then add code above {% endstyle %}:

.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 %}

Step 7: Enable Your Wishlist

After completing the above steps, return to your "Setting" in the customized Shopify theme.

Here, you will see the "Wishlist" option. Here, you can customize your wishlist button. Check the "Enable Wishlist" box, then click Preview your Store to see the changes.

Now, you will see the wishlist button position according to where you placed the "Custom Liquid" block in step 3.

Example of creating a wishlist using code.

3 Shopify Wishlist App You Should Try

Picking an acceptable wishlist app can significantly affect your customers' feelings and the number of items you sell. Let's look at three popular choices to help you decide which is best for your shop.

Get more ideas at Top 8 Shopify Wishlist Apps for E-commerce Success.

#1. Wishlist Plus

Wishlist Plus is a powerful Shopify app that uses wishlists to engage customers and boost sales. It has many features that can be used for different business needs.

Rating in 2024: 4.9/5.0⭐ (2,140+).

Get Wishlist Plus app!

Wishlist Plus's feature.

Key features:

Versatile wishlist types by creating custom registries, gift lists, or simple favorites lists to suit different customer preferences.
Guest Wishlists allow customers to create wishlists without requiring account creation.
Advanced analytics through detailed reporting and analytics.
Customization options match your brand identity with custom branding, layouts, and icons.
Integrates seamlessly with your Shopify theme and other marketing tools like email platforms and SMS services.

Pricing:

Wishlist Plus pricing.

#2. Wishlist Hero

Through unique request experiences, Wishlist Hero is a Shopify app meant to get customers more involved and boost sales.

Rating in 2024: 4.6/5.0⭐ (518+).

Get Wishlist Hero app!

Wishlist Hero's feature.

Key features:

Email reminders for low stock or price drops on wishlist items.
Multi-Currency and Language Support options.
Customization options to match your store's branding.
Connects with popular marketing platforms like Klaviyo, Google Analytics, Facebook Pixel, and TikTok Pixel for data-driven insights.

Pricing:

Wishlist Hero pricing.

#3. AI Wishlist (Wisepops)

AI Wishlist is a cutting-edge Shopify app that can guess and change customers' purchases. The app uses powerful AI algorithms to make custom wishlists based on how visitors use it and what they like.

Rating in 2024: 4.9/5.0⭐ (79+) in getapp.com

Get AI Wishlist app!

AI Wishlist's feature.

Key features:

Predictive AI uses data-driven insights to expect customer desires.
Personalized wishlists automatically to individual shoppers.
Conversion boosters with features like limited-time offers and product recommendations.
Customer engagement through email, SMS, and push notifications.

Pricing:

AI Wishlist pricing.

Tips For Adding A Shopify Wishlist Bring Conversion

A wishlist isn't just a place to put things; it's also a great way to find out what customers want and increase sales. If you use request data correctly, you can turn idle users into loyal buyers. Let's talk about ways to get the most out of your requests.

Leverage Wishlist Data

We mentioned the Wishlist Hero and AI Wishlist apps above. These apps can automatically change wishlists and send users emails about the items on their lists.

Using this customer insight, you can personalize their shopping experience:

Tailored recommendations for complementary products or higher-priced alternatives.
Personalized email campaigns by sending targeted emails based on wishlist items, including restock alerts, price drops, or exclusive offers.
Exclusive wishlist discounts by offering exclusive deals on wishlist items.

A study from Epsilon found that 80% of people are more likely to buy when brands offer unique experiences. That also means that using customer information properly can increase sales.

Create A Clear Wishlist Call-To-Action

To encourage people to make wishlists, make the feature stand out on the e-commerce site. Use precise language and calls to action (CTAs) to enable customers to use the request function. These messages and calls to action help clarify why using wishlists on your e-commerce store is a good idea.

Look at New Era to get an idea. They make a clean "Save to Wishlist" link with the same icon used in the banner.

New Era's product page.

Furthermore, the wishlist page should be straightforward. Every item in the gallery has an "Add to Bag" button that encourages buyers to finish their purchase. This is an excellent example of request UI design because it's easy for shoppers to use and slowly leads them to purchase.

New Era's wishlist page.

Increase Customer Lifetime Value With Price Drop Wishlist Reminders

Customer lifetime value (CLV) is the most critical factor when determining a brand's long-term success. Increasing CLV is about building long-lasting ties with buyers, which is why Wishlist Reminders for price drops work.

For example, a customer sees a high-end brand jacket on the site that they want but can't afford. They don't walk away; instead, they put it on their Wishlist. There you go; Wishlist Reminders is now ready to go.

A few weeks later, the jacket's price goes down. The brand texts the customer personalized to let them know. The message reminds the customer of the clothing and shows that the brand understands they are on a tight budget.

An example of Wishlist Reminders.

The customer buys the jacket and becomes more loyal to the brand because they are touched by the level of personalized care and thrilled by the price drop.

Key Takeaway

Adding a wishlist to your Shopify store improves customers' shopping experience and increases sales. If you know the different ways to do things, such as using code or separate apps, you can choose the best approach for your store and its resources.

Remember that a well-done wishlist can significantly affect how engaged and loyal customers are and how well the store does. By using wishlist data wisely, you can improve your marketing strategies and make product suggestions that fit each person's tastes.

For more how-to instructions on Shopify, check our blog.

EComposer Team

Hi friend, we're Shopify gurus from EComposer. A team of 10-year experienced and certified experts. Additionally, our expertise has been recognized and highlighted in esteemed publications such as TechCrunch, Shopify Expert, Entrepreneur, and Forbes. We want to share our experience and knowledge about Technology, AI, Shopify, Marketing and E-commerce.