Skip to main content

How to Find CSS Selectors for Custom Button Placement

Updated over a week ago

To use the Custom Placement option for your Advanced Wishlist Button, you need to provide a CSS Selector. This tells the Swym app exactly where to "anchor" the button on your product page.

The easiest way to find this is by using the Inspect Element tool in your browser (Chrome, Edge, or Firefox).


Step 1: Open Your Product Page

Navigate to any product page on your live storefront where you want the button to appear.

Step 2: Open the Inspector

  1. Right-click on the specific element you want the button to be near (for example, the "Add to Cart" button or the product price).

  2. Select Inspect from the menu. This will open the Developer Tools window.

Step 3: Copy the CSS Selector

  1. In the Developer Tools window, the code for the element you clicked will be highlighted in blue.

  2. Right-click on that highlighted line of code.

  3. Hover over Copy.

  4. Select Copy selector.

Step 4: Paste into Swym Admin

  1. Return to the Swym Admin App > Wishlist Button Settings.

  2. Select Custom Placement.

  3. Paste the copied string (e.g., #product-form-12345 > div.payment-buttons) into the CSS Selector field.

  4. Click Save.

Did this answer your question?