How can I add a product image info bar?

Precust · November 9, 2025, 5:33pm

How can you add a product image info bar like this?

Does anyone have any ideas or a tutorial on how to create an info box like this? I know it has to be done with meta fields, but I haven’t been able to find any tutorials on it.

pere01 · November 9, 2025, 7:45pm

@Precust You can create a product image info bar like that by combining Shopify Metaobjects/Metafields with a custom Liquid section in your theme. Here’s a straightforward way to set it up:

1. Create metafields for your products:

Go to Settings → Custom data → Products → Add definition.

Example metafields:

info_title (Single line text) → e.g. Hoher Tragekomfort

info_link_label (Single line text) → e.g. Mehr Infos

info_link_url (URL) → your product info link

2. Edit your product template in the theme editor:

Open Online Store → Themes → Edit code.

Find the product section (usually main-product.liquid or product-template.liquid).

Add this snippet below your product image code:

{% if product.metafields.custom.info_title %}

<span class="info-title">{{ product.metafields.custom.info_title }}</span>

{% if product.metafields.custom.info_link_label and product.metafields.custom.info_link_url %}

  <a href="{{ product.metafields.custom.info_link_url }}" class="info-link">

    {{ product.metafields.custom.info_link_label }}

  </a>

{% endif %}

{% endif %}

3. Add styling (CSS): In your theme’s CSS file, add:

.product-info-bar {

display: flex;

justify-content: space-between;

align-items: center;

padding: 8px 12px;

background: #f7f7f7;

border-radius: 6px;

font-size: 14px;}

.info-link {

color: #555;

text-decoration: none;

font-weight: 500;}

.info-link:hover { text-decoration: underline;}

This approach gives you full control via metafields, so you can easily edit the title and link per product from the Shopify admin, without touching code again.

Implement this and give feedback

Precust · November 9, 2025, 8:30pm

Can you show me your shop or how you implemented it?

Precust · November 9, 2025, 8:31pm

Thank you for your suggestion. However, it didn’t quite work out. The bar should be part of the image, so you can decide which product image should have such a USP bar. The original is at Snocks, if you want to take a closer look.

PaulNewton · November 9, 2025, 9:23pm

With an advanced theme customization as every situation can be different and there’s a bunch of sub decisions.

For a less vague answer , be less vague, communicate DETAIL in advance don’t make others have to extract it from you.
Keep others in mind not everyone sees what you see nor are we mind readers.
WHICH theme are you using, what is your current website url to an exact URL of the current situation.
etc etc etc.
Poor communication is EXPENSIVE.

Or if you just need this done properly and fully walked through then reach out to me for theme customization services.
Click profile pic on forums for options to connect , ALWAYS provide context in new communications.

pere01 · November 9, 2025, 10:17pm

@Precust Thanks for clarifying, that makes perfect sense now. If the USP/info bar should appear as part of specific product images (like Snocks does), you’ll want to handle it through media metafields or metaobjects, not the product-level metafields.

pere01 · November 9, 2025, 10:19pm

@Precust Here’s how you can achieve that setup:

1. Use Media Metafields (or Metaobjects):

Shopify now supports attaching custom data to specific media items.

Go to Settings → Custom data → Files (or Media) and create metafields such as:

usp_title (Single line text) → e.g. Hoher Tragekomfort

usp_link_text (Single line text) → e.g. Mehr Infos

usp_link_url (URL)

2. Assign values per image:

When uploading or editing images in the product media section, you can fill in these metafields only for the images that should display the USP bar.

3. Edit your product media section (theme code):

In main-product.liquid, find the image rendering loop (often inside a for media in product.media loop), and add something like this inside the image container:

{% if media.metafields.custom.usp_title %}

{% if media.metafields.custom.usp_link_text and media.metafields.custom.usp_link_url %}

{{ media.metafields.custom.usp_link_text }}

{% endif %}

4. Add the styling (CSS):

.usp-bar {

position: absolute;

bottom: 0;

left: 0;

right: 0;

background: rgba(255, 255, 255, 0.9);

display: flex;

justify-content: space-between;

align-items: center;

padding: 8px 12px;

font-size: 14px;

}

.usp-link {

color: #333;

text-decoration: none;

font-weight: 500;

}

.usp-link:hover {

text-decoration: underline;

}

This way, you can choose which product images display the info bar and keep the layout clean just like Snocks.

devcoders · November 10, 2025, 3:08am

Hi @Precust

Create Metafields in Shopify

Go to:

Admin → Settings → Metafields → Products → Add Metafield

