Changing collection page to full width

Solved

Changing collection page to full width

Joelc09
Tourist
15 0 1

Hi there,

 

I have been checking through these forms and I'm still looking for the correct solution. I am using the Sahara template and my site can be found here: https://ff3bbd-4.myshopify.com/

What I'm hoping to achieve is to have my shop/collection items go full-width, like the rest of the website I have built so far - is this possible or not?

 

Thank you in advance

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
2139 616 506

This is an accepted solution.

Hey @Joelc09,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.collection .container {
    max-width: unset !important;
    padding: 0 !important;
}

@media only screen and (min-width: 990px) {
    facet-filters-form {
        padding: 0 30px !important;
    }    
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1716271828201.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 6 (6)

Moeed
Shopify Partner
6041 1637 1956

Hey @Joelc09 

 

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>
.collection .container {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
}
</style>

RESULT:

Moeed_0-1716271518325.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 Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


ThePrimeWeb
Shopify Partner
2139 616 506

This is an accepted solution.

Hey @Joelc09,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.collection .container {
    max-width: unset !important;
    padding: 0 !important;
}

@media only screen and (min-width: 990px) {
    facet-filters-form {
        padding: 0 30px !important;
    }    
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1716271828201.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Joelc09
Tourist
15 0 1

This one is working best so far as the filters at the top are padded out from the edge of the screen.

Only 1 issue - I have a 27inch monitor, as you can see in the attached reference once I go past the breaking point the padding starts to open up. By what I can see its anything over around 2170px width

Screenshot 2024-05-21 162510.png

ThePrimeWeb
Shopify Partner
2139 616 506

Hey @Joelc09,

 

You can also add on this code using the same steps mentioned above, don't remove the previous one. 

 

<style>
.collection .media--aspect-ratio>*, .media--aspect-ratio img {
    width: 100% !important;
}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Joelc09
Tourist
15 0 1

This worked perfectly mate - glad I jumped on here to ask, I wouldn't have been able to do this!

 

Thank you very much

ZestardTech
Shopify Partner
5835 1058 1397

Hello There,

 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

 

.collection .container {
margin: 0 !important;
padding: 0 !important;
max-width: 100% !important;
}

 

ZestardTech_0-1716271988658.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing