I've enabled the wishlist button on my product page, but I'm unable to see it on the storefront. Why?
If the rest of the Wishlist functionality is working as expected (shoppers are able to view their wishlists, icons are visible on listing page product cards, etc.), but the product page button isn't visible, it's possible that our scripts are unable to locate the right selector. This issue most commonly occurs when the Wishlist button is placed on the product image. To fix this, you can try a different placement option, or add a custom button through code as given in this article.
I'm unable to remove products from the Wishlist when I click on the Wishlist button for the second time.
Please reach out to us at [email protected] to ensure the remove functionality is enabled for custom buttons. If you're already on our Messenger, simply say "talk to an agent," and Fin will connect you with a member of our team who can provide further assistance.
The wishlist button isn't appearing on my Collection pages. How do I fix this?
If the Wishlist button isn't appearing on Collection pages, Product Recommendation sections, dynamically loaded content (like infinite scroll or after filters/sorts), or after switching themes, use the solutions below.
Scenario 1: Using the Collections Advanced App Embed
If you are using the app embed feature and the button is missing:
1. Check Your Selectors
The most common issue is incorrect or missing selectors.
Ensure correct selectors are added: Go to the Manual Setup section in the Collections Advanced app embed dashboard.
If your product cards have different HTML classes across your store (e.g., listing pages vs. recommendation sections), you must include all of them. The manual setup box supports a comma-separated list of selectors.
For detailed information on finding the correct selectors, refer to this article.
2. Button Initialization Timing
If the button appears on some product cards but not others, or if it disappears after dynamic actions (like filtering), the button initialization might be happening too early.
You need to manually trigger our initialization function when the dynamic section finishes loading. This requires adding a custom event listener, as detailed in the Initialize Wishlist Buttons section below.
Scenario 2: Wishlist Button Added Manually (Via Code)
If you've added the button using code similar to the example below, follow these steps:
<button
aria-label="Add to Wishlist"
data-with-epi="true"
class="swym-button swym-add-to-wishlist-view-product product_{{ product.id }}"
data-swaction="addToWishlist"
data-product-id="{{ product.id | json }}"
data-variant-id="{{ product.variants[0].id }}"
data-product-url="{{ shop.url }}{{ product.url }}"
>
</button>
1. Verify Product Data
The button won't function if key product information isn't passed correctly.
Check Attribute Values: Inspect the button element on the live storefront. Ensure that the Liquid variables (e.g.,
{{ product.id }},{{ product.variants[0].id }}, and{{ product.url }}) are correctly rendering the Product ID, Variant ID, and Product URL. If these attributes appear blank or incorrect, adjust the Liquid variables in your code.Verify Classes: Ensure the button includes the exact classes:
swym-button swym-add-to-wishlist-view-productand the product-specific class, such asproduct_{{ product.id }}. You can add additional classes, but the core classes must be present.
2. Button Initialization Timing
If the button disappears after dynamic actions (like infinite scroll), the button initialization is likely being skipped.
You'll need to manually trigger our initialization function when the dynamic section finishes loading. See the next section for implementation steps.
Initialize Wishlist Buttons (For Dynamic Content)
If the button is missing on dynamically loaded content (e.g., after sorting, filtering, or infinite scroll), you must tell Swym when the new content is loaded.
Step 1: Dispatch a Custom Event
In the JavaScript file that handles the rendering of your dynamic sections (like your theme's custom JS for filters/sorts), add the following line of code to dispatch a custom event after the new product tiles have been fully loaded:
document.dispatchEvent(new CustomEvent("swym:collections-loaded"));
Tip:
Open your browser’s Developer Console and go to the Network tab. Then:
Filter the requests by Fetch/XHR.
Reload or interact with the page to trigger the loading of product cards.
Watch which requests appear. For example:
?page=2→ usually for infinite scroll or paginationproduct-recommendation→ usually for related product sections
Click on the request to see which function or script initiated it.
If the theme already provides an event (like a custom dispatch), you can hook into that instead of writing a new one.
Step 2: Create the Listener Snippet
Create a new snippet file in your theme named swym-custom.liquid and add the following script. This script listens for the custom event dispatched in Step 1 and calls the appropriate initialization API.
<script defer>
function swymCallbackFn(swat) {
// Your API calls go here
document.addEventListener("swym:collections-loaded", function() {
// UNCOMMENT the line below that matches your setup:
// Use this method for advanced collection page embeds
// swat.collectionsApi.initializeCollections(swat, false, window.Shopify.theme.theme_store_id);
// Use this method for initializing buttons on any given selector
// swat.initializeActionButtons("body");
// Use this method for PDP button blocks (LESS COMMON)
// window.WishlistPlusPDPButtonAPI.initializePDPButton(swat);
});
}
if (!window.SwymCallbacks) {
window.SwymCallbacks = [];
}
window.SwymCallbacks.push(swymCallbackFn);
</script>
Step 3: Include the Snippet in theme.liquid
Add the following include tag to your theme.liquid file to ensure the script runs on every page load:
{% include 'swym-custom' %}
Restoring the Button After Switching Themes
If you've switched to a new theme and the Wishlist button is missing or misplaced:
Locate the Code: In your previous theme's files (e.g.,
product.liquid,product-card.liquid), find the manually added Wishlist button code (Scenario 2).Copy and Paste: Paste this code into the equivalent template files of your new theme. The best practice is to place it near the 'Add to Cart' button.
Check for App Embed: If you can't find any code in the old theme, you were likely using the Collections Advanced app embed. Follow this article to re-enable and configure it in your new theme.
I'd like to show the wishlist icon on the product page only as an icon, without any text. Is that possible?
Yes, you can easily configure this in two ways:
Option 1: Using the App Settings
From your Shopify Admin, navigate to Apps, and then select Wishlist Plus.
Go to the Configurations and click on “Features - Help Shoppers Save Favorites” section.
Navigate to the Features page.
Select Wishlist Button, and then click Settings.
Under the Product Page/Wishlist button section, choose the button type as "only icon."
Click Save to apply your changes.
Option 2: Using the Theme Customizer
From your Shopify admin, go to Online Store, then Themes.
Find your preferred theme and click Customize.
Navigate to a product page within the customizer.
Click on the wishlist button itself.
In the customization options, untoggle the "Display text" button.
Click Save to apply your changes.
I've added the wishlist icon, but I'm still unable to see it as expected. What could be wrong?
If you've followed the steps and the wishlist still isn't visible, please check the following:
App Embed Disabled: The Wishlist app embed may not be enabled on your Shopify theme.
Browser Cache: Your browser may be showing an older, saved version of your site.
Icon Color: The icon's color might be too similar to your site's background, making it invisible.
Cookie Consent: Necessary cookies may not have been accepted, which prevents the app's scripts from loading.
App Quota Reached: You may have exceeded the monthly usage limits for your plan.
How to check these issues:
To Check the App Embed:
From your Shopify Admin, navigate to Online Stores.
Choose your preferred theme and click Customize.
In the theme editor, click App embeds.
Select the App Control Centre and enable its toggle switch.
Click Save.
To Clear the Browser Cache:
Perform a "hard refresh" in your browser (
Ctrl+Shift+Ron Windows/Linux orCmd+Shift+Ron Mac).Alternatively, view your store in an Incognito window.
To Check the Wishlist Color:
From your Shopify Admin, navigate to Apps, and then select Wishlist Plus.
Go to the Configurations and click on “Features - Help Shoppers Save Favorites” section.
Navigate to the Features page. then select Wishlist Button and click Settings.
Under the Basics section, check and update the color.
Click Save.
To Check regarding the Cookie Consent:
Our app requires cookie consent to function. If you have a cookie banner, please accept all cookies on your storefront.
If you use a third-party cookie app, you may need to add our app's cookies to its list of allowed scripts.
To Check the App Quota:
Navigate to the Apps section in your admin panel.
Open the Wishlist app.
Look for messages or banners indicating you've reached your usage limits.
Need further assistance? You can always reach out to us at [email protected]. If you're already on our Messenger, simply say "talk to an agent," and Fin will connect you with a member of our team who can provide further assistance.