Wishlist Installation
- Go to Theme Customization >> Enable the app block.
2. Paste this code to display the Wishlist Button Product Page
Open product-form.liquid file or main-product.liquid file or product-template.liquid file. And please add the below code under your add to cart button.
<div class="th_prd_wl_btn" data-product_id="{{product.id}}" data-variant_id="{{product.selected_or_first_available_variant.id}}"></div>
Wishlist button displayed like the below screenshot on the product page.
3. Paste this code to display Wishlist Button Collection Page
Open card-product.liquid file or product-card-grid.liquid file or product-card-list.liquid file or product-card.liquid file or product-grid-item.liquid file. Please add the below code under the product price.
<div class="th_wl_col_btn" data-product_id="{{product.id}}" data-variant_id="{{product.selected_or_first_available_variant.id}}"></div>
On the collection page, you are using the load more button or scroll feature to display the further products on the collection page, so for displaying the wishlist icon on load more further all products, you need to add one function in your theme where the load more code of theme is added. Once you will add this function to your theme then icon will start to appear on the products which load on all other pages on the collection.
$th_refreshWishlistItems();
The wishlist button is displayed like the below screenshot on the Collection Page.
4. Please follow the steps to add a wishlist menu in header.
- Open your Shopify site's main navigation.
- Then select your main menu and click on Add menu item to add a new menu item.
- Add the menu name Wishlist.
- Paste the following link into the Link text box: /apps/wishlist/
- Click on Save Menu.
- If you want to display a icon on header then copy the below code and add it on the header.liquid file at the place where you want to display the icon.
<a href="/apps/wishlist" class="th_wlc_position_relative"><div class="th_wlc_product_count"></div><svg width="26" height="23" viewBox="0 0 26 23" fill="none"><path d="M24.8759 3.27339C24.1475 2.06525 23.0806 1.12141 21.8207 0.57048C20.3932 -0.0562504 18.7897 -0.169062 17.1839 0.245058C15.7124 0.624602 14.279 1.4478 13 2.64198C11.7209 1.44769 10.2874 0.624442 8.8156 0.244952C7.20974 -0.169327 5.60622 -0.0564097 4.17865 0.570745C2.91872 1.12185 1.8519 2.06588 1.12359 3.27418C0.360858 4.53529 -0.0271625 6.06892 0.00147825 7.70909C0.128635 15.0007 10.5135 21.6311 12.594 22.8863C12.7175 22.9608 12.8575 23 13 23C13.1425 23 13.2825 22.9608 13.406 22.8863C15.4867 21.6309 25.8725 14.9993 25.9986 7.70782C26.0269 6.06775 25.6387 4.53428 24.8759 3.27339V3.27339ZM24.3739 7.67728C24.3332 10.0348 22.8306 12.7835 20.0288 15.6259C17.4342 18.258 14.4828 20.242 13 21.1651C11.5172 20.2422 8.56627 18.2584 5.97185 15.6262C3.16993 12.784 1.66731 10.0356 1.62618 7.67808C1.58129 5.10386 2.77074 3.03273 4.80794 2.13773C5.4756 1.84606 6.19237 1.69728 6.91592 1.70019C8.78442 1.70019 10.7609 2.64623 12.4206 4.41138C12.4962 4.49179 12.5864 4.55566 12.6859 4.59926C12.7853 4.64285 12.8921 4.6653 12.9999 4.6653C13.1078 4.6653 13.2145 4.64285 13.314 4.59926C13.4134 4.55566 13.5036 4.49179 13.5792 4.41138C15.885 1.95916 18.8021 1.08796 21.1913 2.13757C23.2287 3.03225 24.4183 5.10307 24.3739 7.67712V7.67728Z" fill="black"></path></svg></a>
If you face any issue with code installtion then feel free to contact our support team at support@webcontrive.com, they will help you to set up everything perfectly on your store.