While Wishlist inherits your theme’s styling automatically, custom CSS gives you pixel-perfect control. Match exact brand colors, adjust spacing, or create unique hover effects—all without editing theme files.
Adding Custom CSS
Go to Wishlist > Storefront
Scroll to the Custom CSS section
Enter your CSS code in the text area
Click Save
Your custom styles will be applied to all Wishlist elements.
Common Styling Examples
Change heart icon color:
.wishlist-button svg { fill: #333333; }
.wishlist-button.is-saved svg { fill: #ff4444; }Increase button size:
.wishlist-button { width: 48px; height: 48px; }
.wishlist-button svg { width: 24px; height: 24px; }Add button background:
.wishlist-button {
background-color: #ffffff;
border-radius: 50%;
padding: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}CSS Class Reference
Button classes:
.wishlist-button- Main container.wishlist-button.is-saved- Saved state.wishlist-button svg- Heart icon
Collection icon classes:
.wishlist-icon- Icon container.wishlist-icon.is-saved- Saved state
Wishlist page classes:
.wishlist-page- Page container.wishlist-product-card- Product card.wishlist-empty- Empty state.wishlist-add-to-cart- Add to cart button
Modal classes:
.wishlist-modal- Modal overlay.wishlist-modal-content- Modal content.wishlist-modal-close- Close button
Theme-Specific Adjustments
Dawn theme:
.product-form .wishlist-button { margin-top: 10px; }Debut theme:
.product-single__meta .wishlist-button { display: inline-block; }If your theme has conflicts, inspect the elements using browser developer tools to identify specific selectors.