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.

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

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.

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

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

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":

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

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.

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:

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