Adding multiple badges to your Shopify store can significantly enhance the shopping experience for your customers. These badges can highlight special promotions, new arrivals, and unique product features, making it easier for customers to navigate your store and find what they are looking for. This article will explore the benefits of using multiple badges, provide use cases where these can be particularly effective, and guide you through the code implementation process.
Benefits of Multiple Badges on a Shopify Store
Badges are an effective tool for increasing visibility for promotions and offers on your Shopify store. For example, a "50% Off" badge on a product image can immediately grab the customer's attention, making them more likely to explore further and potentially make a purchase. Additionally, badges can highlight specific product features and statuses, such as "New Arrival," "Best-Seller," or "Limited Edition." These visual cues quickly communicate key information about products, increasing the likelihood of early sales, especially for new or exclusive items.Moreover, using multiple badges enhances the customer experience by providing clear and immediate information about products, which helps customers make quicker decisions without having to read through long descriptions or apply various filters. This not only improves the shopping experience but also reduces bounce rates. Well-designed badges can also boost your store's brand perception by giving it a more polished and professional look, fostering trust among customers and encouraging them to explore more of your offerings. Furthermore, strategically placed badges, such as "Limited Stock," can create a sense of urgency, driving higher conversion rates by prompting customers to purchase sooner rather than later.
Cases When We Should Use Multiple Badges
Promotional Events and Sales Campaigns: During Black Friday, Cyber Monday, or other sales events, multiple badges can help you highlight various promotions across different product categories. For example, some products can have a "Black Friday Deal" badge, while others might have a "Cyber Monday Special" badge, making it easy for customers to differentiate between offers.
New Product Launches and Seasonal Collections: When launching a new product or a seasonal collection, multiple badges can make it clear to customers what’s new or what’s part of a limited-time collection. For instance, a "Summer Collection" badge can indicate seasonal items, while a "New" badge shows newly launched products.
Highlighting Special Features or Limited Editions: If you have products that are eco-friendly, limited edition, or exclusive to your store, badges can effectively communicate these unique selling points. A "Limited Edition" badge could drive urgency, while a "Eco-Friendly" badge appeals to conscious consumers.
Code Implementation Details
To implement multiple badges on your Shopify store, you'll need to utilize Shopify's meta fields to store and display badge information dynamically. Here’s a step-by-step guide to help you set it up:
1. Create Metaobject defination
- - Navigate to your Shopify Admin.
- - Go to Settings > Custom Data > Metaobject definations.
2. Create Meta Fields in Shopify Admin for product
- - Navigate to your Shopify Admin.
- - Go to Settings > Custom Data > Meta Fields.
- - Create a new meta field for product type of Metaobject type
- - Assign the defination we created named grt_badges
3. Customize Your Shopify Theme Code
- - Go to Online Store > Themes > Actions > Edit Code.
- - Create file named grt_badge.liquid in snippets.
- - Insert code snippets where you want the badges to appear. Here's a basic example:
{% if product.metafields.custom.card_badge %}
<style>
{% if tagtype == "card" %}
.__grt-badge-section{position:absolute; left:0; right:0; bottom:0; top:0; height:100%; width:100%; padding:8px; overflow:hidden;}
.__grt-badge-section .grt-badge{position:absolute; display:inline-flex;}
.__grt-badge-bottom-right,.__grt-badge-top-right{justify-content:flex-end; right:10px;}
.__grt-badge-section .grt-badge{border: 1px solid transparent; border-radius: 16px; display: inline-block; font-size: 1.2rem; letter-spacing: .1rem; line-height: 1; padding: .5rem 1.3rem .6rem; text-align: center; background-color: red;
color: red; word-break: break-word;}
{% else %}
div.__grt-badge-section{position:relative;}
.__grt-badge-section .grt-badge{border: 1px solid transparent; border-radius: 16px; display: inline-block; font-size: 1.2rem; letter-spacing: .1rem; line-height: 1; padding: .5rem 1.3rem .6rem; text-align: center; background-color: red;
color: red; word-break: break-word;}
{% endif %}
</style>
{% assign product = product %}
<div class="__grt-badge-section __grt-badge-top-left">
{% assign grt_colorobj = product.metafields.custom.card_badge.value %}
{% for grt_tags in grt_colorobj %}
{% assign badge_hide = grt_tags.hide | default : false %}
{% if grt_tags.is_image == blank %}
{% assign badge_image = "" %}
{% else %}
{% assign badge_image = grt_tags.is_image %}
{% endif %}
{% assign border_radius = grt_tags.border_radius | default : 23 %}
{% assign badge_name = grt_tags.text %}
{% assign badge_bg_color = grt_tags.bg_color | default : "#0073a7" %}
{% assign badge_text_color = grt_tags.text_color | default : "#fff" %}
{% assign badge_pos_top = grt_tags.is_position_top %}
{% assign badge_pos_right = grt_tags.is_alignment_right %}
{% assign badge_top_space = grt_tags.badge_top_space | default : 8 %}
{% assign badge_right_space = grt_tags.badge_right_space | default : 8 %}
{% if badge_hide == false %}
{% if tagtype == "product" %}
<span style="border:none; border-radius:{{ border_radius }}px; background:{{ badge_bg_color }}; color:{{ badge_text_color}}; {% if badge_pos_right %}right{% else %}left{% endif %}:{{ badge_right_space }}px; {% if badge_pos_top %}top{% else %}bottom{% endif %}:{{ badge_top_space }}px;" class="grt-badge badge">
{{badge_name}}
</span>
{% else %}
<span style="border:none; {% if badge_image == "" %} background:{{ badge_bg_color }}; color:{{ badge_text_color}};{% else %} background:transparent; padding:0; {% endif %} border-radius:{{ border_radius }}px; {% if badge_pos_right %}right{% else %}left{% endif %}:{{ badge_right_space }}px; {% if badge_pos_top %}top{% else %}bottom{% endif %}:{{ badge_top_space }}px;" class="grt-badge badge">
{% if badge_image == "" %}
{{badge_name}}
{% else %}
<img src="{{ badge_image | image_url : width: grt_tags.image_width , height: grt_tags.image_width }}" alt="badge" loading="lazy" />
{% endif %}
</span>
{% endif %}
{% endif %}
{% endfor %}
</div>
{% endif %}
Now embed the badge at product listing like collection page, featured product or recommended card file need to update is card-product.liquid.
{% render 'grt_badge' , product:card_product, tagtype:"card" %}
Enable Badges at Product detail page file named with main-product.liquid
Add below code after line number 107
{% when 'grt_badge' %}
{% render 'grt_badge', badge_type: 'text', tagtype:"product" %}
Add schema code in main-product.liquid after line number 790
{
"type": "grt_badge",
"name": "grt_badge",
"limit": 1
}, 
Add badges on product page please refer the below image.
5. Test Your Implementation
- Save the changes in the theme editor.
- Test your Shopify store to ensure that badges appear correctly on product images and align with the specified positions.
Conclusion
Using multiple badges on your Shopify store is a powerful way to enhance user experience, increase visibility for promotions, and improve conversion rates. By following the steps outlined above, you can easily implement this feature in your store, customize it to fit your brand, and ultimately provide a better shopping experience for your customers. Whether you're running a sale, launching new products, or highlighting unique features, badges can make your store more engaging and informative. Start leveraging this feature today to boost your store’s performance!
Advance code Installation help | Hire us
