How to create this.... Using Horizons Template?

Store Design
,
1

chrome_skJ4ctqndS
chrome_skJ4ctqndS880×302 54.1 KB

I am wanting a container to hold a set of product features icons… I have seen this on several sites and do not know if it is coded or an app. I tried several badge apps and they are not correct. The icons should be assigned on the products information page (metadata) that then loads only the one assigned on any give product page. They also have tool tips over if possible… Can anyone point me in the right direction on how to make this feature happen :slight_smile:

2

HI @TRR-Brad

Welcome to the community.

Yes, that is possible with custom code. Have you already defined metadata?

3

Hi @TRR-Brad , the badges content could come from Metaobjects in your store, which you would then associate to each product through a Metafield. As for the badge block itself, that’s something you’d have to add to Horizon as there isn’t one built-in that has tooltips.

4

HI @TRR-Brad
Which theme are you using? Normally, you can add a block with metafields to make the content dynamic.
If you’re using the Horizon theme, you can add a Group block, then add an image and connect it to a metafield.
Please check the image for more details.

FitmiEcom · Edit Horizon · Shopify 2025-12-29 03-30-16
FitmiEcom · Edit Horizon · Shopify 2025-12-29 03-30-162862×1226 197 KB

If you have any difficulties setting up the block or creating this feature on your store, feel free to DM me. I’m happy to help, and I don’t charge any fee.

5

Hey there @TRR-Brad!

You don’t need an app for this. Badge apps are mostly global or rule-based (sale, new, best seller). They’re not designed for per-product feature icons driven by metafields, which is what you want.

The cleanest and most scalable solution is product metafields + a custom Liquid section in your Horizon theme. It’s flexible, fast, and exactly how larger stores handle feature icons like these.

If interested, I have a helpful YouTube video you can watch that walks through how to use custom fields (metafields) in Shopify: https://youtu.be/cnMwbpJzlQM?si=VwMgMpLhzCautGCn

Hope this helps you out! :grinning_face:

6

Have you tried asking Shopify AI sidekick to “Generate” you a block you want?
It’s pretty good at doing things like this, maybe the icons would need to be changed…

7

Hi @TRR-Brad

Use Product Metafields + a small Liquid snippet

This is how premium themes and large stores do it.

Step 1: Create product metafields (Admin)

Go to Settings → Custom data → Products → Add definition

Create one of these two structures (pick ONE):

Option A: Boolean metafields (simplest)

Create one metafield per feature:

Name Namespace & key Type
Free Shipping features.free_shipping Boolean
Eco Friendly features.eco Boolean
Handmade features.handmade Boolean
Warranty features.warranty Boolean

You’ll then just toggle ON/OFF per product.

Option B: List of values (more flexible)

Create:

  • Name: Product Features
  • Namespace & key: features.list
  • Type: List of single-line text

Example values per product:

free_shipping
eco
handmade
warranty

(This is better if you expect to add more features later.)

Step 2: Add icons (theme files)

Upload your icons to:
Content → Files
(or theme assets)

Example:

icon-free-shipping.svg
icon-eco.svg
icon-handmade.svg
icon-warranty.svg

Step 3: Add the container to the product page

In your product template (main-product.liquid or similar), add:

{% if product.metafields.features.list != blank %}
  <div class="product-features">
    {% for feature in product.metafields.features.list %}
      <div class="product-feature" data-tooltip="{{ feature | replace: '_', ' ' }}">
        <img
          src="{{ 'icon-' | append: feature | append: '.svg' | file_url }}"
          alt="{{ feature | replace: '_', ' ' }}">
      </div>
    {% endfor %}
  </div>
{% endif %}

Step 4: Tooltip + styling (CSS)

.product-features {
  display: flex;
  gap: 14px;
  margin-top: 16px;
}

.product-feature {
  position: relative;
}

.product-feature img {
  width: 36px;
  height: 36px;
}

.product-feature::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.product-feature:hover::after {
  opacity: 1;
}

Best regards,
Devcoder :laptop: