Badge Placeholders¶

Badge placeholders are available in templates when a product has a badge assigned - either through permanent product assignment or through the badge parameter in the shortcode.

Overview ¶

Badge placeholders are available when a product has a badge assigned and provide all necessary information for displaying badges in your templates.

Availability:

✅ Single product templates

Main Placeholders ¶

hasBadge ¶

Type: Boolean

Description: Returns true if a badge is available

Usage:

{% if hasBadge %}
    <!-- Badge-specific content -->
{% endif %}

Recommendation: Always use hasBadge to check if badge data is available before using other badge placeholders.

BadgeTitle ¶

Type: String

Description: The display name of the badge

Example Values: - "Bestseller" - "Best Value" - "Limited Offer"

Usage:

{% if hasBadge %}
    <span class="badge-title">{{ BadgeTitle }}</span>
{% endif %}

BadgeIcon ¶

Type: String (can be empty)

Description: CSS class of the badge icon

Example Values: - "fas fa-star" - "fas fa-trophy" - "fas fa-gift" - "" (empty if no icon selected)

Usage:

{% if hasBadge and BadgeIcon is not empty %}
    <i class="{{ BadgeIcon }}" aria-hidden="true"></i>
{% endif %}

Icon Detection:

{% if BadgeIcon %}
    {% set has_icon = true %}
    <div class="badge-with-icon">
        <i class="{{ BadgeIcon }}"></i>
        {{ BadgeTitle }}
    </div>
{% else %}
    <div class="badge-text-only">
        {{ BadgeTitle }}
    </div>
{% endif %}

BadgeColor ¶

Type: String (Hex color code)

Description: Background color of the badge

Example Values: - "#ff6a00" (Default Orange) - "#ff0000" (Red) - "#00ff00" (Green)

Usage:

<div class="product-badge" style="background-color: {{ BadgeColor }};">
    {{ BadgeTitle }}
</div>

BadgeBackgroundColor ¶

Type: String (Hex color code)

Description: Alias for BadgeColor - identical value

Usage:

<!-- Both placeholders are identical -->
<div style="background: {{ BadgeColor }};">Badge</div>
<div style="background: {{ BadgeBackgroundColor }};">Badge</div>

BadgeTextColor ¶

Type: String (Hex color code)

Description: Text color of the badge

Example Values: - "#ffffff" (White - default) - "#000000" (Black) - "#333333" (Dark Gray)

Usage:

<div class="product-badge"
     style="background: {{ BadgeColor }}; color: {{ BadgeTextColor }};">
    {{ BadgeTitle }}
</div>

Template Implementation ¶

Basic Badge Display ¶

{% if hasBadge %}
<div class="product-badge"
     style="background: {{ BadgeColor }}; color: {{ BadgeTextColor }};">
    {% if BadgeIcon is not empty %}
        <i class="{{ BadgeIcon }}"></i>
    {% endif %}
    {{ BadgeTitle }}
</div>
{% endif %}

Badge with CSS Classes ¶

{% if hasBadge %}
<div class="badge-container">
    <span class="product-badge {{ BadgeIcon ? 'has-icon' : 'text-only' }}"
          style="background-color: {{ BadgeBackgroundColor }}; color: {{ BadgeTextColor }};">
        {% if BadgeIcon %}
            <i class="{{ BadgeIcon }}" aria-hidden="true"></i>
        {% endif %}
        <span class="badge-text">{{ BadgeTitle }}</span>
    </span>
</div>
{% endif %}

Using Fallback Values ¶

{% if hasBadge %}
<div class="product-badge"
     style="background-color: {{ BadgeBackgroundColor|default('#ff6a00') }};
            color: {{ BadgeTextColor|default('#ffffff') }};">
    {% if BadgeIcon is defined and BadgeIcon is not empty %}
        <i class="{{ BadgeIcon }}" style="color: {{ BadgeTextColor|default('#ffffff') }};"></i>
    {% endif %}
    {{ BadgeTitle|default('Badge') }}
</div>
{% endif %}

