CSS

The following examples show how to use CSS to modify some visual elements of Finder. These styles allow you to adapt the appearance of the search engine to your store’s design by changing aspects such as logos, product styles, or interface text.

Adding a Logo #

It is possible to add a custom logo to the Finder header using CSS. You can apply a background image to the corresponding container.

.sbHeaderBackgroundLogo {
    background-image: url(image_url);
    background-repeat: no-repeat;
}
@media (max-width:950px) {
    .sbHeaderBackgroundLogo {
        display: block;
        height: 80px; // Should match the image height
        grid-column: 1/span 12;
    }
}


Replace image_url with the URL of the logo you want to display. You can also adjust the height to fit the image size.

Adding Shadow to Product Cards #

It is also possible to modify the appearance of products displayed in Finder results. For example, you can add a border or shadow to each product card.

.sbProductCard {
    box-shadow: 0 0 0 2px inset #aaa;
    border-radius: 8px;
}


This example adds an inner shadow and rounds the corners of each product card.

Customizing the Sorting Dropdown Text #

The texts of the sorting dropdown can be modified using CSS. Each option in the selector has a specific class that allows identification.

The following example shows how to modify the text of the “Stock: highest to lowest” option.


/* Text "Stock: highest to lowest" */
.sellboost-finder-lang-es .sb-sorting-quantity-desc-option span,
.sellboost-finder-lang-es .sb-sorting-quantity-desc-option-selected span {
    display: none;
}
.sellboost-finder-lang-es .sb-sorting-quantity-desc-option::after,
.sellboost-finder-lang-es .sb-sorting-quantity-desc-option-selected::after {
    content: "Text changed with CSS";
}


This CSS hides Finder’s original text and adds a custom text using pseudo-elements.

The previous example applies only to the Spanish language using the class .sellboost-finder-lang-es. If the store uses multiple languages, you need to duplicate the rules and change the corresponding ISO language code.

Example for a store in Spanish and French:


.sellboost-finder-lang-es .sb-sorting-quantity-desc-option span,
.sellboost-finder-lang-es .sb-sorting-quantity-desc-option-selected span {
    display: none;
}
.sellboost-finder-lang-es .sb-sorting-quantity-desc-option::after,
.sellboost-finder-lang-es .sb-sorting-quantity-desc-option-selected::after {
    content: "Text changed with CSS";
}
.sellboost-finder-lang-fr .sb-sorting-quantity-desc-option span,
.sellboost-finder-lang-fr .sb-sorting-quantity-desc-option-selected span {
    display: none;
}
.sellboost-finder-lang-fr .sb-sorting-quantity-desc-option::after,
.sellboost-finder-lang-fr .sb-sorting-quantity-desc-option-selected::after {
    content: "Texte modifié avec CSS";
}


Changing the Order of Properties Within the Product #

Some elements within the product card use flexbox, which allows changing their visual order using the order property.

.sbProductPriceContainer {
    order: 8;
}


This example changes the position of the price container within the product card.

Custom CSS #

Finder allows adding custom CSS directly from the configuration panel.

This option is located in the Customization menu within Sellboost Finder. From this section, you can add your own CSS rules to adapt the search engine’s appearance to your store’s design.