I want to resize the collection list image distribution. I currently have a 3 column squared ratio

Store Design
, ,

Topic summary

  • Goal: Change the collection list from a 3-column square grid to a two-column layout with one tall image on the left and two stacked images on the right, matching the left column’s total height.

  • Access: The store was initially password-protected, then unlocked to allow review.

  • Implementation: A custom code snippet was added in theme.liquid (within the ) to achieve the new layout. Screenshots were shared to illustrate the desired and resulting designs. The exact code wasn’t published broadly in the thread.

  • Refinements: After the first snippet worked, follow-up adjustments were requested to equalize column widths and reduce image heights. A replacement snippet was provided to address these tweaks.

  • Second request: Another participant asked for the same layout under a specific homepage section, shared a link and password, but later decided to abandon the layout change.

  • Outcome/Status: The original store achieved the desired layout with custom, store-specific code. No universal code solution was posted. The secondary request was withdrawn. The discussion appears resolved for the original case and closed without open questions.

Summarized with AI on December 28. AI used: gpt-5.
1

I currently have a 3 column squared ratio as shown below, but would like to make it a 2 column, 1st picture height (double the size of the other 2 collection pictures) and the other 2 pictures on the second column one above the other, both adding up to the same height of the 1st picture.

How is looking right now
How is looking right now1155×433 590 KB

How I want it to look
How I want it to look601×421 400 KB

2

Hey @Christian_R ,

Can you share the link to your store? Thanks!

3

https://066cfc-10.myshopify.com/

found a partial solution code, but the width of the second column is not the same as the first

4

Hey @Christian_R ,

The store is password protected, can you share the password or remove it temporarily?

5

my bad, removed.

6

Hey @Christian_R ,

Keep the code that you already found, I’ve just added on top of it.

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1710956191132.jpeg
ThePrimeWeb_0-1710956191132.jpeg1253×933 87.9 KB

7

It worked! Thanks a lot! How can I make the width of the columns the same? and Reduce the height of the pictures? That would be really helpfull!

8

Replace the code above with this.
9

Hi, love the look. I would like to do the exact same, but i am struggling. I see that Christian had found code before you added to it. We do not have access to that code. I have added all this available code and it didn’t work. Could you please supply me with the code to make this whole process happen?

Thanks.

10

Hey @LukeMac ,

That code is very specific to their store. Can you share the link to you store and share a screenshot of where you need this layout?

11

Hi PrimeWeb, thanks for getting back to me. Here is my link: https://itscalledfragrances.com/ . The password is: auskao

12

I need it to be under my banner. You will see the section is titled: “WHAT ARE YOU LOOKING FOR”. I would like the same look as Christian’s store please, with the “FOR HIM & HER” being the longer/portrait thumbnail in the collection. Thanks.

13

Don’t stress, I have changed my mind about the layout. Thanks for the help/assistance.