Move Collection Filter Above Product Grid

[manbru]

Hey,

I want to move the collection filter above the products inside my collection page. 

my store: https://r1vex.myshopify.com/collections/2 

I've tried with this code but the 'order' thing dosen't seem to work.

.collection-page {
  display: flex;
  flex-direction: column;
}

#main-collection-filters {
  order: 1;
}

.product-grid-container {
  order: 2;
}

This is how it looks right now:

This is how i want it to look like:

[theycallmemakka]

Hi @manbru 

Implementing this natively will require more time as it involves modifying the base code. However, I have written a JavaScript solution that seems to accomplish the task.

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (window.innerWidth > 768) {
        const collectionList = document.querySelector('section#shopify-section-template--22029799752006__collection_list_Q9baVN');
        const banner = document.querySelector('div#shopify-section-template--22029799752006__banner');
        const productGridPadding = document.querySelector('.section-template--22029799752006__product-grid-padding facet-filters-form');
        const productGridContainer = document.querySelector('#ProductGridContainer');
        if (productGridContainer && collectionList && banner && productGridPadding) {
            productGridContainer.insertBefore(productGridPadding, productGridContainer.firstChild);
            productGridContainer.insertBefore(collectionList, productGridContainer.firstChild);
            productGridContainer.insertBefore(banner, productGridContainer.firstChild);
        } else {
            console.error('One or more elements not found.');
        }
    }
});
</script>

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[BSS-TekLabs · Accepted solution]

Hi @manbru,

Here are the steps you can follow:

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the base.css (or theme.css, custom.css) file.

3, Paste the code snippet provided below at the bottom of the file, then save your changes.

@media screen and (min-width: 990px) {
  .facets-container {
    position: absolute;
    top: 230px;
  }
  
  slider-component {
    width: 100%;
    margin-left: 280px;
  }

  .collection-hero__text-wrapper {
    margin-left: 280px;
  }

  .product-grid-container .collection {
    margin-left: 250px;
  }
}

If it doesn't work, please add a closing curly brace at the beginning of the code, like this

}

@media screen and (min-width: 990px) {
  .facets-container {
    position: absolute;
    top: 230px;
  }
  
  slider-component {
    width: 100%;
    margin-left: 280px;
  }

  .collection-hero__text-wrapper {
    margin-left: 280px;
  }

  .product-grid-container .collection {
    margin-left: 250px;
  }
}

Here is the result

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

[manbru]

Thanks G!

[BSS-TekLabs]

You're welcome! 😊