To do this, the Swym app needs to know exactly where to place the button. You will need to provide two pieces of information in your Theme Integration settings:
Button Container Selector: The invisible "box" that holds a single product card.
Product URL Selector: The link that points to that product's details.
Before you try to find these codes yourself, check if your Shopify theme is listed below. If you're not using a third-party app to render your collections pages on these themes, you can simply copy and paste the code directly into your settings.
Theme Name | Button Container Selector | Product URL Selector |
Dawn / Spotlight |
|
|
Refresh |
|
|
Atelier |
|
|
(If your theme is listed above, copy the text exactly and skip to "Step 5: Where to Paste". If not, follow the steps below.)
How to Find Selectors Manually
If your theme isn't listed above, don't worry. You can find these identifiers using the "Inspect" tool in your web browser (Chrome, Safari, or Firefox).
Step 1: Open the Inspector
Go to one of your Collection pages on your live website.
Right-click on any product image or title.
Select Inspect (or Inspect Element) from the menu.
Right-click a product and choose "Inspect".
Step 2: Find the "Button Container Selector" (The Box)
This is the most important step. We need to find the code that represents the entire box for a single product.
A panel with colorful code will open on your screen.
Move your mouse up and down the lines of code. As you hover over a line, parts of your website will turn blue.
Look for the line of code that makes the entire single product card turn blue. It should highlight the image, the title, and the price all at once.
This line usually starts with
<div class="..."or<li class="...".
Find the line that highlights the whole product card.
Step 3: Find the "Product URL Selector" (The Link)
Now we need to find the link inside that box.
Click the small arrow ▶ next to the line you found in Step 2 to expand it.
Look inside for a line that starts with
<a href="...">. This is the link tag.When you hover over it, only the product image or title should turn blue.
Look for the <a> tag inside your container.
Step 4: Translate Code to Settings
Computers are picky! You cannot copy the raw code. You must format it correctly for the Swym settings.
If the code says... | You must type this... | Why? |
class="product-card" |
| Classes always need a dot (.) at the start. |
id="product-1" |
| IDs always need a hash (#) at the start. |
<a> |
| HTML elements (like |
Remember to add a DOT (.) before class names!
Step 5: Where to Paste
Open your Wishlist Plus Admin Dashboard.
Navigate to Configurations → Help Shoppers Save Favorites → Quick Actions
Paste your formatted selectors into the matching boxes
.Paste your codes here and click Save.
Troubleshooting
The button isn't showing up? Check if you forgot the dot [
.] before the class name.The button is floating in a weird spot? You might have selected a container that is too "generic" (like just
.div). Try to find a class name that sounds specific, like.product-itemor.card-wrapper.Still stuck? Email our support team at [email protected] with the name of your theme, and we will help you find the right codes.