How can I edit my collection page grid to display 3 or 4 images?

Store Design
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.

2

@LBonn

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

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

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

3

Thank you.

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

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);
}
5

Thank you so much.

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

6

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.

7

KetanKumar - can you offer a solution?

8

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
Topbright_1-1627611006931.png1477×884 64.1 KB

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
Topbright_0-1627610909030.png1083×1209 64.6 KB

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