Wishlist Plus Icon - Header for Debut Theme

Solved
myjulz
Tourist
8 0 3

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! 

 

 

 

Accepted Solution (1)

Accepted Solutions
dmwwebartisan
Shopify Partner
10710 2339 3326

This is an 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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

Replies 29 (29)
dmwwebartisan
Shopify Partner
10710 2339 3326

HI

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

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
dmwwebartisan
Shopify Partner
10710 2339 3326

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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
myjulz
Tourist
8 0 3

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
Shopify Partner
10710 2339 3326

This is an 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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Likius
New Member
2 0 2

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
Tourist
8 0 3

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
Shopify Partner
10710 2339 3326

@AB22 

Please provide your store URL.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
AB22
Tourist
8 0 3

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

dmwwebartisan
Shopify Partner
10710 2339 3326

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

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
AB22
Tourist
8 0 3

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

dmwwebartisan
Shopify Partner
10710 2339 3326

@AB22 

If helpful then please Like and Accept Solution.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
AB22
Tourist
8 0 3

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

dmwwebartisan
Shopify Partner
10710 2339 3326

@AB22 

Where I can find the wishlist icon?

Please provide a screenshot.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
AB22
Tourist
8 0 3

Screen Shot 2021-06-13 at 11.16.46.png

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
Shopify Partner
10710 2339 3326

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

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
AB22
Tourist
8 0 3

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

dmwwebartisan
Shopify Partner
10710 2339 3326

@AB22 

Remove previous code and add this new code 

@media screen and (min-width:769px){
.template-index i.icon-swym-wishlist {color:#fff !important;}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
AB22
Tourist
8 0 3

Great thanks so much for your time!

AB22
Tourist
8 0 3

How can I get the same result on mobile?