What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Move Sort button next to filter

Solved

How can I move the sort button next to the filter button?

Luxurymrkt
Navigator
649 2 128

Hi 

min looking to move the sort button next to my filter button so it looks like the picture

my site is https://luxurymrkt.com/collections/newest-products

 

I want it to look like this 👇

A3E1EEAD-5EA7-4777-B08A-6896A1D85280.jpeg

@PageFly-Victor 

Thank You | mike
Accepted Solutions (4)

PageFly-Victor
Shopify Partner
7865 1786 3120

This is an accepted solution.

Hi @Luxurymrkt

 

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

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

-Asset-> theme.css  paste the below code at the bottom of the file.

.collection-grid__wrapper .collection-filter{

 display: grid !important;

grid-template-columns: 1fr 1fr;

 

}

.collection-filter__item--drawer button{

width: 100% !important;

text-align: start !important;

}

 

PageFly_0-1663173857167.png

 

 

 

Best Regards;

Pagefly

 

View solution in original post

Luxurymrkt
Navigator
649 2 128

This is an accepted solution.

Hi that worked

but it made the filter button smaller

F6AFDBE0-894F-410C-BD14-E00E6FA04A35.png

  

C42BB72C-8ED6-4ABD-AAB6-A82F1742E88C.jpeg

Thank You | mike

View solution in original post

PageFly-Victor
Shopify Partner
7865 1786 3120

This is an accepted solution.

I updated new code

View solution in original post

PageFly-Victor
Shopify Partner
7865 1786 3120

This is an accepted solution.

you can add border-radius:0 !important

PageFly_0-1663174781757.png

 

View solution in original post

Replies 7 (7)

PageFly-Victor
Shopify Partner
7865 1786 3120

This is an accepted solution.

Hi @Luxurymrkt

 

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

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

-Asset-> theme.css  paste the below code at the bottom of the file.

.collection-grid__wrapper .collection-filter{

 display: grid !important;

grid-template-columns: 1fr 1fr;

 

}

.collection-filter__item--drawer button{

width: 100% !important;

text-align: start !important;

}

 

PageFly_0-1663173857167.png

 

 

 

Best Regards;

Pagefly

 

Luxurymrkt
Navigator
649 2 128

This is an accepted solution.

Hi that worked

but it made the filter button smaller

F6AFDBE0-894F-410C-BD14-E00E6FA04A35.png

  

C42BB72C-8ED6-4ABD-AAB6-A82F1742E88C.jpeg

Thank You | mike
PageFly-Victor
Shopify Partner
7865 1786 3120

This is an accepted solution.

I updated new code

Luxurymrkt
Navigator
649 2 128

That work ! Only one smaller fix

the filter button is rounded the sort is square 

I think I need to change the filter to a square button so lines up correctly or change the border?

24FB0D5B-9D5D-48C5-8A54-543E79C59C9D.jpeg

Thank You | mike
PageFly-Victor
Shopify Partner
7865 1786 3120

This is an accepted solution.

you can add border-radius:0 !important

PageFly_0-1663174781757.png

 

Luxurymrkt
Navigator
649 2 128

Thanks Again!!!! Appreciate all your help

Thank You | mike
PageFly-Victor
Shopify Partner
7865 1786 3120

Thank you, I glad when can help you