Shopify themes, liquid, logos, and UX
Hi, I've been looking online a lot but couldn't find a clear guide.
I just want to make a 3 column grid, with pictures of all the same size for my collections page.
What section am I supposed to modify to do so and what lines with what code please ?
You won't find a clear guide because everyone's store is generally different, so there isn't a catch all of "this is how you make a 3 column grid". The file you're going to want to edit is "collection.liquid" in your templates folder, that's really all I can tell you. I can get your products into a 3 column grid, but it looks like your images are all different dimensions which causes the height of the containers to be different and the prices to display at different heights as well. If you want your images to be the same size you're going to have to commit to a specific set of dimensions. It'll probably take a redesign to achieve what you need.
In addition to what Ninthony wrote, I might add that since you're using Brooklyn theme, you have the option to change your collection pages > collection pages section to be grid based styles instead of collage. That is set to 3 columns on desktop view, 2 tablet and 1 mobile.
Hello Sir, this part of your reply: collection pages > collection pages section to be grid based styles instead of collage. That is set to 3 columns on desktop view, 2 tablet and 1 mobile.
Is there any way to set the columns so that in mobile, we can increase it from 1 to 2?
Hi and thanks for your fat replies guys !
I will eventually make all the images the same size if that can help.
What sort of coding lines should I put in the collection.liquid to achieve what I need ?
I really can't find this "grid" option for Brooklyn, I really think I've looked everywhere, could you give me a clue where I can find this option ?
In your admin, navigate to Online Store > Themes > Customize. Once in the customizer, the top bar, to the right of the Shopify logo contains a drop down which defaults to Home page. Select Collection pages instead and then in the right panel you should see 3 sections: Header, Collections pages and Footer. Select the Collection pages section. Now you will have a select box for Grid style where you can change it from Collage to Grid.
I never even know this configuration existed. I had already edited the mark up to match a 3 column grid! Lol
I was thrilled to see your response. Please advise how I can change the code to result in a 3 column grid on tablets.
As described here:
there isn't one single solution bc it depends on your theme, templates and existing CSS.
You would need to provide the theme name you are using, or better a URL to your site.
The overall concept is straight-forward:
Like @Lucas24 I am using the Brooklyn theme.
I will take a deeper dive into your discoveries. Thanks!
See attached screenshot - Brooklyn already has the classes for this built-in to the CSS:
Make sure you have tried this approach first:
Sorry for the misunderstanding, but I think we may be talking about two separate issues. It's all my fault. My issue is that customers on a tablet will see a 3-column grid in landscape format and a 2-column grid in the portrait format.
I want it to be a 3-column grid, no matter the format.
Thank you to everyone who participated in our AMA with Klaviyo. It was great to see so man...By Jacqui May 30, 2023
Photo by Marco Verch Sales channels on Shopify are various platforms where you can sell...By Ollie May 25, 2023
Summary of EventsBeginning in January of 2023, some merchants reported seeing a large amo...By Trevor May 15, 2023