Enabling the Advanced Header Icon
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 any card.
In the customization modal, click Launch Point Tab and locate the Theme Selection Dropdown at the top.
Select your target theme and click Save
Note: Enabling this will automatically apply changes to your theme to display an advanced header icon. 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: "We couldn't auto-detect your menu layout. Please enter the CSS selector below to tell us where to place the icon"
Supported Themes
For supported themes, Swym maintains a presets database that automatically provides:
CSS Selectors (Desktop & Mobile) — where to inject the icon in your header
Icon HTML — a heart icon template styled to match your theme
Count Bubble HTML — a wishlist count badge template
CSS — styling that blends with your theme's header
When you select a supported theme, these values are pre-filled automatically. You can still modify any of them.
Unsupported Themes
If your theme is not in our presets database, a banner will appear stating: "We couldn't auto-detect your menu layout. Please enter the CSS selector below to tell us where to place the icon."
In this case, you'll need to manually provide:
CSS Selector — Desktop & Tablet: This is the specific element in the store's header/navigation bar where the Wishlist icon will be injected on desktop and tablet viewports. Swym uses this selector to attach the header icon (heart icon with count bubble) in the correct position alongside other navigation elements like cart and account icons.
CSS Selector — Mobile (Optional): This is the specific element in the store's mobile header/navigation where the Wishlist icon will be injected on smaller screens. Most themes use the same header element for both desktop and mobile — if that's the case, you can use the same selector for both fields. Only provide a separate mobile selector if your theme uses a different header structure on mobile.
Advanced HTML & CSS (Optional): You can also provide custom icon HTML, count bubble HTML, and CSS (see Section 4). If left empty, Swym's default heart icon and count bubble will be used
Advanced HTML & CSS Customizations
For full creative control over the header icon, expand the Advanced Code Editor section. It provides three tabs:
Tab 1: HTML (Button)
The HTML template for the Wishlist header icon. This controls the icon's structure, shape, and inline styles.
Use this to replace the default heart icon with a custom SVG, image, or any HTML element.
The icon will be inserted into the header at the position defined by your CSS selector.
For supported themes, this is pre-filled with a theme-matched icon template.
Tab 2: HTML (Count Bubble)
The HTML template for the wishlist item count badge that appears on or near the icon.
Required variable:
{{WISHLIST_COUNT}}— This placeholder is dynamically replaced with the actual wishlist count at runtime. Your template must include this variable.Customize the badge's shape, position, color, and animation.
Tab 3: CSS
Additional CSS styles are applied specifically to the header icon and count bubble. Use this to fine-tune sizing, spacing, alignment, or hover effects without modifying your theme's stylesheet.
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.