Hi @katagolda
I understand you're having trouble displaying product images on your main shopping page in the Minimal theme when linking directly to a product (especially when a collection only has one item). You're currently seeing that "no image available" placeholder, which isn't ideal. Let's fix that.
The Shopify Help Center's advice is on the right track, but it can be a little vague. Here's a more specific breakdown of how I'd approach this:
Understanding the Problem
The issue is that your main shopping page is likely set up to display collections, not individual products. When a collection has only one product, and you link directly to that product, the template designed for collections doesn't know how to handle displaying a single product's image directly. It's expecting a collection image or a placeholder.
Finding the Right File
You're correct that the collection-template.liquid file is important. However, since you're linking directly to products on your shopping page, you'll likely need to modify the template that controls how products are displayed within collections and potentially the template for your main shop page (if it's using a custom template).
Locating the Product Loop and Adding the Image Code
1-Open collection-template.liquid: In your Shopify admin, go to Online Store > Themes > Edit Code. Then, navigate to the Sections folder and open collection-template.liquid.
2-Find the Product Loop: As you've already found, the product loop is usually something like {% paginate collection.products by settings.pagination_limit %}. Inside this loop (between the {% for product in collection.products %} and {% endfor %} tags), you'll need to add the code for the product image.
3-Add the Image Code: This is the key part. Here's the code you should add within the product loop:
<a href="{{ product.url }}"> <img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}"> </a>
- {{ product.url }} creates a link to the product page when the image is clicked. This is important because it's what you want to happen when someone clicks the product on the shop page.
- {{ product.featured_image | img_url: 'medium' }} displays the product's featured image. The 'medium' size is a good default, but you can change it to 'small', 'large', or 'original' depending on your needs. I usually start with 'medium' and adjust based on how it looks on the page.
- {{ product.title }} sets the alt text for the image, which is good for SEO and accessibility.
Example: Here's how it should look within the loop:
{% for product in collection.products %}
<div class="product-item">
<a href="{{ product.url }}">
<img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
</a>
<h3>{{ product.title }}</h3>
<p>{{ product.price | money }}</p>
</div>
{% endfor %}
4-Check Your Main Shop Page Template (Important!): If your main shop page is using a different template (maybe something like page.liquid in the Templates folder or a custom section within index.json), you'll need to add similar code there as well, wherever you're displaying the links to products. This is the part that was likely missing from the Shopify Help Center advice. If you're using collections on the shop page, the above solution will work. However, if you're directly listing products on the shop page, you'll need a similar loop but instead of collection.products, you'll likely use a list of products that you have manually created or a different variable depending on your theme.
Addressing the "No Image Available" Issue
By adding the image code inside the product loop in the correct template(s), you ensure that the product's featured image is displayed, even if it's the only product in a collection. This should completely resolve the "no image available" issue.
My Personal Take
In my experience, themes sometimes have slightly different structures. If you're still having trouble after trying this, double-check your theme's documentation or consider reaching out to the theme developer for support. They can provide more specific guidance based on how your theme is coded.
If you need any other assistance, I am willing to help.
Best regards,
Daisy.
Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!
Avada SEO & Image Optimizer - The #1 SEO solution
