Enabling the Quick Save Button
To begin, you must enable the feature within the Swym Admin customization modal.
Open your Swym Wishlist Plus app.
Navigate to Configurations > Features > Help Shoppers Save Favorites.
Click Settings on the Quick Save card.
In the customization modal, locate the Theme Selection Dropdown at the top.
Select your target theme and click on “Activate Collections” to enable the Wishlist Button on the Product Grids.
Ensure the Enable Quick Save Button checkbox is ticked.
Note: Enabling this will automatically apply changes to your theme to display Wishlist buttons in the product grid. This ensures that the "Wishlist page" functionality works seamlessly across your store, provided the theme is supported.
If the Swym Wishlist Plus widget is not appearing on your Shopify store, it may be due to incomplete app setup. To resolve this:
Open your Shopify admin and navigate to the Wishlist Plus app dashboard.
Click “Let’s Get Your Wishlist setup.”
Follow the guided steps to complete the configuration.
Once the setup is complete, the widget should appear and function as expected.
Theme Support & Manual Integration
If your theme is not automatically supported, a banner will appear stating: "Advanced Collections requires theme-level activation." Additionally, if your collection pages are managed by third-party apps like Boost (Product Filter & Search/Collection), the Swym Wishlist button may not appear automatically. This is because Boost controls the collection grid markup, preventing Swym’s default buttons from being injected. In such cases, manual integration is required.
If you see this banner, follow these steps to manually connect Swym to your product grid: Another common issue is placing the wishlist button code in the wrong theme template. Ensure the code is inserted into the correct collection template for your theme.
Product Tile Selector: Provide the CSS selector for the individual product card/tile (e.g., .product-card or .grid-item).
Product URL Selector: Provide the CSS selector for the link (a-tag) within that tile that points to the product page. This allows Swym to identify which product is being saved.
Self-Help: Refer to our Guide on Finding CSS Selectors (Help Doc Link) to identify these elements.
Support: If you are unable to find these selectors, please contact our support team for assistance with the integration. Note: Swym cannot directly modify Boost-controlled collection grids, even with store collaboration access. Integration must be done manually or by the Boost team. For third-party-rendered collection pages, Swym provides HTML/JavaScript snippets that allow you to embed wishlist functionality. Alternatively, you can contact the Boost team to implement the integration using their app-specific hooks or templates.
Basic Customizations
For quick visual adjustments, use the built-in settings in the modal:
Icon Type: Choose from various heart or star icons.
Icon Color & Thickness: Adjust the stroke and fill to match your brand.
Button Position: Set where the button sits relative to the product tile (e.g., Top Right, Bottom Left).
Important Note: If you perform Advanced HTML customizations (see Section 4), some of these basic settings may no longer take effect as your custom code will take priority.
Advanced HTML & CSS Customizations
For full creative control, you can edit the HTML and CSS directly. This is useful for adding custom animations or unique icon structures. After making changes, test them in a draft theme before publishing to ensure everything works as expected.
State Management
You can provide unique HTML for:
HTML (Before Click): The default state.
HTML (After Click): The state shown once the item is in the user's wishlist.
Required Variables & ADA Compliance
When editing the HTML, you must preserve these variables to maintain functionality and accessibility:
{{SOCIAL_COUNT}}: Displays the total number of times the product has been favorited.aria-label="{{ADD_TO_WISHLIST}}": Required to maintain ADA compliance and screen reader accessibility.{{ICON_COLOR}} & {{ICON_WIDTH}}: These pull from the basic settings. You may remove these if you prefer to hardcode styles via your Advanced CSS tab.
Saving and Disabling
To Apply Changes: Click Save in the Swym Admin modal and refresh your storefront.
To Disable: If you wish to remove the buttons from your collection pages, simply untick the Enable Quick Save Button checkbox in the customization modal and click Save.
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.