Solved

Removing padding, and moving filter on collection page

gihan7575
Explorer
57 1 5

This is how my collection page looks currently

gihan7575_0-1713249659058.png

This is how I want my collection page to look:

grabszxdf.jpg

I hope this makes sense, if it doesn't question me and I will explain myself.

https://lobonewyork.com/collections/all-bags

 
 
 
 
Gigi
Accepted Solution (1)

techlyser_web
Shopify Partner
1473 274 292

This is an accepted solution.

Hello @gihan7575 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-width: 750px){
    .facets-container-drawer {
         margin: 0 7rem !important;
    }
 }
 div#shopify-section-template--16704674201791__product-grid {
       margin-top: 0px !important;
 }
</style>

techlyser_web_0-1713250648015.png

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

Replies 3 (3)

techlyser_web
Shopify Partner
1473 274 292

This is an accepted solution.

Hello @gihan7575 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-width: 750px){
    .facets-container-drawer {
         margin: 0 7rem !important;
    }
 }
 div#shopify-section-template--16704674201791__product-grid {
       margin-top: 0px !important;
 }
</style>

techlyser_web_0-1713250648015.png

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
gihan7575
Explorer
57 1 5

Exactly what I needed. Thanks

 
Gigi

Moeed
Shopify Partner
3769 953 1185

Hey @gihan7575 

 

Follow these Steps:

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

<style>
@media screen and (min-width: 768px) {
.facets-container.facets-container-drawer {
    justify-content: space-around !important;
    column-gap: 70rem !important;
}
.facets-container-drawer .mobile-facets__wrapper {
    flex-grow: 0 !important;
}
}
</style>

RESULT:

Moeed_0-1713250553256.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️