Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Make Product Grid Full Width on Refresh Theme

Solved

Make Product Grid Full Width on Refresh Theme

ii_cooks
Excursionist
19 1 3

Hi - I am trying to make the Product Grid show up as full width, but I can't figure out where to change this. I've played around a little with the main-collection-product-grid.liquid but I haven't found anything that will make the Product Grid go full width.

Screenshot 2023-04-25 at 6.15.52 PM.png

 

The home page with the Featured Collection has a button to make products full width and this is how I want the product section to look as well. Any help would be greatly appreciated! Thank you!

https://thecookskit.myshopify.com/
PW is password

 

Screenshot 2023-04-25 at 6.16.08 PM.png

Accepted Solutions (2)
PageFly-Richard
Shopify Partner
4801 1085 1753

This is an accepted solution.

Hi @ii_cooks 

Got it my friend, now can you help me replace the code you were added with this one please?

<style>
.collection.page-width {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 1.5rem !important;
}
</style>

Here's how it look 

PageFlyRichard_0-1682473247461.png

 

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

PageFly-Richard
Shopify Partner
4801 1085 1753

This is an accepted solution.

Hi @ii_cooks, yes of course, please replace the code you added with this one

<style>
.collection.page-width, .collection-list-wrapper.page-width {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 1.5rem !important;
}
</style>

 

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 6 (6)

PageFly-Richard
Shopify Partner
4801 1085 1753

Hi @ii_cooks 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.collection.page-width {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
</style>

PageFlyRichard_0-1682472618587.png

 

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

ii_cooks
Excursionist
19 1 3

Thank you so much, that worked!!
Just one more question please, this made the images go all the way to the edge of the window. On the home page featured collection there is a bit of white space on the right and left, is it possible to that amount on the product grid?

I tried modifying the code to be 1px of padding, which added white on the side, but it was too much.

Or if that's not possible, can I make the home page featured collection to go all the way to the side of the window? Basically I just want them to match.

Screenshot 2023-04-25 at 6.34.12 PM.pngScreenshot 2023-04-25 at 6.34.21 PM.png

 

PageFly-Richard
Shopify Partner
4801 1085 1753

This is an accepted solution.

Hi @ii_cooks 

Got it my friend, now can you help me replace the code you were added with this one please?

<style>
.collection.page-width {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 1.5rem !important;
}
</style>

Here's how it look 

PageFlyRichard_0-1682473247461.png

 

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

ii_cooks
Excursionist
19 1 3

Amazing, thank you so much for your help!! 
And one more question if I may please. 
On this page, https://thecookskit.myshopify.com/pages/shop-by-item I have a Collection List, is it possible to make this full width as well?

Screenshot 2023-04-25 at 6.45.50 PM.png

PageFly-Richard
Shopify Partner
4801 1085 1753

This is an accepted solution.

Hi @ii_cooks, yes of course, please replace the code you added with this one

<style>
.collection.page-width, .collection-list-wrapper.page-width {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 1.5rem !important;
}
</style>

 

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

ii_cooks
Excursionist
19 1 3

Worked perfectly, thank you so much!!