Create a Collage with Repositionable or Dynamic Blocks in Shopify Page
WOW Shopify com IA
files/Channels_-_Growth_Social_Static_Affiliates_Affiliates-Merchants__320x480_7724dbcb-6bd4-46ed-8a59-93eb2012e8b0.png

Create a Collage with Repositionable or Dynamic Blocks in Shopify Page

See Other Products

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. 

  1. Go to Online store> Themes> Actions> Edit code
  2. 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 %}

  1. 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.

             

 

 

 

Copied!

Struggling with instructions?

Don't worry, we've got you covered for a reasonable price.

Contact us through "Chat with us" for a quote.

Relax as we handle it for you!

Voltar para o blogue

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…

Mike

Very Great Section for Front Page Design, could it applied on page also?

Jackie

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

Made4uo

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

Dylan

Deixe um comentário