Hi,
How do I add additional image blocks to the Collage section in Crave?
URL: https://ol5funuifcwog2co-74242359616.shopifypreview.com (Pass: dannyhoo)
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.
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.
1 Like
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;
}
}