How to Show “Made in EU” Badges on Product Images in Shopify

We’ve noticed a few online stores using “Made in EU” or EU flag badges on product pages and in ads. It’s a great way to highlight the added value or benefits of certain products.

One store was doing it by manually adding an EU flag to the product images. While that works, it can be a bit tedious — though it does make it easy to reuse the same visuals in ads and on social media.

A more convenient and scalable way inside your Shopify store is to use metafields and badges. Here’s an example from our test store:

Here’s a step-by-step guide on how you can do the same

Note: This guide is written for the Dawn theme and other Shopify Online Store 2.0 themes. If you’re using an older theme, the file structure or class names might differ slightly — but the general concept still applies.

Create a Product Metafield

Go to your Shopify admin > Settings > Metafields and metaobjects > Products

Click “Add definition”

Fill in the details:

Name: Made in EU (or whatever label you want)
Namespace and key: custom.made_in_eu
Content type: Single line text
Click Save

Add the Badge Text to a Product

Go to Products in your Shopify admin
Open any product
Scroll down to the Metafields section
Enter Made in EU (or any value you want to display)
Save the product

Edit the Product Card Code

Go to Online Store > Themes > ... > Edit code
Open the file: snippets/card-product.liquid
Find the line that looks like:

<div class="card__media{% if image_shape ...

Paste the following just below that line:

{% if card_product.metafields.custom.made_in_eu %}
 <div class="product-card-badge">
  🇪🇺 {{ card_product.metafields.custom.made_in_eu }}
 </div>
{% endif %}

Add CSS Styling for the Badge

In the same code editor, open: assets/base.css
Scroll to the bottom and paste this:

.card__media {
  position: relative;
}

.product-card-badge {
   position: absolute;
   top: 10px;
   left: 10px;
   background-color: #e6f0e9;
   padding: 6px 10px;
   border-radius: 12px;
   font-size: 12px;
   font-weight: 600;
   color: #1a1a1a;
   z-index: 2;
}

Done!

Now your custom badge will appear over product images on your collection pages — but only for products where you’ve filled in the metafield.

You can use the same approach to display other types of badges (e.g. “Sustainable” or “Award-Winning”) and customize the badge style with CSS to match your brand.

Need help setting this up or want to show multiple badges? Ask ChatGPT — it’s great with Shopify customizations.