Minimal-How to change the grid size or gird product list at home page ?

New Member
3 0 0

HI

I am facing a problem in Minimal theme. I added collection list on my home page, I have total 5 categories. At the home page, the collection list are 5 in a row and looking small. i want to show 3 in upper and 2 in lower and change the size to more bigger. How can i do that? please check the image to understand? mention which code file i have to edit and how?

0 Likes
Shopify Staff
Shopify Staff
768 42 158

Hi, Suprovat !

Katy here from Shopify. Thanks for joining our forum community-  wishing you a warm welcome.

I would like to help you out with this, and believe that we can do so from within your theme customizer, without the need to adjust your code. 

To start, if you could go to your admin > online store > themes > customize theme:

Here we will need to adjust the content slightly.

With your homepage collection list, if you remove some list items, then this will automatically increase the size of the remaining items within the framework.

In this case, what you could do is remove the content for both 'Fishing Lure' and 'Fishing Tool' from your collection list like so for example: 

From here, the size of the remaining: Fishing Reel, Fishing Rod and Fishing Line should now increase accordingly. 

Then, below this you can create an additional collection list and add your remaining two collections (Fishing Lure and Fishing Tool) to this list instead. 

Do let me know if this suits and also how you're finding things in general. I'd love to hear your feedback.

Cheers,
Katy
 

Please note: This account is no longer regularly monitored.
 - If you need assistance please do start a new topic (referencing an older topic/post if you find this helpful).
 - Thank you for your understanding. We hope you enjoy exploring the Community.
 - To learn more visit the Shopify Help Center or the Shopify Blog.

0 Likes
New Member
3 0 0

Hi

Thanks for the great help. But Still, have some problem.
If I customize my grid according to your instruction 3+2 then the size is increased and solve in web view but in mobile view, one grid section appears empty. Then it increased the number of grid 3+3. yes, the web view is good but in the mobile view one grid section appear empty. Please check the attachment 1 
Also Tried in a different way 4+#1 or 4+#2 in that case the gird size solved in mobile view but in web view #1or #2 grid appears big. 
I want to keep the same grid size for Like 4 grid size. 
Please check the attachment 2. 
Also, there is a maximum 5 (odd number ) grid in minimal theme. but i think if i change this to 6/6 grid it may be solved. How can i do this? 
Looking forward to your response.
Thanks 

0 Likes
New Member
3 0 0

Attachment 2 uploaded first 
This is attachment 1 

0 Likes
Shopify Staff
Shopify Staff
768 42 158

Thanks for getting back to me, Suprovat and I do see what you mean here. Apologies for any confusionon my part, in this case we will certainly need to adjust the grid for you. 

To do so, could you access your theme's code: admin > online store > theme > actions > edit code > sections > list-collections-template.liquid

In here if you could look for the following code:

By editing this, you can separately define the width, adjusting how it appears on both desktop and on mobile.

So, for example if you would like to have 3 products per row on desktop and 2 products per row on mobile to avoid the empty space you would  need to set this as:

`medium-down--one-third small--one-half`

This allows you to adjust the grid accordingly.

We have a handy guide here which goes into how the grid works here, along with references for each size which you should help you in adjusting this to your own preferences. 

Do let me know how this goes for you, or if you need some help.

Katy

Please note: This account is no longer regularly monitored.
 - If you need assistance please do start a new topic (referencing an older topic/post if you find this helpful).
 - Thank you for your understanding. We hope you enjoy exploring the Community.
 - To learn more visit the Shopify Help Center or the Shopify Blog.

0 Likes
New Member
7 0 0

hi! what about on the home page collection? i want it to be 2 products per row on mobile but can't figure out where to change it. thank you!


@Katy wrote:

Thanks for getting back to me, Suprovat and I do see what you mean here. Apologies for any confusionon my part, in this case we will certainly need to adjust the grid for you. 

To do so, could you access your theme's code: admin > online store > theme > actions > edit code > sections > list-collections-template.liquid

In here if you could look for the following code:

By editing this, you can separately define the width, adjusting how it appears on both desktop and on mobile.

So, for example if you would like to have 3 products per row on desktop and 2 products per row on mobile to avoid the empty space you would  need to set this as:

`medium-down--one-third small--one-half`

This allows you to adjust the grid accordingly.

We have a handy guide here which goes into how the grid works here, along with references for each size which you should help you in adjusting this to your own preferences. 

Do let me know how this goes for you, or if you need some help.

Katy


 

0 Likes
New Member
3 0 0

Why can't we tell how many products we want on collection pages? There's no way to change it from the default 5 but I don't see how I can adjust this? You can do this in the debut theme but not here???? Why? It seems so rudimentary. How can I change this? I want three across and big squares. PLEASE HELP!

0 Likes
New Member
5 0 0

Hey I want to increase grid size of my collection list as you can see it only covers upto some extent on the whole screen I want it spread in its entire width 

Can someone help 

IMG_20200616_170232__01.jpg

 

0 Likes
Excursionist
15 0 2

Hello, 

 

Did u managed to solve the issue? I know it's been a few months since you posted but I figured it out on my own so I can help you to expand the width, tho, I don't know yet how to increase image size for the collections, still looking for this.

For the website to go full width, search for timber.scss.liquid and you should have this code at line 209. Just add 100% instead of px value.

{% if settings.enable_wide_layout %}
$siteWidth: 100%;
{% else %}
$siteWidth: 100%;
{% endif %}

0 Likes