In this tutorial, we are going to add a collage section were you can have blocks repositioned in Shopify page using grid layout.
I do hope that Shopify will make use of the grid to position blocks easily.
- Go to Online store> Themes> Actions> Edit code
- Go to Section folder, create a new section and name it custom-collage. Replace the code below, then click SAVE
{{ 'custom-collage.css' | asset_url | stylesheet_tag }} <div class="customCollage" style=" grid-template-rows: {% if section.settings.done_editing == true %} repeat(autofit, 5vw); {% else %} repeat({{section.settings.page_row}}, 5vw); {% endif %} " > {% for blocks in section.blocks %} <div class="collageBlock" style=" grid-column: {{blocks.settings.col1}} / span {{blocks.settings.col2}}; grid-row: {{blocks.settings.row1}} / span {{blocks.settings.row2}}; " > {% case blocks.type %} {% when 'collage_image' %} <div class="collageImageWrapper"> <img class="collageImage" src="{{blocks.settings.collage_image | img_url: 'master' }}"> </div> {% when 'collage_video' %} <div class="collageVideoWrapper"> <iframe class="collageVideo" src="//www.youtube.com/embed/{{blocks.settings.collage_video.id}}"></iframe> </div> {% when 'collage_title' %} <h1 class="collageTitle">{{ blocks.settings.collage_title }}</h1> {% when 'collage_content' %} <div class="textContent">{{ blocks.settings.collage_content }}</div> {% when 'collage_product' %} {% assign product = all_products[blocks.settings.collage_product] %} {% assign product_image = product.selected_or_first_available_variant %} <div class="collageProductWrapper"> <div class="collageProduct"> <img src="{{ product_image | img_url: "master" }}"> <span> {{ product.title }} </span> <span> {{ product.price | money }} </span> </div> </div> {% endcase %} </div> {% endfor %} </div> {% schema %} { "name":"Custom Collage", "settings":[ { "type":"range", "id":"page_row", "label":"Page height", "max":100, "min":5, "step":1, "default":12 }, { "type":"checkbox", "id":"done_editing", "label":"Click when done editing", "default":false } ], "blocks":[ { "name":"collage image", "type":"collage_image", "settings":[ { "type":"image_picker", "id":"collage_image", "label":"Collage image" }, { "type":"range", "id":"col1", "label":"Position left and right", "max":50, "min":1, "step":1, "default":1 }, { "type":"range", "id":"col2", "label":"Number of columns to occupy", "max":50, "min":1, "step":1, "default":1 }, { "type":"range", "id":"row1", "label":"Position up and down", "max":50, "min":1, "step":1, "default":1 }, { "type":"range", "id":"row2", "label":"Number of rows to occupy", "max":50, "min":1, "step":1, "default":1 } ] }, { "name":"collage video", "type":"collage_video", "settings":[ { "type":"video_url", "id":"collage_video", "label":"Collage video", "accept":[ "youtube" ] }, { "type":"range", "id":"col1", "label":"Position left and right", "max":50, "min":1, "step":1, "default":1 }, { "type":"range", "id":"col2", "label":"Number of columns to occupy", "max":50, "min":1, "step":1, "default":1 }, { "type":"range", "id":"row1", "label":"Position up and down", "max":50, "min":1, "step":1, "default":1 } ] }, { "name":"collage title", "type":"collage_title", "settings":[ { "type":"text", "id":"collage_title", "label":"Collage title" }, { "type":"range", "id":"col1", "label":"Position left and right", "max":50, "min":1, "step":1, "default":1 }, { "type":"range", "id":"col2", "label":"Number of columns to occupy", "max":50, "min":1, "step":1, "default":1 }, { "type":"range", "id":"row1", "label":"Position up and down", "max":50, "min":1, "step":1, "default":1 }, { "type":"range", "id":"row2", "label":"Number of rows to occupy", "max":50, "min":1, "step":1, "default":1 } ] }, { "name":"collage content", "type":"collage_content", "settings":[ { "type":"richtext", "id":"collage_content", "label":"Collage content" }, { "type":"range", "id":"col1", "label":"Position left and right", "max":50, "min":1, "step":1, "default":1 }, { "type":"range", "id":"col2", "label":"Number of columns to occupy", "max":50, "min":1, "step":1, "default":1 }, { "type":"range", "id":"row1", "label":"Position up and down", "max":50, "min":1, "step":1, "default":1 }, { "type":"range", "id":"row2", "label":"Number of rows to occupy", "max":50, "min":1, "step":1, "default":1 } ] }, { "name":"collage product", "type":"collage_product", "settings":[ { "type":"product", "id":"collage_product", "label":"Collage product" }, { "type":"range", "id":"col1", "label":"Position left and right", "max":50, "min":1, "step":1, "default":1 }, { "type":"range", "id":"col2", "label":"Number of columns to occupy", "max":50, "min":1, "step":1, "default":1 }, { "type":"range", "id":"row1", "label":"Position up and down", "max":50, "min":1, "step":1, "default":1 }, { "type":"range", "id":"row2", "label":"Number of rows to occupy", "max":50, "min":1, "step":1, "default":1 } ] } ], "presets":[ { "name":"Custom Collage" } ] } {% endschema %} |
- Go to Asset folder and create a new .css file. Name it custom.collage. Then paste the code below.
.customCollage { width: 100%; height: 100%; display: grid; gap: 15px; padding: 30px; grid-template-columns: repeat(12, 1fr); } .collageBlock { width: 100%; height: 100%; } .collageImageWrapper{ width: 100%; height: 100%; } .collageImage { width: 100%; height: 100%; object-fit: cover; } .collageVideoWrapper{ width: 100%; height: auto; padding-bottom: 60%; position: relative; } .collageVideo{ width: 100%; height: 100%; position: absolute; } .collageTitle { font-size: clamp(15px, 4vw, 40px); } .textContent{ width: 100%; height: 100%; overflow: hidden; font-size: clamp(10px, 2vw, 40px); } p { line-height: 1em; } @media screen and (min-width: 24.15em) { /* 21em "gate" * 1.15 font-size */ p { line-height: calc(1.3em + (1.5 - 1.3) * ((100vw - 21em) / (35 - 21))); } } @media (min-width: 40.25em) { /* 35em "gate" * 1.15 font-size */ p { line-height: 1.5em; } } /* @media only screen and (max-width: 1050px){ .textContent{ line-height: 1; } } */ @media only screen and (max-width: 300px){ .customCollage { display: flex; flex-direction: column; justify-content: center; } .customBlock { display: flex; } .collageTitle { display: flex; justify-content: center; margin: 0 auto; } } |
You are done. (“,)
I encountered some issues after creating the video. I added some codes to fix it.
Tips: Use the minimum page height as possible to prevent big gaps at the bottom.
Make sure to assign the number of cells (columns or rows) that fits the title or content.
Make sure you do not have a space in the content box editor. To prevent unnecessary gaps.
4 comentários
I tried inserting this code into my Dawn theme, and Shopify rejected it citing “Invalid JSON in tag ‘schema’”.
I tried to self-serve a quick fix by running it through a JSON formatter (https://jsonformatter.curiousconcept.com/#), and the result was unintelligible.
Has something changed in the past year to make this trick unusable? Is there a newer version? I really like this concept, and I’d love to be able to implement it on my site…
Very Great Section for Front Page Design, could it applied on page also?
Hi Dylan,
Since image are assigned to the grid area, you can manipulate its size to by occupying less or more grid areas. What I am talking about is the 13:30 part of the video. Regarding at mobile view, I cannot recreate your problem. Items should be displaying flex in mobile view as what we design in the last part of our css code
Hi There,
Tried installing this onto the dawn theme, and when i upload any image, they are just way too big.
And when you switch to mobile view, it only shows 1/8 of the photo..
Any solutions to fix this?
Thanks