Shopify themes, liquid, logos, and UX
On Dawn theme- if you have a Featured Collection on your home page, but the products within the collection are not active online channel yet due to a timer to appear later, it leaves a large square photo of a shirt and a price of 19.99$ as placeholders. Does anyone know how to REMOVE those and just have the collection title, and when the products DO get published they will appear there without having to have these placeholder images and prices in the meantime?
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.
Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025