Preguntas Frecuentes

Agregando una Insignia Personalizada #

Esta guía te muestra cómo agregar una insignia personalizada al control deslizante de Recomendaciones. El proceso es similar para Omnisearch, la página de búsqueda y los diseños de código de búsqueda en vivo.

1. Encuentra el atributo que deseas usar como regla para mostrar la insignia. Por ejemplo, ‘on_sale’, o el producto que está en una categoría específica como ‘Black_friday’.

2. Edita el diseño elegido para Recomendaciones o Omnisearch.

3. Inserta el código en el espacio elegido, generalmente dentro del div con el class='clerk-product-image-wrapper'. En el ejemplo a continuación, estamos utilizando el atributo de categorías para mostrar la insignia, donde 123 es el ID de categoría de la categoría de Black Friday.

{% for item in products %}
    <div class="clerk-product-wrapper clerk-slider-content">
        <div class="clerk-product-image-wrapper">
            {% if item.categories contains 123  %}
                <div class="clerk-product-badge-sale clerk_BF_badge">
                    BLACK FRIDAY -20%
                </div>
            {% endif %}
                
            ...

        </div>
    </div>
{% endfor %}

Por último, agrega tu CSS de insignia para personalizar el diseño de la insignia, por ejemplo:

.clerk_BF_badge{
  background-color:#333333;
  font-size: 15px;
  color: #F4841F;
  top: 0px;
}