Wishlist Plus Icon - Header for Debut Theme

[myjulz]

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! 

[dmwwebartisan]

HI

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

Thanks!

[dmwwebartisan]

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!

[myjulz]

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 

[dmwwebartisan · Accepted solution]

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 🙂

Thanks!

[Likius]

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

[AB22]

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? 

[dmwwebartisan]

@AB22 

Please provide your store URL.

[AB22]

@dmwwebartisan Thank you for answering so fast you're awesome! https://glowscopes.shop/

[dmwwebartisan]

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

[AB22]

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

[dmwwebartisan]

@AB22 

If helpful then please Like and Accept Solution.

[AB22]

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

[dmwwebartisan]

@AB22 

Where I can find the wishlist icon?

Please provide a screenshot.

[AB22]

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!

[dmwwebartisan]

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

[AB22]

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

[dmwwebartisan]

@AB22 

Remove previous code and add this new code 

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

[AB22]

Great thanks so much for your time!

[AB22]

How can I get the same result on mobile?