Product page
Style Settings—Wishlist Button Customization
In the Style Settings section, you can control how your Wishlist button will look on the Product Page and Collection Page.
This includes icon style, custom icon upload, button spacing, button colors, and button text before and after adding items to the wishlist.
This allows you to design the button according to your brand theme and make it visually consistent with your store.
Choose Icon Type
Select the icon style you want to use for the Wishlist button. You can choose from the available shapes (heart, heart outline, star, cart, etc.).
If you want to use your own icon, you can upload a custom icon file from the Upload icon here section.
Adjust Button Style
You can modify:
Border Width
Border Radius
Padding (Top, Bottom, Left, Right)
These settings allow you to control the shape and space inside the button. Use these settings to match your brand design style (round, sharp, flat, compact, etc.).
Button Position
Use the “Button Position” dropdown to decide where the Wishlist button should appear.
Choose based on your store layout and preference.
Show Wishlist Counter
Enable this checkbox if you want to display how many times a product has been added to the wishlist. This builds social proof for popular products.
Button Text and Colors (Before / After Wishlist)
You can set different styles for the button before the customer adds the item to the wishlist and after the item is added.
Button before Set:
Button Text (ex: “Add to wishlist”)
Button Color
Button Background Color
Border Color
Button after:
Button Text (ex: “Added to wishlist”)
Button Color
Button Background Color
Border Color
This helps you clearly indicate status changes to the customer.
Preview Area:
On the right side, live previews show how the button will look:
Before adding to wishlist
After adding to wishlist
You can visually check all design changes instantly before saving.
Last updated