> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.froonze.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Custom Placement: CSS Selectors

**Custom Placement** refers to the possibility of using a page element to specify the position of the new widget, that would be appended under the former. This element should be easy to identify thanks to the tools that most browsers provide, otherwise it would also be possible to edit the theme code to create the element directly.

## How to find a CSS Selector

To find the **CSS Selector** of the element under which you want to install the widget follow these steps:

1. In your browser, right-click on the element and select **Inspect** or **Inspect Element**

![](https://storage.crisp.chat/users/upload-1/website/-/8/7/3/1/873182aab5747000/4yad823i0g_14rfyp1.png =1000xauto)

2. With the element highlighted in the adjacent **Inspect** or **Developer Tools** panel, you may want to check the objects above or below it to make sure you find the right element you want to append the widget to. You want to choose an element that is present on all product pages, it could be, for example, a block containing other sub-elements and occupying a whole row. When you hover elements in the **Inspect** panel they'll be highlighted on the page as well so you can spot them clearly.

![](https://storage.crisp.chat/users/upload-1/website/-/8/7/3/1/873182aab5747000/4ejs0rwjzi_9g7k1l.png =1000xauto)

Once you have it, right-click on it in the **Inspect** panel to copy its CSS Selector following these instructions:

*   In **Chrome** and **Edge**: **Copy > Copy selector**
*   In **Firefox**: **Copy > CSS Selector**
*   In **Safari**: **Copy > Selector Path**

![](https://storage.crisp.chat/users/upload-1/website/-/8/7/3/1/873182aab5747000/du-pk8ziug_xcow7r.png =1000xauto)

3. Paste this path in the **Custom Placement** box in the **Editor** and preview the results to make sure the new widget is installed where you want. Then click on **Save** to keep the changes

![](https://storage.crisp.chat/users/upload-1/website/-/8/7/3/1/873182aab5747000/jhkvebyeol_hb87uk.png =1000xauto)

## How to create a placeholder and use it as selector

If you're an advanced user and prefer to create an element to append the widget to rather than using an existing one, you can always use **Shopify's Theme Editor** to add a custom element (a placeholder) in the position of your choice, then using the unique identification of it, usually a **class**, to place the widget.

For example we can be using this placeholder with a unique custom class "**wishlistbutton\_placeholder**":

```html
<div class="wishlistbutton_placeholder"></div>
```

Now we go to our **Shopify Admin > Online Store > Themes > (Find your theme) > Actions > Edit Code**

![](https://storage.crisp.chat/users/upload-1/website/-/8/7/3/1/873182aab5747000/sbxw19kk93_udjxds.png =1000xauto)

Find the **Template, Section or Snippet** that contains the product card on the product page and paste the **placeholder** wherever you want the widget to show up. In the case below (theme **Craft**) we've found the product content in the section *main-product.liquid*, and pasted the placeholder above the *form* containing the **Add to Cart** button.

![](https://storage.crisp.chat/users/upload-1/website/-/8/7/3/1/873182aab5747000/rfvl5iskid_1tr3end.png =1000xauto)

Now we can go back to the **Customize Editor** to paste this placeholder in the **Custom Placement** box and preview the results. To identify the custom class "**wishlistbutton\_placeholder**" you'll need to add a **dot** at the beginning, so all together:

```
.wishlistbutton_placeholder
```

Don't forget to click on **Save** once you like the result.

![](https://storage.crisp.chat/users/upload-1/website/-/8/7/3/1/873182aab5747000/aqqnvt1zn_tg34vd.png =1000xauto)