Collection Grid Variation Product SKU Not Visible

[rcravi]

I’m currently facing an issue with my store where the product SKU is not visible on the collection grid, specifically for products with variations. I have checked the product pages themselves, and the SKU appears correctly there, but it’s not showing up on the collection grid as expected.

Has anyone encountered this issue before? If so, could you provide guidance on how to make the SKU visible for variation products on the collection grid

[TheUntechnickle]

Hey @rcravi,

To add SKU visibility to your collection grid for variable products, you'll need to modify your theme code. Follow these detailed steps:

1. Go to your Shopify admin dashboard

2. Navigate to Online Store → Themes

3. Find your active theme and click on Actions → Edit code

4. Locate your collection template file:

   • First check in the Templates folder for "collection.liquid"
   • If not there, look in the Sections folder for "collection-template.liquid" or "collection-grid.liquid"
   • You may also need to check for "product-grid-item.liquid" or "product-card.liquid" in the Snippets folder

5. Once you've found the appropriate file (the one containing your product grid display code), you'll need to add code that shows the SKU. Look for the section that displays product information in the grid.

6. Add this code snippet within the product card display section:

   {% if product.variants.first.sku != blank %}
     <div class="product-sku">
       <span class="sku-label">SKU: </span>
       <span class="sku-value">{{ product.variants.first.sku }}</span>
     </div>
   {% endif %}

7. If you want to display all variant SKUs for variable products, you can use:

   {% if product.has_only_default_variant == false %}
     <div class="product-skus">
       {% for variant in product.variants %}
         {% if variant.sku != blank %}
           <div class="variant-sku">
             <span class="variant-title">{{ variant.title }}: </span>
             <span class="sku-value">{{ variant.sku }}</span>
           </div>
         {% endif %}
       {% endfor %}
     </div>
   {% else %}
     {% if product.variants.first.sku != blank %}
       <div class="product-sku">
         <span class="sku-label">SKU: </span>
         <span class="sku-value">{{ product.variants.first.sku }}</span>
       </div>
     {% endif %}
   {% endif %}

8. You may also need to add some CSS to style the SKU display. Add this to your theme.scss.liquid file:

   .product-sku, .product-skus {
     font-size: 0.85em;
     color: #666;
     margin-top: 5px;
   }
   .variant-sku {
     margin-bottom: 3px;
   }

9. Save your changes and check your collection page to see if the SKUs are now displaying.

If after implementing these changes you still don't see the SKUs, it's possible your theme has a more complex structure. In that case, you might need to identify exactly where in your theme's code the product cards are rendered and insert the SKU code in the right location.

Let me know if you need any help! 

Cheers!
Shubham | Untechnickle

---

[bryan76]

makes sense as the page has several SKUs.  you want it to show which of the SKUs?  the space is only for one