Move Sort button next to filter

Solved
Luxurymrkt
Trailblazer
403 2 74

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)

Accepted Solutions
PageFly-Victor
Shopify Partner
4520 744 2093

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

 

If it’s helpful to you, please let me know by giving it a like or marking it as a solution.


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.

View solution in original post

Luxurymrkt
Trailblazer
403 2 74

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
4520 744 2093

This is an accepted solution.

I updated new code

If it’s helpful to you, please let me know by giving it a like or marking it as a solution.


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.

View solution in original post

PageFly-Victor
Shopify Partner
4520 744 2093

This is an accepted solution.

you can add border-radius:0 !important

PageFly_0-1663174781757.png

 

If it’s helpful to you, please let me know by giving it a like or marking it as a solution.


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.

View solution in original post

Replies 7 (7)
PageFly-Victor
Shopify Partner
4520 744 2093

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

 

If it’s helpful to you, please let me know by giving it a like or marking it as a solution.


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.

Luxurymrkt
Trailblazer
403 2 74

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
4520 744 2093

This is an accepted solution.

I updated new code

If it’s helpful to you, please let me know by giving it a like or marking it as a solution.


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.

Luxurymrkt
Trailblazer
403 2 74

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
4520 744 2093

This is an accepted solution.

you can add border-radius:0 !important

PageFly_0-1663174781757.png

 

If it’s helpful to you, please let me know by giving it a like or marking it as a solution.


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.

Luxurymrkt
Trailblazer
403 2 74

Thanks Again!!!! Appreciate all your help

Thank You | mike
PageFly-Victor
Shopify Partner
4520 744 2093

Thank you, I glad when can help you

If it’s helpful to you, please let me know by giving it a like or marking it as a solution.


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.