This guide provides a streamlined way to enable and customize the Wishlist Plus button on your Collections (Product Listing) page directly from the Shopify Theme Editor. You no longer need support to manage these settings.
Why Enable Wishlist Plus on the Collections Page?
Adding the Wishlist Plus button to your Collections page offers several benefits:
Enhanced User Engagement: Makes it easy for customers to bookmark items directly from the Collections page, especially on mobile devices.
Customizable Visuals: Allows you to seamlessly match the button’s look and feel with your brand.
Improved Shopping Experience: Helps customers save their favorite items as they browse, which can drive return visits and improve conversion rates.
Quick Setup: Configure Wishlist on Collections
Navigate to your Shopify Admin.
Go to Online Store.
To edit the Wishlist button on your collections or product listing page, click Customize.
On the customizer page, click on App embeds.
On the App embed page, click the arrow next to Collections Advanced Embed to see the customization options.
From this section, you can find a variety of button customization options:
Icon Style: Choose to change the icon to a heart, bookmark, or star, and adjust its thickness.
Button Position: Use the dropdown menu to adjust the button’s position. You can also use Vertical Offset (for up/down movement) and Horizontal Offset (for left/right movement) for more precise placement.
Button Size: Use the slider to change the button's size.
Icon Color: Edit the icon's color directly.
Custom Button: Upload a custom button to replace the default one, setting a unique image for both the 'before' and 'after' adding to wishlist states.
Customizing the Variant Selector
If you have the variant selector for collections enabled, you can customize its styling options directly from the app embed:
Pop-up title colour: This can be edited here.
Primary font size: Adjustable with a slider to control the overall text size.
Pop-up background colour: This can be customized directly from this section.
Variant selector headings: You can edit these as well.
Secondary font selection: You have the option to choose and adjust a secondary font using a slider.
You can also adjust the background color for the wishlist button and edit the font colors for both the button and the product details. Additionally, you can edit the placeholder text, such as "Enter the wishlist name" or "Create new wishlist."
Finally, click Save to apply your changes to the theme.