How to Add a Wishlist Feature to Your Shopify Store

Table of Contents

Introduction

This article explains in detail how to add a wishlist feature and wishlist list page to Shopify using StoreCRM, including setup steps and points to note.

Adding a wishlist feature to your e-commerce site helps improve the customer experience by allowing users to save products they like, reducing the need to search again and increasing exposure to related products or offers.

For store owners, understanding customer interests and needs allows for more accurate marketing strategies and the opportunity to drive additional sales through cross-sell or upsell based on wishlist data.

With StoreCRM, there’s no need for other wishlist apps — everything from wishlist functions to marketing based on wishlist datacan be achieved with just this app.

Implementing the wishlist feature benefits both customers and store owners, so we highly recommend it.

This article uses the free 'Dawn' theme as an example.
Paid or customized themes may have a different file structure. In such cases, please contact StoreCRM Customer Support for implementation assistance.

Implementing the Wishlist Feature (Button)

Goal of this Section

First, let’s take a look at the completed wishlist button feature that will be implemented.
*The red box highlights the wishlist button.

Open Theme Customization Screen for Implementation

Since you will be editing the theme in the following steps, we recommend duplicating the theme and editing the copy if you're unsure.

➀Open the list of themes by going to [Shopify Admin] > [Sales Channels] > [Online Store] > [Themes].
Click [Customize] on the theme you want to edit.

➁Click [Customize] to open the theme customization screen. Since we will edit the product detail page, click [Homepage] > [Product] at the top of the page.

③ Click [Product] to view the template list, then select the template where you want to add the wishlist button feature.
To apply the wishlist button to specific products only, create a new template by copying an existing one using [Create template].In this case, we’ll create and apply a template named [default product].

Add App Block for Wishlist Feature (Button)

If you’re using Theme 2.0 or later, no coding is required to implement the Favorites feature (Favorites button).
You can add it by inserting the app’s theme block, which will be explained in this section.
If you’re using Theme 1.0, you’ll need to add code to the product detail page.

➀ First, decide where you want to place the restock notification button.
In this example, we will place it below the [Product Price]. Start by clicking [Product Information] > [Add Block] in the left-hand menu.

➁ブロックリストが出てくるので、上部のタブを[ブロック]>[アプリ]へ切り替えます。 アプリの中に、[お気に入りボタン]をクリックします。すると商品情報の中にブロックが追加されるので、挿入したい場所にドラック＆ドロップで移動させます。その後、ページ右上の[保存する]をクリックしてテーマを保存すれば本項は完了です

③Access the product page and verify that clicking the Favorites button toggles its display and that the state is retained even after reloading the page. This completes this section.
* If the Favorites button is not displayed, please check again to ensure that steps ① through ② were followed correctly.

If you’re using Theme 1.0

If you’re using Theme 1.0, please add the following code to the product detail page.
You can find the product detail page by going to Shopify > [Sales Channels] > [Online Store] > [Themes] > [Edit Code], then searching for “product”.
The file name varies depending on your Shopify theme. Typically, it is something like main-product.liquid, but if there’s a product.json file, the actual file name will be listed inside it (e.g., filename.liquid).
If you want to place the code above the [Add to Cart] button, try searching for terms like “buy-button” to locate the correct insertion point.

If you only want to add the Favorites icon

<div class="storecrm-button" data-type="wishlist-button" data-product-id="{{ product.id }}" data-variant-id="{{ product.variants[0].id }}" data-product-tags="{{ product.tags | json | escape }}" data-variants="{{ product.variants | json | escape }}"></div>

If you want to add both the Favorites icon and a label such as “Favorites”

<div class="storecrm-button" data-type="wishlist-button" data-product-id="{{ product.id }}" data-variant-id="{{ product.variants[0].id }}" data-product-tags="{{ product.tags | json | escape }}" data-no-label data-variants="{{ product.variants | json | escape }}"></div>

Implementing the Favorites Feature (Favorites List Page)

Goal of This Section

Let’s first take a look at the completed version of the Favorites feature (Favorites List Page) that we will implement. The Favorites List Page is automatically generated by the app, so you can easily set it up by simply adding the app’s designated URL to a menu. In this example, we will implement it by adding a [Favorites List] item to the header menu.

Set the URL of the Favorites List Page in the Header Menu

➀From the [Shopify Admin Panel], go to [Content] > [Navigation] to open the list of menus.
In this example, we will add a link to the header menu, so click [Main menu].

➁Click [Add menu item].

③A form will appear to enter the name and link.
You can choose any name you like, but in this example, we will enter [Favorites List Page].
For the URL, please enter the following. Once completed, click [Add].

/apps/obake/favorites

④Confirm that the newly added menu item appears in the menu list, then click [Save] at the top of the screen.

⑤Access your homepage and confirm that the new menu item has been added, and that clicking the link correctly navigates to the Favorites List Page. This completes this section.
* If the Favorites button is not displayed, please double-check that steps ① through ④ were completed correctly.

Customizing the Favorites Button and Favorites List Page

Customization of the Favorites Button and Favorites List Page

StoreCRM provides a simple, unobtrusive design for the Favorites button and the Favorites List Page by default, making it suitable for any type of store.
However, for those who want to fine-tune the design to match their site more closely or make the Favorites button stand out more, customization options are available directly from the app page.

①Open the StoreCRM app screen. Click [Settings] at the bottom left of the page, then click [Favorites Settings] that appears below it.

➁You can customize the text, color, and size of the Favorites button and Favorites List Page to your preference while checking the preview on the right side.
Once you finish customizing, be sure to click the Save button at the bottom of the page to save your changes.
After saving, check your store or theme preview to make sure the customizations have been applied as expected.

Summary

By using StoreCRM, you can implement various marketing features—like the Favorites functionality introduced in this article—without the need for installing additional apps or integrating with other MA tools. We are also preparing a feature that allows you to create scenarios using the Favorites registration data implemented this time, so stay tuned for updates. Additionally, StoreCRM offers free setup support and consulting services to help boost sales for customers who have installed the app. Please feel free to contact us using the inquiry form below.

Other Know-how