How to get Product Listing tag on Thumbnail

[AISTEESTORE]

Hi folks, need some help to figure out how to have product listing tags on the Thumbnail to differentiate Regular fit and Oversize fit. Just like the image attached. Kindly suggest any relevant video or steps to follow. Thanks in advance.

[Phoenixtech]

Got it! Here’s a version of the note without any code, written in the same friendly and helpful tone:

---

Hey hey!  Hope you're having a great day!

I saw your question about adding "Regular Fit" and "Oversized Fit" tags to your product thumbnails—such a smart idea! It’s a great way to make your store easier to shop and your products stand out.

Here’s how you can make that happen:

 First, go into each product in your Shopify admin and add tags like “Regular Fit” or “Oversized Fit” in the Tags section.

Next, you’ll want to jump into your theme settings and look for the section that controls your product grid or product cards. From there, you can add a small visual label that shows up on the thumbnail based on the tags you’ve added.

To style it (make it look cool), head to your theme’s design or custom CSS settings and create a little badge with colors that fit your store’s vibe.

It’s perfect for adding things like “Sale”, “New”, or in your case, “Regular Fit” and “Oversized Fit” to your products. Super helpful!

Let me know if you need help following the steps or choosing the right colors for your tags—I’ve got you 

[TheUntechnickle · Accepted solution]

Howdy @AISTEESTORE,

I've researched the best method to add those "REGULAR FIT" and "OVERSIZED FIT" labels on your product thumbnails like in the example you shared. Here's the most efficient solution for Shopify:

This approach leverages Shopify's built-in variant image functionality combined with some custom code to create those prominent labels.

Step 1: Set Up Your Variant Images

1. Go to your Shopify admin > Products > select the product
2. In the Variants section, click the image icon next to each variant
3. Upload the appropriate image for each fit type
4. Add descriptive alt text that includes the fit type (e.g., "Black T-shirt Oversized Fit")

Step 2: Add Custom CSS

Add this CSS to your theme's custom CSS section (Online Store > Themes > Customize > Theme Settings > Custom CSS):

.product-single__thumbnail {
  position: relative;
}

.fit-label {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  z-index: 2;
}

Step 3: Add JavaScript

Add this JavaScript in your theme.liquid file just before the closing </body> tag:

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Get all product thumbnails
  const thumbnails = document.querySelectorAll('.product-single__thumbnail img');
  
  thumbnails.forEach(img => {
    const altText = img.getAttribute('alt') || '';
    const container = img.closest('.product-single__thumbnail');
    
    // Create label based on alt text
    if (altText.includes('Oversized') || altText.includes('Oversize')) {
      const label = document.createElement('div');
      label.classList.add('fit-label');
      label.textContent = 'OVERSIZED FIT';
      container.appendChild(label);
    } else if (altText.includes('Regular')) {
      const label = document.createElement('div');
      label.classList.add('fit-label');
      label.textContent = 'REGULAR FIT';
      container.appendChild(label);
    }
  });
});
</script>

Let me know if you need help with implementation!

Cheers!
Shubham | Untechnickle

[AISTEESTORE]

 @TheUntechnickle Thanks a ton mate. However, i have not figured out where exactly should I place the custom CSS code. It would be great if you have time to record and share the exact steps. Im not techie but Im trying my best to keep my store in par with the professionals by learning from video and from the great minds within the community. Thanks again

[AISTEESTORE]

Thanks mate. You suggestion helped. Can you refer a few link to the video.