Can someone help me place the wishlist icon on the top right corner of the product card on pc and mobile ? RIght now its on the right bottom covering some of the product title text which is not what I want… Can someone please help ? Thank you!
Page is : https://loulouis.no
password: saebot
Add this code
...
.wishlist-container {
position: absolute;
top: 0;
right: 0;
}
Where do I pust the div code ?
Yes, this is absolutely possible on both desktop and mobile.
If you’re building it yourself, the wishlist icon is typically added as an absolutely positioned button inside the product card container. For Online Store 2.0 themes, you’ll usually:
Add a wishlist button to the product card snippet (such as card-product.liquid or the equivalent snippet in your theme).
Position it using CSS (for example, position: absolute; top: 12px; right: 12px;) while ensuring the product card has position: relative.
Use JavaScript to handle adding/removing products from the wishlist and updating the icon state.
Make sure the button remains accessible on touch devices by providing an appropriate tap target and testing across different screen sizes.
The exact file names can vary depending on the theme (Dawn, Prestige, Impulse, etc.), but the overall implementation is the same.
If you prefer not to maintain custom theme code, another option is to use a wishlist app that supports Shopify Theme App Extensions. This lets you add wishlist buttons without directly modifying your theme, making future theme updates and app removal much easier.
Disclosure: I’m one of the developers behind WishSwift. We built it to support wishlist buttons on product cards, product pages, and other storefront locations using Shopify’s Theme App Extension architecture. If you’d like to see how it’s implemented, you can find it here:
If you’re planning to build the feature yourself, let us know which theme you’re using. Many themes have slightly different product card structures, and the implementation details can vary accordingly.
Hey @Loulouis .
The icon’s position is set with CSS. Right now, something is anchoring it to the bottom of the card instead of the top. That is usually a leftover style from the app’s default CSS or a theme customization that was not fully removed.
Check your wishlist app’s settings first. Some apps like Wishlist Hero, Swym, etc. let you pick the icon position, top left, top right, bottom right. Right from their settings panel, no CSS needed.
If your app does not offer that option, it likely means the position is hardcoded into the theme and would need a small CSS tweak to move it. That part would need code.
Hi there!
Totally agree with what’s been said above - this almost always comes down to CSS positioning, either from the app or leftover theme code. A few quick things to check :
position, top, bottom, right CSS values.If your current app doesn’t support custom positioning, it might be worth looking at Wishlist Monk. It lets you place the wishlist icon anywhere on the product card (including the top-right corner) through simple settings without any additional coding, and it works consistently across all devices. It also comes with features like a dedicated wishlist page, guest logins and wishlist sharing so it could be a good fit if you’re already troubleshooting positioning issues with your current setup. Worth a look if you’d like to avoid the coding route! Hope this helps 
Hey @Loulouis
hope you’re doing great!
If your Wishlist app supports custom positioning, you can usually move it with a bit of CSS. Otherwise, inspect the Wishlist button’s class and set it to position: absolute with top: 10px; right: 10px;. If the app injects the button, you may need to contact the app support for the correct selector.