Enable MyWishlist Storefront Feature

When you install MyWishlist app on your Shopify store, we install this App by default with disable Store frontend feature



  1. Enabled MyWishlist on a Current theme

    • In the admin console, go to Apps > MyWishlist



    • How to Enable Store frontend Feature: Click to the " MyWishlist app" and go to the Dashboard and Click on Enable-Disable button. Please see below Screenshot..



  2. Once you installed the app then you need to complete the Button design setting to make the functionality workable on the front-end. If you don’t configure button design so it might cause store frontend feature. (It is one time setting after installation)

    • In the admin console, go to Dashboard > Button design menu



Help Note : if you have any further queries on the MyWishlist app functionality, or would like to make any changes, please email us and we’ll be happy to help.

Manual Process for Installing the MyWishlist Feature on Your Shopify Theme

When you install MyWishlist App on your Shopify store, we install this application by default on the Current theme. However, in case if the default and Automation approach does not work then you can follow the manual process as given below.

  1. In the admin console, go to Online Store > theme
  2. Choose the Current theme
  3. Click on Action > Edit Code (Please check the below screenshot)




How to Updated the theme.liquid file

  1. In the Left side menu, Look for “theme.liquid” file and open it (Please check the below screenshot-1)



  2. Search code at the end of the file. If you could not get that code then added manually
  3. {% include 'btwishlistfooterSnippent' %}




How to Installing the MyWishlist Feature on the another Theme (How to change the theme)

To enable/install the MyWishlist on the another theme, You need to make sure all the configuration settings.

  1. In the admin console, go to Online Store > theme
  2. Choose the theme
  3. Click on Action > Publish
  4. Go to Apps > MyWishlist
  5. Check Enable app



  6. Click on Button design menu > Fill all the information and then save the setting



  7. Note : if Wishlist storefront feature still not appearing then Check the code of the snippet for theme.liquid file Follow us
Help Note : if you have any further queries on the MyWishlist app functionality, or would like to make any changes, please email us and we’ll be happy to help.

MyWishlist Launch point Settings

The MyWishlist app offers a couple of default options for your launch point – choose your launch point icon, color options & position, etc. If you want to make changes, please follow the process as given below.


  1. In the admin console, go to Apps > MyWishlist
  2. Click on Lauch point design menu



  3. In this step, you will configure the placement of the launch button. You have three options, and your setup process will slightly differ based on what you choose.
    • Color :

      this is the default color that will be used on your store across all Wishlist. You have two options to pick a color – you can either use the Color Picker or enter the Hex Code that matches the color scheme of your store.

    • launcher Icon

      this is the default icon that will be used on your store across all Launch points. You have four options for lauch point - you can either use the icon of your store.

    • Placement

      you can choose where you wish to place the launch button, from two options available.

Set Launch point in Navigation Menu

This allows you to configure the launch point as a menu option on the navigation bar.

Please follow the steps given below
  1. Goto Shopify Admin Console > Online Store > Navigation



  2. Select your any menu and click on "Add menu item" to add a new menu item.



  3. In the text box for Link, paste the following text: #bt_laucher_whislist_menu
  4. Click to "Apply changes" Button.



Icon as a launch point in the header menu or anywhere on your site.

It is quite easy to enable the icon to the site’s header menu or anywhere on the site. Follow the some steps.

  1. Identify the nav bar liquid file that has the code for the account and cart. The liquid file varies based on the theme your site is built with, here are some of the files that we have seen the code is placed in:
    • sections/header.liquid
    • snippets/header-bar.liquid
    • layout/theme.liquid
  2. Insert the code below at the place where you’d want the icon to appear


  3. <a href="#bt_laucher_whislist_menu" class="btwap-wishlist-icon bt-icon-4x"> <i aria-hidden="true" class="fa fa-heart"></i> </a>






Help Note : if you have any further queries on the MyWishlist app functionality, or would like to make any changes, please email us and we’ll be happy to help.

How to set "Add to Wishlist" Button Placement

On the product details page, “Add to Wishlist” button gets attached below or next to the “Add to Cart” button. Please follow the process as given below.

  1. Step 1: Goto Shopify Admin Console > Online Store > Themes > Edit Code



  2. Step 2: Find the template/snippet file which renders your product page and add the code below at the position where you prefer to attach our button. Here for example, we are placing it next to the Price element.

    HTML code to be copy-pasted:

    <div class="btwishlist_custom_product_list" data-productid="{{ product.id }}" data-btnindex="1"></div>




Help Note : if you have any further queries on the MyWishlist app functionality, or would like to make any changes, please email us and we’ll be happy to help.

Add Wishlist Button to Quickview

Quite a number of stores have Quick View enabled to make shopping easier for customers. It is simple to enable “Add to Wishlist” functionality for Quick View as well.

  1. Identify the Quick View rendering in your store. Based on your theme and the quick view app that you have installed, it varies. Some of the files that we have seen the quick view code to be on is

    • snippets/quick-view.liquid
    • templates/product.quick.liquid


  2. Copy-paste the following snippet in the place where you want to show the button in your code


    <div class="btwishlist_custom_product_list" data-productid="{{ product.id }}" data-btnindex="1"></div>




Help Note : if you have any further queries on the MyWishlist app functionality, or would like to make any changes, please email us and we’ll be happy to help.

Add Wishlist Button to Your Collections Page

Wishlist is enabled by default on your product pages, but it’s generally a good idea to add the button to your Collections pages as well – especially for shoppers on a mobile device, that’s a really low-friction way for them to bookmark their favorite products. Here is how you can enable an “Add to Wishlist” button on your Collection pages:

  1. Find the right file from which your product card gets displayed in the collection. Depending on your theme, it will be one of these files
    • snippets/product-listing.liquid
    • snippets/products-grid.liquid
    • snippets/product-grid-item.liquid
    • snippets/product-card.liquid
    • snippets/product-listing-item.liquid
    • snippets/product-loop.liquid
    • snippets/product-item.liquid
    • snippets/product-thumbnail.liquid
    • snippets/product-card-grid.liquid
    • snippets/product-block.liquid
    • snippets/product-listing-slider.liquid
    • snippets/product-thumbnail.liquid
    • snippets/product-item.liquid
    • snippets/product-loop-grid.liquid
    • snippets/snippet-product-item.liquid

    Note: If you don’t find any of these files, email support@hubifyapps.com and we will help you find the right file for your theme.

  2. Copy-paste the following snippet in the place where you want to show the button in your code


    <div class="btwishlist_custom_product_list" data-productid="{{ product.id }}" data-btnindex="1"></div>




Help Note : if you have any further queries on the MyWishlist app functionality, or would like to make any changes, please email us and we’ll be happy to help.