Show variant title below thumbnail image

Shopify Discussion
1

How can I display the variant titles below the variant thumbnail images on the left (as shown in red in the pic).

Screenshot 2025-08-04 at 12.46.00
Screenshot 2025-08-04 at 12.46.001920Ă—1191 144 KB

2 Likes
2

Hey @Corinne9

This can be done by Metafields and some custom coding in your theme files, as it’s not only possible by CSS only so I would require the collaborator access of your store. If you’d like me to work on that, feel free to share it in my private messages and I would be happy to help you out.

Best,
Moeed

3

Hey @Corinne9 ,
Thanks for sharing the screenshot — that really helps clarify the layout you’re aiming for.

If you want to display the variant titles (like “Protea”, “Agapanthus”, etc.) below each variant thumbnail image, you’ll need to slightly customize your product template and the section that handles the variant media thumbnails.
Follow these Steps:

  1. Online Store > Themes > Edit Code
  2. Find the section that renders your product media thumbnails — often named something like:
    -product-media.liquid
    -main-product.liquid
    -product-thumbnail.liquid
  3. Inside the loop where thumbnails are rendered, you’ll likely see an image tag like:
<img src="{{ media.preview_image | img_url: '100x' }}" ... >
  1. Below the image, you can add:
{% if media.alt != blank %}
  <div class="variant-title">{{ media.alt }}</div>
{% endif %}

Shopify often stores the variant title in the “alt” tag of the media -but this depends on how your theme is set up. You may need to adjust this to:

{{ media.variant.title }}

Or use a for loop that loops through product.variants and matches based on media.variant_id.
5. Add some quick CSS in your theme file (or Custom CSS field if available):

.variant-title {
  text-align: center;
  font-size: 14px;
  margin-top: 4px;
  color: #333;
}

Let me know your theme name (e.g., Dawn, Impulse, Prestige, etc.), and I can share a more tailored snippet!

Hope this helps - If you’d like help implementing this, feel free to reach out to me — I’d be happy to assist.
Thanks,
Rajat
Shopify Expert
https://rajatweb.dev/ – This is my work experience portfolio.

4

Thanks so much! Apologies - I’m using Dawn.

5

@Corinne9 ,
Thanks for confirming you’re using Dawn!
You can show the variant name under thumbnails by adding this inside the media loop in main-product.liquid:

{% if media.alt %}
  <div class="variant-title">{{ media.alt }}</div>
{% endif %}

And add this to your CSS:

.variant-title {
  text-align: center;
  font-size: 14px;
  margin-top: 6px;
}

Let me know if you need help implementing it — happy to assist!
Thanks!

6

Thanks so much for your detailed response! I’m having trouble finding the correct place to add the first snippet of code (in main-product.liquid). I tried finding the section using the code that you shared in your first message, but could not find something similar. This is the code that I’m referring to, that I can’t find in my own code:

<img src="{{ media.preview_image | img_url: '100x' }}" ... >
7

Ah, I see! It might be a bit different based on your Dawn version. If you’re comfortable, I can check it directly in your code to find the right spot and implement the solution.

Feel free to send your store collaboration code via email - you’ll find my email on my portfolio- https://rajatweb.dev/ . Happy to help!

8

Thanks, Rajat! I’ve just sent you an invite - please let me know if you do not receive it.

9

Hi,

Hope this will help

  • Find File That Displays Variant Thumbnails
  • Identify Code That Renders Thumbnails
    Code example
{% for media in product.media %}
  <img src="{{ media | img_url: '100x100' }}" alt="{{ media.alt }}">
{% endfor %}
  • Add the Variant Title Under the Image
    Example
<div class="variant-thumbnail">
  <img src="{{ variant.featured_image.src | img_url: '100x100' }}" alt="{{ variant.title }}">
  <p class="variant-title">{{ variant.title }}</p>
</div>
  • Add CSS for style
11

Thanks! I’ve received the invite and just accepted it. I’ll check everything and keep you posted shortly. In the meantime, could you please ping me on email as well? Thanks again - looking forward to moving ahead!

12

Hi @Corinne9 Add {{ variant.title }} in the code just below where the thumbnail images are coming from — this will display the title of each variant.