Custom Code Product Badge (Dawn Theme)

Store Design
, , , , ,

Topic summary

A developer needs help implementing a custom product badge on a Dawn theme store. The badge should include an image, text, and verification checkmark, positioned to float in the lower right corner of product images.

Requirements:

  • Badge must hover over product images like an overlay
  • Needs to be editable via Liquid template for client customization
  • Implementation needed in main-product.liquid file
  • Urgent assistance requested, willing to pay

Solution Provided:
One responder offered a complete implementation approach:

  • Create a product-badge.liquid snippet using product metafields
  • Insert the snippet into main-product.liquid within the image wrapper
  • Add CSS styling for positioning and appearance
  • Enable client editing through Shopify Admin metafields (badge_image, badge_text, badge_verified)

Current Status:
The original poster is attempting to connect directly with a specific helper via email to implement the solution. No confirmation yet whether the issue has been resolved.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
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

1 Like
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