Add a filter bouton

[PAUL8]

Hello,

I want to have my filters accessible by a bouton like this in the same place and design as this one. 
Can you help me ? 

I use dawn theme and my store is womber.fr password: PROPAGANDAAA

Thanks!

Regards,

[devcoders]

Hello @PAUL8 

You only want the filter button at the bottom on mobile, right? Please share store access because I will need to change the structure.

[PAUL8]

Hello friend, 

thanks for your help. My code is 0498.

[ShopDoc]

Definitely possible, will take some minor custom coding. I don’t believe dawn has this built in.

[PAUL8]

Hello, can you help me with this minor custom coding? Thanks !

[ShopDoc]

I will give it a shot once I get home.

[PAUL8]

Thanks! I'm waiting for your response.

[PaulNewton]

For a fix placed collection filter button in the Dawn theme you can set the <aside> to a fixed position, but you'll have to do some hoop jumping to change all the colors so everything doesn't just blend/clash into the background and test position values.

In a custom-css trying something like the following tailoring it to need, 💣 and testing on multiple screensizes/devices carefully as the theme was not meant to do this; you have been warned.

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css 

@media screen and (min-width: 750px) {
  aside.facets-wrapper {
    position: fixed;
    bottom: 50px;
    z-index: 100;
    background: #050404;
    margin: 0 auto;
    left: 37%;
    padding-top: 4px;
    padding-bottom: 7px;
  }
  .mobile-facets__open-wrapper *, .product-count * {
    color: white !important;
  }
}

Beyond this such as making actual dedicated overlaying floating button is an advanced theme customization.

If you need further customization then contact me for services
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence. 

[PAUL8]

Hello friend,

I can’t try to edit code because I know nothing about it. Can you try it for me ? My collaborative code is 0498.

thanks

[PaulNewton]

For my post you do NOT have to edit code.

Use the custom-css as instructed read the docs know how themes work on the platform your business depends on

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css 

[PAUL8]

Hello, This is the result I have, can you help me to fix it?
On desktop 

On mobile: