Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
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!
HI
Please email me your theme zip or staff account details i can try solve your problem.
Thanks!
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!
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
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!
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?
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..
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
Please share your store URL!
Thanks!
It’s studiobhomeware.com. TYSM
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!
I have added this however it appears to just be the same, i.e a space but no icon logo.
Please check this document
https://swym.it/help/adding-the-wishlist-plus-launch-point-to-your-shopify-sites-header-menu/
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?
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?
Please provide your store URL.
@dmwwebartisan Thank you for answering so fast you're awesome! https://glowscopes.shop/
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!
You're a genius!! Last thing how can I make it white on the home page?
If helpful then please Like and Accept Solution.
Yeah sure! but how do I make the wishlist icon white instead of black?
Where I can find the wishlist icon?
Please provide a screenshot.
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!
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!
Awesome! But now it's white everywhere. I'd like it to stay black on other pages.
Remove previous code and add this new code
@media screen and (min-width:769px){
.template-index i.icon-swym-wishlist {color:#fff !important;}
}
Great thanks so much for your time!
How can I get the same result on mobile?
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!
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
I used your article to add whatsapp icon on header for Modular theme...was very helpful...many thanks
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024