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.
Theme Support & Manual Integration
If your theme is not automatically supported, a banner will appear stating: "Advanced Collections requires theme-level activation."
If you see this banner, follow these steps to manually connect Swym to your product grid:
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.
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.
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.