[Help Needed] Add Wishlist Icon on Product Page
Hey y’all, I’m working with the Kalles v5 Shopify theme and ran into an annoying limitation. The Wishlist icon only shows on the product cards in collection pages — not on the individual product page itself.
I reached out to the theme devs, and they basically said they won’t help with it 🫠
I’m trying to add the Wishlist icon (like the heart) over the product image on the product page — similar to how it appears in collections. I’ve attached screenshots titled "Wishlist 1 & Wishlist 2" for reference.
Anyone know how I can manually implement this via custom code? Would appreciate any help!
45 Replies
You can do something like this. You stack the icon on top of the image using grid.
The other method is by using position:absolute; that works too
Be sure to share the codepen and not just a screenshot
Aahh damn... I already deleted the pen, but alright, i can make a new one, but anyway, all the code is included in the screenshot, but sure, i'll make a new pen and send it 🙂
It's a lot easier to mess around with a pen (and copy/paste) than it is an image 😉
Yooo that's sick
how did you do that yo?
but I seriously have no idea of where to paste this 😭 like under which file and under which block of code or whatever that's called lmao
Just create a new index.html file and paste this inside the body, paste the css in a .css file
i never used shopify, but is it even possible what you want?
its not just having an icon visible on the card, but the logic/functionality for it needs to be there too.
So not just a front-end solution
Aaahh it's shopify
I missed that part xD
exactly!
Literally the very first few words of the post lol
Hey y’all, I’m working with the Kalles v5 Shopify theme…
if it's not there, you need to custom create/alter a product page. If the devs will not help you with it, i think the functionality is not there for it
Thank you so much tho @Tok124 (CSS Nerd)
idk this either lol 😭
I think I should consider learning coding already
Yeah hahah
https://codepen.io/tok124/pen/VYvpYag
There you have my pen 🙂
there are some wishlist apps for shopify. maybe you can find one that makes this possible for you.
Again, i have no experience with shopify, maybe search for it on youtube
for example https://www.youtube.com/watch?v=25njNVBWqzg. Here they are adding a wishlist button to a single product page as well
Tutorials by Manizha & Ryan
YouTube
How To Add Wishlist In Shopify 2025 (EASY & Quick)
How To Add Wishlist In Shopify 2025 (EASY & Quick)
In this video I show you How To Add Wishlist In Shopify. It is really easy to do and learn to do it in just a few minutes by following this super helpful tutorial.
If this tutorial helped you out please like & commenting down below if this works!
Subscribe for more daily videos! See you in th...
I also have no experience with shopify btw ^^
hey, thank you so much fr!! imma go check it out asap
oh but you did a great job fr
it's good but it isn't ineractive?
What you mean ineractive? You mean responsive? It is...
Or you mean interactive so you can interact with the heart icon? Nah... It should be a button really... i just used a div in this case, but it's super easy to just replace it with an actual button, i could fix that if you want
Then you just need to write some JS code for it
oh you could? I'd appriciate that fr!
@Tok124 (CSS Nerd) btw i just checked your codepen profile, the banner or header or whatever you call that, you made that yourself?
i can see that vibing(or moving?) with the music i'm listening too
Updated the pen, it uses a button now 🙂
Nope, that one is not made by me, that is made by Ana Tudor 🙂
is Ana Tudor a person?
bett give a min
Yeah, another youtuber
YouTube
Ana Tudor
Once a rocker, always a rocker. Mad scientist, daredevil, always immature. Oh, yeah, and just in case you couldn't tell from the header image... I love tigers! Probably because I also have the character of one.. all soft and fluffy until you meet the teeth and the claws.
This channel came to exist mostly because I liked that YouTube "learned" w...
ohh it looked like it required some complex lines of codes lmao
Yeah, it's a canvas and a bunch of JS code 🙂
Am I the only one who can't see any difference? It's still the same
You don't "see" a difference, only in the code
ahh that's amazing, good job there even though you used youtube
why's job getting censored yo?
Huh? what job?
I just grabbed it from her pen so it's 100% credits to Ana Tudor xD
oh nvm I realised it's my auto correct
😭
it gets autocorrected to j*b instead of job
help 😭
alright anyways
Aahh
i'll go check once again
ohh I see the button thingy there
Yeah great ! 🙂
Thank you so much btw
Now you just need to write some JS to make an event whenever someone click the button 🙂
right, I'll do this myself and get back to you with either results or tons of doubts lmfao
Suuuure ! 🙂
oh also, this codepen thingy..
it's like you post your projects here?
I personally mostly use codepen just for helping other people with their code, i have my own projects saved in codepen collections... 🙂
But yeah, you can use it to share your projects or as a portfolio or share here whenever you need help with html/css/js.
I write all my projects directly in codepen, i don't use VSCode or anything, only codepen, because it has everything i need, and no setup is required 🙂
But yeah i have used codepen for 10 years now, i love it 🙂
ohh that makes sense now
for 10 years? woah dude
you use codepen and not vs code? that's actually good
vs code seems to complex to work with
Yeah well... My oldest pen was at least "Last changed" 10 years ago ^^ But i cannot see when it was created xD But probably 10 years ago haha
Yeah, codepen already has preprocessors such as pug + scss, and it comes with emmet by default, and you have css reset and autoprefixer and everything 🙂
ahh i see, i'll make sure i go through your projects,, they're actually interesting, and if i decde to create my codepen account I shall also make sure I follow you :3
I would recommend to check the collections, my normal pens is just stuff that i have helped others with 🙂
https://codepen.io/tok124/collections/
CodePen
Tim on CodePen
definitely!