Products Badges

Product Badges help merchants attract customer attention by adding visual cues to highlight special offers or product features. Integrating this feature into your themes is crucial to ensure better product visibility and engagement.

Product Badge Activation Steps for Merchants

Go to the Products page in Zid's merchant dashboard.

Create a new product or edit an existing one.

Navigate to the side section > Product Image Label.

Select a badge from the drop-down or create a custom badge to attach to the product.

Once applied, these badges will appear on the store’s product pages, drawing customer attention and encouraging more engagement.

Code Snippet Integration for Theme Partners

To properly integrate Product Badges into the theme, you’ll need to add two key templates into the appropriate theme files:

1. Products Template

This code is preferably placed above the product name for optimal placement

Insert the following in the product.twig file:

{% if product.badge %}
    {{ template_for_product_badge }}
{% endif %}

This code snippet verifies whether a product has an assigned badge. If a badge is present, it loads the template_for_product_badge template to manage its display.

2. Product Card Template

This code is preferably placed above the product image for optimal placement

Insert the following in the common/product-card.twig file:

{% if product.badge %}
    {% include 'template_for_products_badge' ignore missing %}
{% endif %}

<div class="product-img-container" style="width: 100%; height: 100%;">
    <div class="product__img-wrap {% if product.images[1] %}multiple-imgs{% else %}single-img{% endif %}">
    .
    .
    .

This code snippet displays the Product Badge within the product card template, which appears in the product list. It works similarly to the product page logic, loading the badge template if the product has a badge assigned.

Product Badge Activation Steps for Merchants#

Code Snippet Integration for Theme Partners#

1. Products Template#

2. Product Card Template#

Product Badge Activation Steps for Merchants

Code Snippet Integration for Theme Partners

1. Products Template

2. Product Card Template