Hi there,
I understand the issue you're facing with the Dawn theme showing placeholder images and prices for products that are not yet published in a collection. We recently tackled a similar issue and here's a solution that worked for us.
Solution
To remove the placeholders and show a custom message or simply nothing when there are no products, you'll need to modify the featured-collection.liquid file. Here's what you need to do:
Access the Theme Editor:
Go to Online Store > Themes in your Shopify admin.
Find your Dawn theme and click Actions > Edit code.
Edit the featured-collection.liquid File:
In the Sections folder, find and open featured-collection.liquid.
Modify the Code:
Add a condition to check if there are no products in the collection and handle that case to remove or replace the placeholders.
Here’s the relevant part of the code with the changes you need to make:
{%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
<li
id="Slide-{{ section.id }}-{{ forloop.index }}"
class="grid__item{% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
{% render 'card-product',
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
image_shape: section.settings.image_shape,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
section_id: section.id,
quick_add: section.settings.quick_add
%}
</li>
{%- else -%}
<div class="collection collection--empty page-width" id="product-grid" data-id="{{ section.id }}">
<div class="loading-overlay gradient"></div>
<div class="title-wrapper center">
No products available at this moment, please try again later.
</div>
</div>
{%- endfor -%}
Summary
Replace the placeholders with a custom message by modifying the featured-collection.liquid file as shown above. This way, when there are no products in the collection, users will see a message instead of placeholder images and prices.
I hope this helps! Let me know if you have any questions.
The pessimist sees only the tunnel; the optimist sees the light at the end of the tunnel; the realist sees the tunnel and the light - and the next tunnel.
