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.
Topic summary
A Shopify store owner seeks guidance on adding product listing tags (“Regular Fit” and “Oversized Fit”) to product thumbnails, similar to a reference image they provided.
Solutions Offered:
-
Tag-based approach: Add product tags in Shopify admin, then configure theme settings to display badges on product grids based on these tags. Customize appearance through theme design or custom CSS settings.
-
Variant image method: Upload variant-specific images with descriptive alt text (e.g., “Black T-shirt Oversized Fit”). Add custom CSS to style labels and JavaScript code to dynamically generate labels based on alt text keywords. Code snippets provided for both CSS (positioning and styling) and JavaScript (label creation logic).
Current Status:
The original poster requested more detailed guidance on implementing the CSS solution, specifically asking for video instructions showing exact placement steps. They acknowledged receiving helpful suggestions and requested video tutorial links for further learning.
The discussion remains open with the technical implementation partially addressed but awaiting more beginner-friendly instructional resources.
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
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 Images1. Go to your Shopify admin > Products > select the product
- In the Variants section, click the image icon next to each variant
- Upload the appropriate image for each fit type
- 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 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
@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
Thanks mate. You suggestion helped. Can you refer a few link to the video.
