Custom Code Product Badge (Dawn Theme)

Store Design
, , , , ,
1

Hello, i need some assistance.

My client wanted me to create a custom badge for the products. This badge consist of image, text and a verification check to be placed at the lower right part of the image.

Like this

1000013737.jpg
1000013737.jpg1000Ă—1000 128 KB

Now, i created a code and it shows that part. Now i am having a hard time adding it in the main-product.liquid. My client wanted it to float or hover in the image like a badge. And also make a liquid template coz he wanted to edit it and stuff.

I will pay for someone who can help me implement it.

URGENT

2

Hello, Thank you for you post. Will you share the URL where you like to insert. If you want we can help you to implement this. You can send me PM with collaboration code. I will request your store access to investigate that.

Thank you

3

Hello @drekanepar

I’ll refine the approach so it:

1 Floats in the lower right corner of the product image.
2 Includes an image, text, and a verification check.
3 Is editable via a Liquid template, so your client can easily change it.

  1. Create a Liquid Snippet: product-badge.liquid
    This will allow your client to edit the badge’s content easily.

Code for snippets/product-badge.liquid

{% assign badge_image = product.metafields.custom.badge_image %}
{% assign badge_text = product.metafields.custom.badge_text %}
{% assign badge_verified = product.metafields.custom.badge_verified %}

{% if badge_text or badge_image %}

    {% if badge_image %}
        
    {% endif %}

    

        {% if badge_text %}
            {{ badge_text }}
        {% endif %}

        {% if badge_verified %}
            âś”
        {% endif %}
    

{% endif %}
  1. Add it to main-product.liquid
    Find the main product image section in main-product.liquid and insert this inside the image wrapper:

    {{ media | media_tag }}
    {% render 'product-badge' %}
  1. Add CSS for Styling

In your base.css or theme.css, add:

.product__media {
    position: relative;
}

.product-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.9);
    padding: 6px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    font-weight: bold;
    color: #333;
    gap: 6px;
}

.badge-image {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.badge-content {
    display: flex;
    align-items: center;
    gap: 4px;
}

.badge-check {
    color: #008000;
    font-size: 16px;
}
  1. Allow Clients to Edit the Badge
    Your client can edit the badge details in Shopify Admin:

1 Go to Shopify Admin > Settings > Custom Data > Products.
2 Add these Metafields:
. badge_image (File) → Upload an image.
. badge_text (Single-line text) → Example: “Handmade By Lily”.
. badge_verified (Boolean - Checkbox) → Shows :check_mark: if checked.

Final Look
Now, the badge will: Float at the bottom right of the product image.
Show an image, text, and verification check.
Be fully editable via Shopify’s metafields.

Thank you :blush:

4

Hello Arif, can you please email me. Thank you

5

Hey @drekanepar Is it fixed or not ??

Thank you :blush:

6

Hello arif can you email me

iamdrekagonzales@gmail.com