Coding Error

[Abdul35]

 I Want to dont show the products on default sort by in Dawn Theme but if i select other filter then the products will show and when i click on default filter then it will also show the product but when i click on it.

[Dotsquares]

hi @Abdul35 

Thanks for your message! From what I understand, you're looking to:

Hide all products by default when the collection page first loads with the "Default sorting" option selected.

Show products only after a sort/filter is applied (e.g., price, best-selling, etc.).

If the user clicks back to "Default sorting," products should reappear.

While this kind of conditional visibility isn't supported by default in the Dawn theme, it can be achieved with some custom JavaScript and Liquid logic. Here's a general approach:

1. Modify the Collection Template
Use Liquid to wrap the product grid in a container that’s hidden by default when no sort/filter is applied. For example:

<div id="product-grid" class="hidden">
  {% for product in collection.products %}
    <!-- product card code -->
  {% endfor %}
</div>

2. Add JavaScript Logic

Use JavaScript to listen for changes in the filter/sort dropdown. When a filter or sort is selected, show the product grid.

document.addEventListener('DOMContentLoaded', function () {
  const productGrid = document.getElementById('product-grid');
  const sortBy = document.querySelector('select[name="sort_by"]');

  if (sortBy && productGrid) {
    sortBy.addEventListener('change', function () {
      productGrid.classList.remove('hidden');
    });
  }
});

You’d also want to check the current query string on page load—if a filter is already applied (e.g., ?sort_by=price-asc), you can show the product grid immediately.