Add custom badges on Shopify products without app

Create Custom Product Labels and Badges in Shopify Without Any App

We will create custom product badges in Shopify without any app using metafield and few lines of code.
I have implemented this solution on the Shopify DAWN theme, but this so…


This content originally appeared on DEV Community and was authored by Saad Saif

Create Custom Product Labels and Badges in Shopify Without Any App

We will create custom product badges in Shopify without any app using metafield and few lines of code.
I have implemented this solution on the Shopify DAWN theme, but this solution can be implemented on any theme, we can also modify the design according to the need. If you need help, you can message me anytime on my whatsapp.

Steps

  1. Go to store settings → Metafields and metaobjects
  2. Add Products Metafield definition named as Badges
    • Select the type as Single line text and List of values
  3. Create a snippet named as: badges.liquid
    • Use the following snippet: 
{%- assign custom_badges = product.metafields.custom.badges.value -%}
<div style="display: flex; flex-direction: column; gap: 10px; position: absolute; right: 10px; top: 10px;z-index:10;">
    {%- for custom_badge in custom_badges -%}
        {%- assign custom_badge_parts = custom_badge | split: '|' -%}
        {%- assign custom_badge_text = custom_badge_parts[0] -%}
        {%- assign custom_badge_bg = custom_badge_parts[1] -%}
        {%- assign custom_badge_color = custom_badge_parts[2] -%}
        <span style="background-color: {{ custom_badge_bg }}; color: {{ custom_badge_color }}; border-color: {{ custom_badge_color }}" class="custom-badge">{{ custom_badge_text }}</span>
    {%- endfor -%}
</div>
  1. Then go to base.css and paste the following code at the end: 
/* custom badge start */
.product-card-wrapper,
.product__media-wrapper {
  position: relative;
}
.custom-badge {
  border: 1px solid transparent;
  border-radius: 10px;
  display: inline-block;
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  line-height: 1;
  padding: 0.5rem 1.3rem 0.6rem 1.3rem;
  text-align: center;
  word-break: break-word;
}
/* custom badge end */
  1. Then go to card-product.liquid and search for this line <div class="card-wrapper product-card-wrapper underline-links-hover"> and paste the following snippet under that: 
{%- render 'badges', product: card_product -%}
  1. Then go to main-product.liquid and search for this line <div class="grid__item product__media-wrapper"> and paste the following snippet under that: 
{%- render 'badges', product: product -%}

Video Tutorial

Watch the step-by-step video tutorial here:

Custom Product Labels and Badges in Shopify


This content originally appeared on DEV Community and was authored by Saad Saif


Print Share Comment Cite Upload Translate Updates
APA

Saad Saif | Sciencx (2025-10-06T08:09:53+00:00) Add custom badges on Shopify products without app. Retrieved from https://www.scien.cx/2025/10/06/add-custom-badges-on-shopify-products-without-app-4/

MLA
" » Add custom badges on Shopify products without app." Saad Saif | Sciencx - Monday October 6, 2025, https://www.scien.cx/2025/10/06/add-custom-badges-on-shopify-products-without-app-4/
HARVARD
Saad Saif | Sciencx Monday October 6, 2025 » Add custom badges on Shopify products without app., viewed ,<https://www.scien.cx/2025/10/06/add-custom-badges-on-shopify-products-without-app-4/>
VANCOUVER
Saad Saif | Sciencx - » Add custom badges on Shopify products without app. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/10/06/add-custom-badges-on-shopify-products-without-app-4/
CHICAGO
" » Add custom badges on Shopify products without app." Saad Saif | Sciencx - Accessed . https://www.scien.cx/2025/10/06/add-custom-badges-on-shopify-products-without-app-4/
IEEE
" » Add custom badges on Shopify products without app." Saad Saif | Sciencx [Online]. Available: https://www.scien.cx/2025/10/06/add-custom-badges-on-shopify-products-without-app-4/. [Accessed: ]
rf:citation
» Add custom badges on Shopify products without app | Saad Saif | Sciencx | https://www.scien.cx/2025/10/06/add-custom-badges-on-shopify-products-without-app-4/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts