When wishlist elements look wrong—wrong colors, wrong size, hidden behind other elements—your theme’s CSS is usually overriding the defaults. Custom CSS can fix most styling issues without changing your theme files.
Theme CSS Conflicts
To identify conflicts: open browser developer tools (F12), right-click the wishlist element and select Inspect, look at the Styles panel for crossed-out styles.
Common conflicts: theme sets display: none on app elements, theme button styles override ours, icon fonts conflict with SVG icons, z-index issues hide elements.
Quick fixes - add to Wishlist > Storefront > Custom CSS:
.wishlist-button { display: inline-flex !important; z-index: 100 !important; position: relative !important; }Icon Sizing
Reset icon size:
.wishlist-button svg { width: 20px !important; height: 20px !important; }Match theme icons:
.wishlist-button svg { width: var(--icon-size, 20px); height: var(--icon-size, 20px); }Color Mismatches
Match theme colors:
.wishlist-button svg { fill: var(--color-foreground, #333); }
.wishlist-button.is-saved svg { fill: var(--color-accent, #ff0000); }Hover states:
.wishlist-button:hover svg { fill: #hover-color; transform: scale(1.1); }Common Fixes
Button alignment:
.wishlist-button { vertical-align: middle; margin: 10px 0; }Collection icon position:
.wishlist-icon { position: absolute; top: 10px; right: 10px; }Theme-Specific Solutions
Dawn theme:
.product-form .wishlist-button { margin-top: 1rem; }Debut theme:
.product-single__meta .wishlist-button { display: block; margin: 10px 0; }Impulse theme:
.product__block .wishlist-button { padding: 0; }