Advanced Usage ¶

Querying Badge Status ¶

{% set badge_available = hasBadge %}
{% set badge_has_icon = badge_available and BadgeIcon is not empty %}
{% set badge_title_length = badge_available ? BadgeTitle|length : 0 %}

{% if badge_available %}
    <div class="badge-info">
        <p>Badge: {{ BadgeTitle }}</p>
        {% if badge_has_icon %}
            <p>Mit Icon: {{ BadgeIcon }}</p>
        {% endif %}
        <p>Titel-Länge: {{ badge_title_length }} Zeichen</p>
    </div>
{% endif %}

Conditional CSS Classes ¶

{% if hasBadge %}
    {% set badge_classes = ['product-badge'] %}

    {% if BadgeIcon %}
        {% set badge_classes = badge_classes|merge(['has-icon']) %}
    {% endif %}

    {% if BadgeTitle|length > 15 %}
        {% set badge_classes = badge_classes|merge(['long-text']) %}
    {% endif %}

    <div class="{{ badge_classes|join(' ') }}"
         style="background: {{ BadgeColor }}; color: {{ BadgeTextColor }};">
        {% if BadgeIcon %}<i class="{{ BadgeIcon }}"></i>{% endif %}
        {{ BadgeTitle }}
    </div>
{% endif %}

Badges in Collections ¶

{% for product in products %}
<div class="product-item">
    <h3>{{ product.title }}</h3>

    {% if product.hasBadge %}
    <div class="product-badge"
         style="background: {{ product.BadgeColor }}; color: {{ product.BadgeTextColor }};">
        {% if product.BadgeIcon %}
            <i class="{{ product.BadgeIcon }}"></i>
        {% endif %}
        {{ product.BadgeTitle }}
    </div>
    {% endif %}

    <!-- Weitere Produktinformationen -->
</div>
{% endfor %}

Accessibility ¶

ARIA Attributes ¶

{% if hasBadge %}
<div class="product-badge"
     style="background: {{ BadgeColor }}; color: {{ BadgeTextColor }};"
     role="img"
     aria-label="Produktkennzeichnung: {{ BadgeTitle }}">
    {% if BadgeIcon %}
        <i class="{{ BadgeIcon }}" aria-hidden="true"></i>
    {% endif %}
    <span>{{ BadgeTitle }}</span>
</div>
{% endif %}

Debugging ¶

Outputting Badge Data ¶

<!-- Nur für Debugging-Zwecke -->
{% if hasBadge %}
<pre style="font-size: 10px; background: #f0f0f0; padding: 10px;">
Badge Debug Info:
- hasBadge: {{ hasBadge ? 'true' : 'false' }}
- BadgeTitle: "{{ BadgeTitle }}"
- BadgeIcon: "{{ BadgeIcon }}"
- BadgeColor: "{{ BadgeColor }}"
- BadgeTextColor: "{{ BadgeTextColor }}"
- BadgeBackgroundColor: "{{ BadgeBackgroundColor }}"
</pre>
{% endif %}

Common Issues ¶

Badge Not Displayed ¶

Possible Causes:

No Badge Assigned: Check hasBadge before using other placeholders
Invalid Badge Reference: Internal badge name in shortcode incorrect
Template Context: Badge placeholders are not available in all template areas

Solution:

{% if hasBadge is defined and hasBadge %}
    <!-- Badge-Code hier -->
{% else %}
    <!-- Debug: Kein Badge verfügbar -->
{% endif %}

Missing Icons ¶

Problem: Badge is displayed but icon is missing

Solution: Check explicitly for empty icon values:

{% if hasBadge %}
    <div class="product-badge">
        {% if BadgeIcon is defined and BadgeIcon is not empty %}
            <i class="{{ BadgeIcon }}"></i>
        {% endif %}
        {{ BadgeTitle }}
    </div>
{% endif %}

Related Topics:

Product Badges - Complete badge documentation
Managed Templates - Template system overview
Shortcodes - Shortcode parameters including badge
Collections - Badge usage in collections