If the wishlist looks off — wrong color, wrong size, partly hidden — your theme’s CSS is usually fighting the wishlist’s. A few lines of custom CSS in your theme settings will fix it without editing theme files.
Find the conflict
Open your storefront and right-click the wishlist element
Pick Inspect to open the browser developer tools
In the Styles panel, look for crossed-out rules — those are styles your theme is overriding
Common culprits: theme sets display: none on app elements, theme button styles override the wishlist, icon fonts conflict with the SVG icons, or z-index issues hide elements behind other parts of the page.
Where to put fixes
Go to Online Store > Themes > Customize > Theme settings > Custom CSS and paste the snippets you need. The CSS applies across the storefront.
Quick fixes
Force the button to show:
.wishlist-button {
display: inline-flex !important;
z-index: 100 !important;
position: relative !important;
}Reset icon size:
.wishlist-button svg { width: 20px !important; height: 20px !important; }Match the theme’s icon size:
.wishlist-button svg {
width: var(--icon-size, 20px);
height: var(--icon-size, 20px);
}Match theme colors:
.wishlist-button svg { fill: var(--color-foreground, #333); }
.wishlist-button.is-saved svg { fill: var(--color-accent, #ff0000); }Hover effect:
.wishlist-button:hover svg {
fill: #ff4444;
transform: scale(1.1);
}Button alignment:
.wishlist-button { vertical-align: middle; margin: 10px 0; }Collection icon position:
.wishlist-icon {
position: absolute;
top: 10px;
right: 10px;
}
Theme-specific tweaks
Dawn:
.product-form .wishlist-button { margin-top: 1rem; }Debut:
.product-single__meta .wishlist-button { display: block; margin: 10px 0; }Impulse:
.product__block .wishlist-button { padding: 0; }