Our "Add to Wishlist" button offers extensive customization options, giving you full control over its look and functionality:
Placement: Choose from various positions, such as near the product image, title, or "Add to Cart" button.
Design: Tailor the button's color, font, and border to align with your store's theme. You can even use a custom icon.
Hover Effects: Create dynamic interactions by enabling and customizing hover-specific colors, fonts, and borders.
Advanced Customization: For granular control, apply custom CSS to fine-tune the button's design.
For basic text and color changes, you can often find these options directly in the app dashboard under Manage Setup. For more advanced customizations, you'll use the Shopify Theme Editor as outlined below.
Quick Setup: Configure Wishlist on Product Page
Go to your Shopify Admin and click Apps.
Find and open the Wishlist Plus app.
Choose the Features section from the left panel.
Navigate to this tab, find the wishlist button, and click on its settings to begin editing.
Basic Customization Options in the App
You can easily change the look, text, and placement of the button directly within the app settings.
Button Position: Choose exactly where the wishlist button will be displayed on your product pages (e.g., above or below the "Add to Cart" button).
Button Format:
Icon & Text: Displays both the wishlist icon and text.
Icon Only: Shows only the icon for a minimalist look.
Text Only: Shows only the text without an icon.
Button Visual Style:
Solid: Adds a full background color to the button.
Outline: Gives the button a border without a background.
Plain: Creates a simple link-style button.
Button Text: Customize the text that customers see on the button for both the "before" and "after" states of adding an item to their wishlist.
Optional Features to Configure in the App
Smart Save: Automatically adds a product to a shopper's wishlist if they visit that product's page three or more times.
Social Proof: Displays a public counter on the product page showing how many times an item has been added to a wishlist.
Advanced Customization: Using the Theme Editor
For a custom location or more advanced customizations, click Go to Theme Editor from the app settings.
Adding the Wishlist Button Block
In the theme editor, you can add the wishlist button by clicking the plus (
+) sign.To add the button near your "Add to Cart" button, click + Add block inside your main product template.
To add it as a new, separate section, click + Add section from the left sidebar.
Choose the Add to Wishlist Button Block from the Apps section.
Customizing the Button Block
Once you have added the button block, click on it to customize its appearance and behavior.
Button Elements:
Icon Style: Change the icon to a bookmark, star, or heart, or select None.
Icon Thickness: Adjust the icon's thickness using a slider.
Text Toggle: Choose whether the button displays text.
Custom Icon: Upload a custom icon to replace the default.
Button Placement and Layout:
Placement: Position the button on the image's four corners, beside a product tile, or next to the "Add to Cart" button.
Vertical Offset: Use a slider to fine-tune the vertical position.
Full Width Button: Enable this to make the button span the full width.
Alignment: Align the button to the left, center, or right.
Button Style (Standard and On Hover):
Colors: Change the button's background and font color for both the default and "added to wishlist" states.
Border: Adjust the border color, thickness, and radius (for rounded corners).
On Hover: Enable a toggle to set separate color and border styles that appear when a user hovers over the button.
Custom CSS: If you are an advanced user, you can add your own custom CSS code in the custom CSS field to apply unique styles.
Once you are finished, be sure to save your changes.
Frequently Asked Questions (FAQs)
1. How do I add the Wishlist button directly onto the product image? Go to Button Placement settings and select one of the "On the Product Image" options (Top-left, Top-right, Bottom-left, or Bottom-right).
2. Can I use my own custom icons for the Wishlist button? Yes! Under Button Elements, select Upload Custom Icon to use your design.
3. How can I position the Wishlist button next to the "Add to Cart" button? In Button Placement, choose either "Left of Add to Cart" or "Right of Add to Cart."
4. Is it possible to change the Wishlist button's hover effect? Absolutely! First, enable the Hover Effect under Button Hover Style, then customize the colors, font, and border settings for the hover state.
5. How do I apply custom CSS to the Wishlist button? Under Advanced Customization, you can enter your CSS code to modify the button's design as needed.
6. My changes aren't showing up on my store. What should I do? Please try the following:
Ensure you clicked Save after making your adjustments in the Theme Editor.
Clear your browser cache and then refresh the page.
Check if your theme has any conflicting CSS that might be overriding your settings.