How to Add Custom Product Badges in Shopware 6 for Clearance Sales and More
Highlighting Clearance Products: A Shopware 6 Community Challenge
The Shopware community often seeks ways to visually distinguish specific product types, such as 'new arrivals,' 'top sellers,' or 'clearance sale' items, with prominent badges. This forum topic addresses a common request from merchants: how to implement an 'Abverkauf' (clearance sale) badge in Shopware 6. The original poster, raymond-de, inquired whether other merchants achieve this through custom programming or a plugin, ideally one that allows badging based on any product attribute. Interestingly, a direct feature request for a 'badge for clearance sale' was previously rejected by Shopware's feedback platform, pushing users towards custom solutions.
Community Solutions: Custom Badges via Theme Customization
The discussion quickly converged on custom theme development as the most straightforward approach. MrAle confirmed their use of self-programmed badges for various product characteristics (e.g., 'protein-rich') and suggested that for clearance items, simple Twig modifications should suffice, as the necessary product information is likely already available.
aggrosoft provided a concrete code example, demonstrating how to hook into the Shopware 6 storefront template to add a new badge. The solution involves modifying the storefront/component/product/card/badges.html.twig file.
Important Clarification: While aggrosoft's example uses product.available (which indicates general stock availability), for a true 'Abverkauf' (clearance) badge, you would typically need to define 'clearance' through a custom product field, a specific product stream, or a more complex stock logic. The provided code illustrates the template modification technique, which is highly valuable for adding any custom badge, but the condition itself would need to be adapted for a specific 'clearance' status.
The Shopware Template Hook for Badges
The suggested approach is to extend the existing badge block, specifically component_product_badges_new, within the badges.html.twig template. This ensures your custom badge appears alongside other default badges like 'New' or 'Topseller'.
Implementing a Custom Badge (Example for "Available" - Adapt for "Clearance")
Here's the provided Twig code snippet. This code extends the component_product_badges_new block, calls the parent block to retain existing 'New' badges, and then adds a new badge if the product is available.
{% block component_product_badges_new %}
{{ parent() }}
{% if product.available %}
{{ 'listing.boxLabelAvailable'|trans|sw_sanitize }}
{% endif %}
{% endblock %}To implement a true 'clearance sale' badge, you would replace {% if product.available %} with a condition that accurately reflects your clearance criteria. For example, if you've added a custom field named custom_clearance_sale (a boolean), your condition would be {% if product.customFields.custom_clearance_sale %}. You would also change the badge class (e.g., badge-clearance) and the translation key (e.g., 'listing.boxLabelClearance').
Key Takeaways for Shopware Merchants and Developers
- Flexibility through Customization: Shopware's templating system allows for extensive customization, enabling merchants to implement features not natively supported or rejected from feedback.
- Leveraging Existing Data: Many product attributes, including custom fields, can be used as conditions for displaying dynamic badges.
- Defining "Clearance": For a robust "Abverkauf" badge, consider implementing a custom product field (e.g., a boolean "isClearance") or using product streams to categorize clearance items, then checking against these conditions in your Twig template.
- Plugin Alternatives: While custom code offers full control, various marketplace plugins exist for more advanced badge management, often providing a user-friendly interface for merchants to manage badges without coding.
This discussion highlights that while Shopware might not offer every specific badge out-of-the-box, its flexible architecture empowers developers and merchants to implement tailored solutions for enhanced product visibility and marketing.