CSS

I seguenti esempi mostrano come utilizzare il CSS per modificare alcuni elementi visivi di Finder. Questi stili permettono di adattare l’aspetto del motore di ricerca al design del tuo negozio, modificando aspetti come loghi, stili dei prodotti o testi dell’interfaccia.

Aggiungere un logo #

È possibile aggiungere un logo personalizzato nell’intestazione di Finder utilizzando il CSS. Si può applicare un’immagine di sfondo al contenitore corrispondente.

.sbHeaderBackgroundLogo {
    background-image: url(image_url);
    background-repeat: no-repeat;
}
@media (max-width:950px) {
    .sbHeaderBackgroundLogo {
        display: block;
        height: 80px; // Deve corrispondere all’altezza dell’immagine
        grid-column: 1/span 12;
    }
}


Sostituisci image_url con l’URL del logo che vuoi mostrare. Puoi anche regolare l’altezza per adattarla alle dimensioni dell’immagine.

Aggiungere ombreggiatura alle schede prodotto #

È anche possibile modificare l’aspetto dei prodotti mostrati nei risultati di Finder. Ad esempio, è possibile aggiungere un bordo o un’ombra a ciascuna scheda prodotto.

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


Questo esempio aggiunge un’ombra interna e arrotonda gli angoli di ciascuna scheda prodotto.

Personalizzare i testi del menu a tendina dell’ordinamento #

I testi del menu a tendina per l’ordinamento possono essere modificati utilizzando il CSS. Ogni opzione del selettore ha una classe specifica che permette di identificarla.

L’esempio seguente mostra come modificare il testo dell’opzione “Stock: dal più alto al più basso”.


/* Testo "Stock: dal più alto al più basso" */
.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: "Testo modificato con CSS";
}


Questo CSS nasconde il testo originale di Finder e aggiunge un testo personalizzato utilizzando pseudo-elementi.

L’esempio precedente si applica solo alla lingua spagnola tramite la classe .sellboost-finder-lang-es. Se il negozio utilizza più lingue, è necessario duplicare le regole modificando il codice ISO della lingua corrispondente.

Esempio per un negozio in spagnolo e francese:


.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: "Testo modificato con 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";
}


Modificare l’ordine delle proprietà all’interno del prodotto #

Alcuni elementi all’interno della scheda prodotto utilizzano flexbox, che permette di cambiare il loro ordine visivo tramite la proprietà order.

.sbProductPriceContainer {
    order: 8;
}


Questo esempio modifica la posizione del contenitore del prezzo all’interno della scheda prodotto.

CSS personalizzato #

Finder consente di aggiungere CSS personalizzato direttamente dal pannello di configurazione.

Questa opzione si trova nel menu Personalizzazione all’interno di Sellboost Finder. Da questa sezione è possibile aggiungere regole CSS proprie per adattare l’aspetto del motore di ricerca al design del negozio.