FAQ

Aggiungere un Badge Personalizzato #

Questa guida ti mostra come aggiungere un badge personalizzato allo slider delle Raccomandazioni. Il processo è simile per Omnisearch, pagina di ricerca e design del codice di ricerca dal vivo.

1. Trova l’attributo che vuoi utilizzare come regola per mostrare il badge. Ad esempio, ‘on_sale’, o il prodotto che si trova in una categoria specifica come ‘Black_friday’.

2. Modifica il design scelto per Raccomandazioni o Omnisearch.

3. Inserisci il codice nello spazio scelto, di solito all’interno del div con class='clerk-product-image-wrapper'. Nell’esempio seguente, stiamo utilizzando l’attributo categorie per mostrare il badge, dove 123 è l’ ID categoria della categoria 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 %}

Infine, aggiungi il tuo CSS per il badge per personalizzare il design del badge, ad esempio:

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