Can I add a Wishlist button to my Shopify theme?

SunilJakhar
Tourist
9 0 4

 

Hi

I am currently working on a theme. And want to display  ( Add to Wishlist ) button. So any suggestion how i add this functionality. Thank You!

Replies 3 (3)

MyCodeMagic
Shopify Partner
19 4 2

Hello @SunilJakhar 

1 Create a new snippet

2 Add name as your choice

3 Pest the bottom code and include this snippet to add wishlist. 

4 Change wishlist icon as your requirement I have use SVG

<a href="{{ product.url | within: collection }}"
   data-productid="{{ product.id }}"
   data-producth="{{ product.handle }}"
   data-add="{{ "wishlist.buttons_text.tooltip_add" | t }}"
   data-remove="{{ "wishlist.buttons_text.tooltip_remove" | t }}"
   data-tooltip="{% if customer.id == blank %}{{ "wishlist.buttons_text.tooltip_login" | t }}{% else %}{% if wl_text %}{{ "wishlist.buttons_text.tooltip_remove" | t }}{% else %}{{ "wishlist.buttons_text.tooltip_add" | t }}{% endif %}{% endif %}"
   data-tposition="left"
   data-type="wishlist"
   data-action="{% if wl_text %}wk-remove{% else %}wk-add{% endif %}"
   class="wk-app-btn tt-btn-wishlist wlbutton-js{% if template.suffix == "wishlist" %} wk-delete-icon{% endif %}">
  {% if template.suffix == "wishlist" %}{% include "svg-delete-icon" %}
  {% else %}{% include "svg-heart" %}
  {% endif %}
</a>

  

MyCodeMagic
SunilJakhar
Tourist
9 0 4

But how to change a Wishlist icon. I want to use SVG. It is not working.

@MyCodeMagic I'm learning now can you tell me? 

Thank You!

MyCodeMagic
Shopify Partner
19 4 2

Hello @SunilJakhar 

I have replaced SVG with font-awesome icons, please check and try this code 🙂

<a href="{{ product.url | within: collection }}" data-productid="{{ product.id }}" data-producth="{{ product.handle }}"
  data-add="{{ " wishlist.buttons_text.tooltip_add" | t }}" data-remove="{{ " wishlist.buttons_text.tooltip_remove" | t
  }}" data-tooltip="{% if customer.id == blank %}{{ " wishlist.buttons_text.tooltip_login" | t }}{% else %}{% if wl_text
  %}{{ "wishlist.buttons_text.tooltip_remove" | t }}{% else %}{{ "wishlist.buttons_text.tooltip_add" | t }}{% endif %}{%
  endif %}" data-tposition="left" data-type="wishlist"
  data-action="{% if wl_text %}wk-remove{% else %}wk-add{% endif %}"
  class="wk-app-btn tt-btn-wishlist wlbutton-js{% if template.suffix == " wishlist" %} wk-delete-icon{% endif %}">
  {% if template.suffix == "wishlist" %}<i class="far fa-trash-alt"></i>
  {% else %}<i class="far fa-heart"></i>
  {% endif %}
</a>

If you like and feel good, write and accept it as a solution

MyCodeMagic