Configurate the new mobile layer of Doofinder

Two weeks ago we told you about all the new features available in the new mobile version for the Doofinder search on your ecommerce and as we promised, today we are going to show you the different configuration options which you have available to make it match your brand’s style.

Let’s get started!

First of all, as we explained in the previous post,  you must consider that, since it is integrated in your website’s HTML structure, the new mobile layer is completely configurable using CSS rules, therefore we explain some examples on what to do with it.

Some of the configuración options are: 

  • Modifying the color of the titles. You can decide the title color of the products displayed in your search. For example, if the predominant colors in your site are white, blue and gray, you can establish for the product titles to be displayed in blue. For this you only have to modify the following CSS rule:
.df-mobile .df-card__title {
  color: #0066ad;
  •  Modify the margin size. Another option of configuration is being able to choose the size of the margins between elements, for example, the prices. Therefore, you could decide that the space to the left of the price should be 20px:
.df-mobile  .df-card__price {
  margin-left:  20px;
  •  Including a logo and/or a background image. One of the latest features available is being able to include your company logo at the top of the layer (above the search box) and a background image. This way, the user will never feel like he is leaving your site. To introduce them you only have to introduce the selected image URL in the option templateVars situated within the display attribute. Like this:
  mobile: {
    display: {
      templateVars: {
        images: {
          header: '',
          body:  ''

If you want more information on how to personalize the new mobile layer you can check out the document that explains it here.

If you have any question or need help configuring it, you can contact us by email at