Solved

Wishlist Plus Icon - Header for Debut Theme

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)
dmwwebartisan
Shopify Partner
12269 2546 3692

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 30 (30)

dmwwebartisan
Shopify Partner
12269 2546 3692

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

dmwwebartisan
Shopify Partner
12269 2546 3692

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder 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
12269 2546 3692

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
nudehaven
Tourist
39 0 1

Hi! I'm having the same issue, I'm using the same free wishlist plus version and im struggling to create a heart that is not black on the screen, I want it to match my brown theme but it only stays black, what should I do?

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

 

JessBo
Excursionist
18 0 6

I am also having this issue can you let me know how fix this, my icon is not showing but there is a space and it works its just the icon that is not there. thanks 

dmwwebartisan
Shopify Partner
12269 2546 3692

@JessBo 

Please share your store URL!

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
JessBo
Excursionist
18 0 6

It’s studiobhomeware.com. TYSM

dmwwebartisan
Shopify Partner
12269 2546 3692

@JessBo 

Please add the following css class to your assets/theme.css bottom of the file.

 

i.icon-swym-wishlist {
font-family: 'swym-font';
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';
}

Please check following link for help

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

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
JessBo
Excursionist
18 0 6

I have added this however it appears to just be the same, i.e a space but no icon logo.

dmwwebartisan
Shopify Partner
12269 2546 3692
JessBo
Excursionist
18 0 6

I have read through this and I have updated both my header liquid with the HTML code and also updated the CSS with the code. Do I need to add this as an asset possibly? It is there and working it just doesn't show the heart Icon so I am guessing it is to do with the CSS code?

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
12269 2546 3692

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
AB22
Tourist
8 0 3

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

dmwwebartisan
Shopify Partner
12269 2546 3692

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder 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
12269 2546 3692

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
AB22
Tourist
8 0 3

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

dmwwebartisan
Shopify Partner
12269 2546 3692

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder 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
12269 2546 3692

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder 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
12269 2546 3692

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder 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?

dmwwebartisan
Shopify Partner
12269 2546 3692

@AB22 

You can try to add the following code for the mobile.

@media screen and (max-width:768px){
.template-index 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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
paganbanfield
Visitor
1 0 0

Hi there, wondering if you are able to assist. I have installed the app within Shopify and it looks fine on desktop and ive managed to install the heart icon into the header also however this is not showing up on mobile version. 

 

Is there a piece of code i am missing? @dmwwebartisan 

Thank you kindly 

151528710
Visitor
2 0 1

I used your article to add whatsapp icon on header for Modular theme...was very helpful...many thanks