Enable MyWishlist Storefront Feature

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)

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.
4. • 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.

1. Goto Shopify Admin Console > Online Store > Navigation
   
   
2. 
   
   
3. Select your any menu and click on "Add menu item" to add a new menu item.
   
   
4. 
   
   
5. In the text box for Link, paste the following text: #bt_laucher_whislist_menu
6. Click to "Apply changes" Button.
   
   
7. 
   
   

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>
   
   
   
   
   
   
   

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>
   
   
   

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>
   
   
   

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