Los siguientes ejemplos muestran cómo utilizar CSS para modificar algunos elementos visuales de Finder. Estos estilos permiten adaptar la apariencia del buscador al diseño de tu tienda, cambiando aspectos como logos, estilos de producto o textos de la interfaz.
Añadir un logo #
Es posible añadir un logo personalizado en la cabecera de Finder utilizando CSS. Para ello se puede aplicar una imagen de fondo sobre el contenedor correspondiente. .sbHeaderBackgroundLogo {
background-image: url(image_url);
background-repeat: no-repeat;
}
@media (max-width:950px) {
.sbHeaderBackgroundLogo {
display: block;
height: 80px; // Debe ser la altura de la imagen
grid-column: 1/span 12;
}
}
Sustituye image_url por la URL del logo que quieras mostrar. También puedes ajustar la altura para adaptarla al tamaño de la imagen.
Añadir sombreado a las tarjetas de producto #
También es posible modificar el aspecto de los productos que aparecen en los resultados de Finder. Por ejemplo, se puede añadir un borde o sombra a cada tarjeta de producto. .sbProductCard {
box-shadow: 0 0 0 2px inset #aaa;
border-radius: 8px;
}
Este ejemplo añade un sombreado interior y redondea las esquinas de cada tarjeta de producto.
Personalizar los textos del selector de orden #
Los textos del desplegable de ordenamiento pueden modificarse utilizando CSS. Cada opción del selector tiene una clase específica que permite identificarla.
| Nombre | Clase |
|---|---|
| Relevancia | sb-sorting-relevance-desc-option |
| Precio ascendente | sb-sorting-price-asc-option |
| Precio descendente | sb-sorting-price-desc-option |
| Stock: de mayor a menor | sb-sorting-quantity-desc-option |
El siguiente ejemplo muestra cómo modificar el texto de la opción “Stock: de mayor a menor”.
/* Texto "Stock: de mayor a menor" */
.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: "Texto cambiado con CSS";
}
Este CSS oculta el texto original de Finder y añade un texto personalizado utilizando pseudo-elementos.
El ejemplo anterior se aplica únicamente al idioma español mediante la clase .sellboost-finder-lang-es.
Si la tienda utiliza varios idiomas, es necesario duplicar las reglas cambiando el código ISO del idioma correspondiente.
Ejemplo para una tienda en español y francés:
.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: "Texto cambiado 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";
}
Cambiar el orden de propiedades dentro del producto #
Algunos elementos dentro de la tarjeta de producto utilizan flexbox, lo que permite cambiar su orden visual mediante la propiedad order. .sbProductPriceContainer {
order: 8;
}
Con este ejemplo se modifica la posición del contenedor del precio dentro de la tarjeta de producto.
CSS personalizado #
Finder permite añadir CSS personalizado directamente desde el panel de configuración.
Esta opción se encuentra en el menú de Personalización dentro de Sellboost Finder. Desde esta sección es posible añadir reglas CSS propias para adaptar la apariencia del buscador al diseño de la tienda.
