Wishlist Plus Icon - Header for Debut Theme

Store Design
1

Hi everyone,

I’m using a free version of Wishlist Plus with my debut theme and struggling to create a heart icon on the header menu between the search bar and the cart. I think, but not sure, that Debut doesn’t use “Awesome Font” (not sure what that is either) so I’ve found this link which explains what I need to do:

https://swym.it/help/adding-the-wishlist-plus-launch-point-to-your-shopify-sites-header-menu/

However, I don’t know:

  • (i) what code I am supposed to be inserting (since I am not sure if Debut is on Font Awesome, but I think it isn’t) and

  • (ii) where I am supposed to insert the code.

Any assistance would be wonderful - the site is www.myjulz.com.au

Many thanks!

2

HI

Please email me your theme zip or staff account details i can try solve your problem.

Thanks!

3

HI

I have solved your problem.

1] add html code sections/header.liquid line no 138 to 142

<!-- add whish list icon -->
          <a href="#swym-wishlist" class="swym-wishlist">
  			<i aria-hidden="true" focusable="false" role="presentation" class="fa fa-heart"></i>
          </a>
<!--  end whish list icon -->

2] add css code assets/theme.scss.liquid file

/* code for whishlist icon*/
i.icon-swym-wishlist {
font-family: 'swym-icons';
font-style: normal;
vertical-align: middle;
}
i.icon-swym-wishlist+span {
vertical-align: middle;
}
i.icon-swym-wishlist:after {
content: '';
font-size: 130%;
line-height: 18px;
text-align: center;
display: inline;
}
/*content rendered after swym is ready to avoid showing block/invalid chars*/
.swym-ready i.icon-swym-wishlist:after {
content: '\f004';
}

3] add code layout/theme.liquid file line no 106

{{ '//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' | stylesheet_tag }}

I hope this will work for you.

Thanks!

2 Likes
4

Thanks so much! That worked.

Question, what code do I need and where must I insert it if I want my wishlist to have 2 features:

(i) Pop up when you add to wishlist

(ii) Wish list Item show

1 Like
5

HI

please check this link : https://swym.it/help/adding-to-wishlist-from-collections-and-quick-view-pages/

Please do like and accept as solution. That will cost of our time :slight_smile:

Thanks!

6

Hi,

Thank you for the suggestions, but when I am adding the last code (add code layout/theme.liquid file line no 106) it breaks the whole page …I am not sure what I am doing wrong..

7

Hello!

I’m having the same issue where my wishlist icon is way to large on mobile version and it’s black instead of white. I don’t have a font awesome theme though what should I do?

8

@AB22

Please provide your store URL.

1 Like
9
1 Like
10

@AB22

Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media screen and (max-width:768px){
i.icon-swym-wishlist:after {
    display: inline-flex !important;
    font-size: .875em !important;
    margin-top: 25% !important;
}
}

Thanks!

11

You’re a genius!! Last thing how can I make it white on the home page?

12

@AB22

If helpful then please Like and Accept Solution.

13

Yeah sure! but how do I make the wishlist icon white instead of black?

1 Like
14

@AB22

Where I can find the wishlist icon?

Please provide a screenshot.

15

Screen Shot 2021-06-13 at 11.16.46.png
Screen Shot 2021-06-13 at 11.16.46.png428×184 48.4 KB

It’s the heart in the top right corner. I want to be able to make it white just on the homepage like the rest of the icons. Thanks again!

1 Like
16

@AB22

Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media screen and (min-width:769px){
i.icon-swym-wishlist {color:#fff !important;}
}

Thanks!

17

Awesome! But now it’s white everywhere. I’d like it to stay black on other pages.

18

@AB22

Remove previous code and add this new code

@media screen and (min-width:769px){
.template-index i.icon-swym-wishlist {color:#fff !important;}
}
1 Like
19

Great thanks so much for your time!

20

How can I get the same result on mobile?