Shopify themes, liquid, logos, and UX
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.
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.
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);
}
Thank you so much.
I’ll try that and let you know how I get on
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.
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
Add a name collection.your_name.liquid
then you need to add a collection page and assign the new template that you created
You can copy the same code in the collection.liquid and put it in the new one with the new classes modification.
KetanKumar - can you offer a solution?
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024