CSS Selector

What Do We Use A CSS Selector For?

We use a CSS selector to target or style specific HTML elements or groups of elements on a webpage.

With Doofinder, CSS selector will help you trigger the Layer or style your Layer.

How To Choose A CSS Selector

1. Click anywhere on your page with the right button and click "Inspect".
   
2. Select the box on the toolbar and inspect the page to find where you would like to trigger an element.
   
3. Once you know where to place it, search for the selector in the HTML code. The element you pick will be colored on the page. Unfold the element to find the selector and choose ID, class, or name . Copy the selector and paste it in the Admin.
   

   Remember to precede your selector with its correct written form: # for ID, e.g., #custom-search ; . (period) for class, e.g., .search-field; and, input[name=”name value”] for name, e.g., input[name=”s”].
   

   If you can’t identify the ID, class, or name you can right-click on the code and select copy > copy selector. Be aware that this copies the entire path, and is not recommended in case you change any part of the HTML in the future.

   
4. If you have difficulties determining the appropriate selector, contact our Support Team.

CSS Selector For Layer

To choose a CSS selector for your Layer click and Inspect your search box as there is where you want to trigger it. Once you have the selector, go to your Admin > Store Settings > Configuration > Enter the search input CSS selector > enter your selector, and Save.

For your Layer to display correctly on Mobile, make sure you have the correct selectors in Enter the search input CSS selector for this specific device. Inspect your search box on Toggle Device Toolbar and choose the selector indicated. If the selector is different, use a comma (,) to separate your selectors in the Admin.

In the case of the Embedded Layer, follow the same steps and add an insertion point with a CSS selector to indicate in which part of your website you want to place the Layer once it is triggered. Select the element or elements in your page that can hold embedded search results; take into account height and width to appropriately function and display a search result page.

Once you have your CSS selector to place it as an insertion point, go to Layers > select the chosen Layer > General Settings > Embedded Results > Insertion point > Enter your CSS selector for insertion point, and Save.

CSS selector for Recommendations Carousel

Recommendations Carousel can be inserted in your webpage with Doofinder. In this case, the CSS selector will help you to add it to your desired place in your store by using relative positioning.

What is relative positioning?

Relative positioning is the property we assign to an element in a website by placing or moving the element from its normal position.

Elements are displayed in a position on the website. When we apply a relative position we can adjust its position according to another element, whether it is top, right, bottom, left or replacement from this other element.

How to place the Recommendations Carousel

1. Click anywhere on your webpage with the right button and click inspect.
2. Select the box on the toolbar and inspect the page to find where you would like to place the Recommendations Carousel. Choose an element that works for you to find a relative position according to it.

If you can’t find the exact element, you can always try an alternative one.


3. Once you know where to place it, search for the selector in the HTML code. The element you pick will be colored on the page. Unfold the element to find the selector and chooseID, class, or name. If it corresponds to the size and place you would like for the Recommendations Carousel, copy the selector and paste it into: Admin Panel > Recommendations > Edit an existing carousel or Add a Carousel > "Specify the Carousel Placement Using the CSS Selector", then Save.

Note that you can choose multiple CSS selectors. If the first one you use doesn't work, Doofinder Recommendations will automatically use the next one.

For example, if you enter: .page,body>footer in the CSS Selector field and .page doesn't exist, the selector body>footer will be used instead. However, if the first selector you choose, such as .page does exist, Doofinder Recommendations will use that one, as it always uses the first available selector.

4. Now pick the relative position of the Recommendations Carousel according to the element selected and the relative position decided. It can Replace the element; it can be positioned As first or As last within the element; or Before or After the element.

5. Try the desired position until obtaining the desired result.
6. Contact our Support team if you have difficulties determining the appropriate selector or relative position.