How do I add additional Image blocks to the Collage section in Crave?

[dan_hoo]

Hi,

How do I add additional image blocks to the Collage section in Crave?

URL: https://ol5funuifcwog2co-74242359616.shopifypreview.com (Pass: dannyhoo)

[BSS-Commerce · Accepted solution]

Hi @dan_hoo

Please follow these steps:

Step 1: At Shopify Admin, select Online Store -> Themes -> Edit Code

Step 2: Find and open the file collage.liquid

Step 3: Press Ctrl + F, then enter this word in the search bar, click Next.

Step 4: At the line just found, you can adjust the number of image blocks in the Collage section (Shopify's default is 3). Here we will edit to 5 image blocks:

Here is the final result:

We hope this can help you.

[Lucie11]

Hello, 

is it possible to change the layout in collage like this?

I added two additional items, but the layout doesnt look good at this moment.

[kjjd84]

in order to fix that, you need to update the collage.css file.

replace the 2 @media screen sections with this:

@media screen and (min-width: 750px) {
  .collage {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr; /* Larger column for the first image, smaller columns for the rest */
    grid-template-rows: repeat(2, auto); /* Two rows for right-side smaller images */
    grid-gap: var(--grid-desktop-horizontal-spacing);
  }

  /* Large image on the left */
  .collage__item:nth-child(1) {
    grid-column: 1 / 2; /* Span the first column */
    grid-row: 1 / 3; /* Span two rows */
  }

  /* Small images on the right */
  .collage__item:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1;
  }

  .collage__item:nth-child(3) {
    grid-column: 3 / 4;
    grid-row: 1;
  }

  .collage__item:nth-child(4) {
    grid-column: 2 / 3;
    grid-row: 2;
  }

  .collage__item:nth-child(5) {
    grid-column: 3 / 4;
    grid-row: 2;
  }
}

@media screen and (max-width: 749px) {
  .collage--mobile {
    display: grid;
    grid-template-columns: 1fr; /* Single column layout for smaller screens */
    grid-row-gap: var(--grid-mobile-vertical-spacing);
  }

  .collage__item {
    grid-column: span 1;
  }
}