FAQ

Adding a Custom Badge #

This guide shows you how to add a custom badge to the Recommendations slider. The process is similar for Omnisearch, Search page and Live search code designs.

1. Find the attribute you want to use as a rule to show the badge. For example, ‘on_sale’, or the product being in a specific category such as ‘Black_friday’.

2. Edit the chosen design for Recommendations or Omnisearch.

3. Insert the code in the chosen space, usually inside the div with the class='clerk-product-image-wrapper'. In the example below, we are using the categories attribute to show the badge, where 123 is the category ID of the Black Friday category.

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

Lastly add your badge CSS to customize the badge design, E.g.:

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