This guide helps you place the Wishlist icon (Heart) in your website's header, usually next to your Cart or Account icon.
To do this, you need to tell the Swym app exactly where the header controls are located. You will need to fill in two fields in your Launch Point settings:
CSS Selector — Desktop & Tablet: Where the icon appears on big screens.
CSS Selector — Mobile: Where the icon appears on phones.
(Note: Even if your desktop and mobile headers look the same, you must fill in both fields to save your settings.)
Before you inspect your code, check if your Shopify theme is listed here. If it is, simply copy and paste these codes.
Theme Name | CSS Selector — Desktop & Tablet | CSS Selector — Mobile |
Dawn / Spotlight |
|
|
Horizon |
|
|
Atelier |
|
|
(If your theme isn't listed, follow the steps below to find your specific code.)
How to Find Selectors Manually
Step 1: Find the Desktop Container
We need to find the "invisible box" that holds your current header icons (like Search, Login, and Cart).
Open your website on a computer.
Right-click on your Cart Icon (or Account icon) in the header.
Select Inspect.
In the code panel, move your mouse up slightly to find the Container.
Do not select the
<a>tag (that is just the cart link).Look for the line above it (usually a
<div>,<ul>, or<nav>) that makes ALL the header icons turn blue at the same time.
Copy the Class name or ID of that container (e.g.,
header__iconsorheader-actions).
Step 2: Find the Mobile Container
Mobile menus often live in a completely different part of the code, so we need to find them separately.
Resize your browser window: Grab the edge of your browser and drag it to make it very narrow, until your website switches to the "Mobile View" (you will likely see a "Hamburger" menu ☰).
Right-click on the Cart Icon (or Search icon) visible on this mobile view.
Select Inspect.
Just like before, look for the container code that wraps the mobile icons.
Tip: If your theme uses the exact same header for mobile and desktop, this code might be the same as Step 1. That is okay! You still need to find it to be sure.
Step 3: Format and Paste
Remember the rules for formatting your code:
Classes: If the code says
class="header__icons", you type.header__icons(Add a dot).IDs: If the code says
id="site-header", you type `#site-header` (Add a hash).
Where to paste:
Open your Wishlist Plus Admin Dashboard.
Navigate to Configurations → Help Shoppers Save Favorites → Quick Actions → Launch Icon
Paste your codes into the Desktop and Mobile fields.
Click Save.
Troubleshooting
"Mobile CSS selector is required" Error: You must put text in the Mobile box. If your desktop and mobile headers are identical, just paste the Desktop code into the Mobile box too.
Icon looks messy? If the heart icon sits on top of your cart icon, you probably selected the Cart itself instead of the Parent Container. Try finding the line of code one step higher in the hierarchy.
Still stuck? Email our support team at [email protected] with the name of your theme, and we will help you find the right selectors.