How to adapt the appearance of Doofinder to the look&feel of your page

In Doofinder , we know how important it is for your ecommerce to maintain the same aesthetic in all the elements that are part of it, so today we bring you the keys to adapt the appearance of Doofinder’s layer so this fits the image of your site. Do you want to know how you can get it? Read on and you can adjust the appearance of the search to your brand image within minutes.

Adapt the appearance of Doofinder’s Layer

The Doofinder results layer is integrated into your website. This means that it is part of the structure of your HTML code , which allows you to modify any element of the layer using CSS rules.

To make the customisation easier, you can use browser development tools to inspect the HTML structure of your website . This will help you find the specific element you want to modify.

All the Doofinder layers share almost the same design, but with some differences. Basically the difference are specified in the CSS styles used.

You can identify all these classes as components:

  • df-topbar: only for FullScreen layer, it contains the search box and the logo of our site.
  • df-aside: secondary column that contains the facets, if they are configured.
  • df-panel: collapsable panels inside the column that contains the values of the facets.
  • df-main: all content of the layer.
  • df-header: the layer header. It includes elements such as the total number of results and the icons to change the display between the grid or list view.
  • df-results: results container.
  • df-card: every search results has this class.

Furthermore, both the Classic and FullScreen have other classes that allow more specific customisation.

Examples of customisation

Changing the colour of the title in the results:

.df-card__title {

color : #FFBBCC ;


Changing the left margin of the price for all the results in the Gridview:

.df-layer–grid .df-card__price {

margin-left : 20px ;


Changing the colour of the background facet panel in Fullscreen

.df-fullscreen .df-aside {

background : #EEEEEE ;


Also, you have to keep in mind that …

Depending on where you place these CSS rules, you may need to be more specific with the CSS rule to make sure the new rule applies instead of the default. You can use the layer’s CSS iD or a parent tag prefix selector or keyword! Important at the end of each rule to force .

If you have any questions or you need help modify your web browser layer contact us

via phone +34 913185099 or via email