Wishlist
The Wishlist feature in the Materia theme allows your customers to save products for later, improving user experience and encouraging return visits. You can customize the wishlist button’s appearance, positioning, and behavior for both desktop and mobile devices.
Enable & Display Options
Enable Wishlist Feature
Turn this option ON to activate the Wishlist system on product cards throughout your store. If disabled, the Wishlist button will not appear.
Show Wishlist Button on Mobile
Toggle whether the Wishlist button should be visible on mobile devices. This gives you control over UI clutter on smaller screens.
Wishlist Button Appearance
These settings allow you to customize how the button looks in both its default and active states.
Wishlist Button Background
Set the default background color of the Wishlist button.
Example: #FFFFFF (white)
Wishlist Button Active Background
Change the background color when a product has been added to the wishlist.
Example: #FF1F30 (a strong red)
Wishlist Button Border
Define the border color of the button for better contrast or subtle outlines.
Example: #F2F2F2
Wishlist Icon Color
Set the color of the heart icon when the product is not added to the wishlist.
Example: #101010
Wishlist Icon Checked Color
Set the icon color when the product is in the wishlist.
Example: #FFFFFF
📐 Wishlist Button Positioning
Fine-tune the vertical placement of the button on both desktop and mobile.
Wishlist Button Vertical Position (Desktop)
Set the distance from the top of the product card.
Example: 55 (adjust as needed for your layout)
Wishlist Button Vertical Position (Mobile)
Set the position for mobile screens. Negative values move it upward.
Example: -110
Wishlist Page – Remove Button Styling
Customize the “Remove” button shown on the wishlist page when users manage their saved products.
Remove Button Background
Background color of the remove icon button.
Example: #F6F6F6
Remove Button Border
Color of the border around the remove icon.
Example: #F4F4F4
Remove Button Icon Color
Color of the trash or close icon used for removing items.
Example: #737373
Wishlist Button Behavior
Action on Adding to Wishlist
Choose how the button behaves once a product has been added:
Remove item from Wishlist when clicked again Tapping the Wishlist button again will remove the item. This creates a simple toggle behavior.
This setting ensures that users can quickly manage their saved products without needing to navigate to the Wishlist page.
Last updated