Designs

FAQ

Ofte stillede spørgsmål om Clerk.io-designs.

Tilføjelse af et brugerdefineret badge #

Denne guide viser dig, hvordan du tilføjer et brugerdefineret badge til Recommendations-slideren. Processen er tilsvarende for Omnisearch, Search-siden og Live search code designs.

  1. Find attributten, du vil bruge som regel for at vise badgen. For eksempel ‘on_sale’, eller at produktet er i en bestemt kategori såsom ‘Black_friday’.

  2. Rediger det valgte design for Recommendations eller Omnisearch.

  3. Indsæt koden i det valgte område, som regel inden i div’en med class='clerk-product-image-wrapper'. I eksemplet nedenfor bruger vi categories-attributten til at vise badgen, hvor 123 er category ID for Black Friday-kategorien.

{% 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 %}

Til sidst tilføjer du din badge CSS for at tilpasse badge-designet, f.eks.:

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

Denne side er oversat af en hjælpsom AI, og der kan derfor være sproglige fejl. Tak for forståelsen.