How can I move filters to the left side of my page?

[Bramm]

Hey guys

Is it possible to move the filters to the left side of my page? I added a screenshot below.

The store url is https://roix2echklbozhv0-53265825967.shopifypreview.com

[Ujjaval]

@Bramm Put below css into styles.css

.cc-filters__items {
    display: flow-root !important;
}
.grid-flex.large-row {
    margin-left: 127px !important;
     margin-top: -424px !important;
}
details.cc-filter.cc-filter--sort {
    margin-left: -12% !important;
    margin-top: 378px !important;
   
}
.cc-filter__toggle {
    font-weight: 500;
    width: 160px !important;
}
details.cc-filter.cc-filter--sort {
    margin-left: -178px !important;
    margin-top: 378px !important;
}

[GemPages]

Hello @Bramm 

I would like to give you a solution to support you.

1. Go to Online Store -> Theme -> Edit code.

2. Open your theme.liquid theme file.

3. Paste the below code before </body>:

<style>
   @media (min-width: 768px){
      #shopify-section-template--15828831895727__main > .container .page-width:not(.collection-header){
        display: flex;
        justify-content: space-between;
      }
      .cc-facet-filters{
         width: 20%;
      }
      .cc-filters-results{
         width: 78%;
      }
      .cc-filter{
         width: 100%;
      }
      .cc-filter.cc-filter--sort{
         padding: 15px 15px 15px 0;
      }
      .cc-filters-container{
          flex-direction: column;
      }
   }
</style>

Result: 

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

[Bramm]

@GemPages the desktop version is perfect but in mobile view it gets chaotic 

[ahimanshu]

In my case this code could not work on theme "refresh" www.patoys.in

[Deesomers]

Hi GemPages, I am trying to achieve the opposite and make the faceted filter move from left and taking up the container space of the product collection to sit across the top in a row formation for https://wzxnsarxf05qvc56-50997756061.shopifypreview.com

I've gotten almost all the way there, but can't get rid of the lines underneath, can't align their heights  all the same and can't get them and the resulting containers to float overtop of the images vs. push the products down.

CSS:

.sidebar-block__heading {
font-size: 12px !important;
}
.sidebar-wrap {
border-right: 0px solid var(--shopify-editor-setting-border_color);
margin-right: 0px;
padding-right: 0px;
}
.has-sidebar-option {
width: 100%;
}
.faceted-filter-form {
display: flex;
flex-direction: row;
width: 100%;
text-decoration: none;
gap: 29px;
}
.faceted-filter-group-display__price-range-label {
font-size: 12px !important;
}
.icon-down-arrow {
padding: 0 !important;
font-size: 8px !important;
}
.faceted-filter-group-display__list-item-label-text {
font-size: 12px;
}

I've put this image together on how I want it to look-any chance you can send me where I've gone wrong?

Thanks so much for having a look!