Add fields like:
Name - Product Feature Title
Namespace / Key - custom.feature_title

Type - Single line text
Name - Feature Info Link
Namespace / Key - custom.feature_link
Type - URL

Edit Template Code

Edit file depending on where you want it:

Theme → Edit code → snippets/product-card.liquid
(or product-grid-item.liquid / featured-product.liquid depending on theme)

Find place under product image, then add:

{% if product.metafields.custom.feature_title %}
<div class="product-info-bar">
  <span class="product-info-text">{{ product.metafields.custom.feature_title }}</span>

  {% if product.metafields.custom.feature_link %}
  <a href="{{ product.metafields.custom.feature_link }}" class="product-info-link">
    <!-- info icon -->
    <svg xmlns="http://www.w3.org/2000/svg" class="info-icon" viewBox="0 0 24 24">
      <circle cx="12" cy="12" r="10" stroke="currentColor" fill="none"/>
      <text x="12" y="16" font-size="12" text-anchor="middle" fill="currentColor">i</text>
    </svg>
    More Info
  </a>
  {% endif %}
</div>
{% endif %}

Add CSS

Add to base.css

.product-info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding: 10px 12px;
  background: #f6f6f6;
  border-top: 1px solid #e5e5e5;
}

.product-info-text {
  font-weight: 600;
}

.product-info-link {
  display: flex;
  gap: 4px;
  font-size: 13px;
  color: #555;
  text-decoration: underline;
}

.info-icon {
  width: 14px;
  height: 14px;
}

Best regards,
Devcoder

oscprofessional · November 10, 2025, 10:10am

Hi @Precust ,
You can create this effect using Shopify metafields and a small Liquid block inside your product template or image section.
Here’s the step-by-step method

Step 1 – Create a Metafield for Product Info

Go to Shopify Admin → Settings → Custom Data → Products.
Click “Add definition.”
Give it a name like Image Info Title (for example Comfort Title) and set the type to “Single line text”.
(Optional) Add another metafield for the description or link text, e.g., “Mehr Infos”.

Step 2 – Assign the metafield value

Open any product and scroll to the Metafields section at the bottom of the product editor.
Enter:

Title: Hoher Tragekomfort
Link label (optional): Mehr Infos
Link URL (optional): /pages/product-info

Step 3 – Edit the Product Template

Go to Online Store → Themes → Edit Code.
Open your product template or the section that handles product images (commonly main-product.liquid or product-media-gallery.liquid).
Add this Liquid code below your main image block:

{% if product.metafields.custom.image_info_title %}
  <div class="product-image-info-bar">
    <div class="info-text">
      {{ product.metafields.custom.image_info_title }}
    </div>
    {% if product.metafields.custom.image_info_link %}
      <a href="{{ product.metafields.custom.image_info_link }}" class="info-link">
        {{ product.metafields.custom.image_info_label }}
      </a>
    {% endif %}
  </div>
{% endif %}

Step 4 – Add CSS for Styling

In your theme CSS (base.css or theme.css), add this:

.product-image-info-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f6f6f6;
  padding: 12px 16px;
  font-size: 16px;
  border-radius: 8px;
  margin-top: 10px;
}

.product-image-info-bar .info-text {
  font-weight: 600;
  color: #000;
}

.product-image-info-bar .info-link {
  color: #666;
  text-decoration: none;
}

.product-image-info-bar .info-link:hover {
  text-decoration: underline;
}

Precust · November 10, 2025, 2:43pm

So I need to change the meta field more. When I click on More Info with the mouse or my finger, a field with text appears. It shouldn’t be a link, but rather a button that pops up a text field.

Topic		Replies	Views
Dawn - Add A Section Image + Text In The Product Info Store Design design , customizations , collection-page , landing-page , cart-page , shopify-themes , html , product-page	6	101	September 18, 2023
Dawn - add a section image + text in the product info Store Design design , customizations , collection-page , landing-page , cart-page , shopify-themes , html , product-page	3	50	September 18, 2023
Dawn - Add an image in product info section Store Design design , customizations , collection-page , landing-page , cart-page , shopify-themes , html , product-page	3	38	September 20, 2023
Product Page Customizations Store Design design	1	31	November 2, 2024
Add photo from metafield at the bottom of the product information section. Shopify Discussion troubleshooting , shop-performance	5	309	July 19, 2024

How can I add a product image info bar?

Step 1 – Create a Metafield for Product Info

Step 2 – Assign the metafield value

Step 3 – Edit the Product Template

Step 4 – Add CSS for Styling

Related topics