Minimal - Collection Pages Grid

LBonn
Tourist
5 0 1

I do no write code but feel confident to 'edit' with instructions.

My Collection Page (as in once I click through to a specific collection on my site) has a grid with 5 images wide. 

How can I change it to 3 or maximum 4 images wide on the grid?

Thanks in advance for any assistance.

KetanKumar
Shopify Partner
23116 2326 8565

@LBonn 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
LBonn
Tourist
5 0 1

Thank you.

My url is: https://jewellerybylinda.co.uk/

0 Likes
Topbright
Excursionist
32 4 4

Hello, I checked your code, you can achieve that easily with a small update on CSS file,

 

in your CSS file "theme.scss.liquid" check for .grid-link__container

/* theme.scss.liquid */

.grid-uniform.grid-link__container {
    display: grid;
    grid-template-columns: repeat(3 ,1fr); // Number 3 is the columns that you want, you can change to any number
}

 

then search for "wide--one-fifth"

/* @media only screen and (min-width: 1250px) */
.wide--one-fifth {
    width: 100%;
}

/* @media only screen and (min-width: 769px) and (max-width: 1250px) */
.large--one-quarter {
    width: 25%;
}

/* @media only screen and (max-width: 768px) */
.medium-down--one-half {
    width: 100%;
}

 

One last thing you need to do to change from 3 colm to 1 for mobile

/* @media only screen and (max-width: 768px) */
.grid-uniform.grid-link__container {
    grid-template-columns: repeat(1 ,1fr);
}

 

 

0 Likes
LBonn
Tourist
5 0 1

Thank you so much.

I’ll try that and let you know how I get on

0 Likes
LBonn
Tourist
5 0 1

Topbright - I tried this but it affected all types of things, including the layout of the front home page.

I only need to change the layout of the images on the page accessed by clicking on an individual collection on the collections page.

0 Likes
LBonn
Tourist
5 0 1

KetanKumar - can you offer a solution?

0 Likes
Topbright
Excursionist
32 4 4

Well, in that case, you need to add a new class to the collection, I don't know the structure of your liquid code but I assumed it's on collection.liquid, you gonna search for grid-uniform in your code, remove it, and a new class name then remove more classes for child grid__item medium-down--one-half post-large--one-third. 

/* theme.scss.liquid */

.your_new_class_name {
    display: grid;
    grid-template-columns: repeat(3 ,1fr); /* Number 3 is the columns that you want, you can change to any number */
    grid-gap: 26px; /* Space between columns  */
}

 

Mobile

/* @media only screen and (max-width: 768px) */
.your_new_class_name  {  /* NOTE: same as the first one that you add  */
    grid-template-columns: repeat(1 ,1fr);
}

 

Note: this will affect all collections if you want it to be in just one collection you need to create a new one in theme editor > Template then add a new Template

Topbright_1-1627611006931.png

Add a name collection.your_name.liquid

then you need to add a collection page and assign the new template that you created

Topbright_0-1627610909030.png

 

You can copy the same code in the collection.liquid and put it in the new one with the new classes modification.

 

0 Likes