Adding a Gallery Section for Shopify Website

With the new Shopify 2.0, Dawn theme has this collage section but it is only limited to three items. In this tutorial, we are going to create a section with collage of 11 pictures. You can create as many as you want. I will tell in details on how to do that. 

We are going to use grid and use the grid-area to reposition images using the theme editor. We will be naming our grid area so it corresponds to the block index and will be able to reposition images easily to a different grid-area.

In this tutorial, we are going to talk about the following:

  • making a template for your collage
  • naming grid-areas
  • setting up the grid-area to match the placement of the blocks in the theme editor, using forloop.index
  • using position absolute to position image to the center
  • fixing the css jitter
  • using the font size clamp() to have a responsive font
  • creating a .css file and link the file to your section

 

1. Go to your Online store > Themes > Actions > Edit code

2. Go to Section folder, create a section, you can name it what ever you want

3. For not clickable image, paste the code below. If you want to have a clickable image, please scroll below for the code

NOT Clickable Image code:

 <link href="{{"custom-collage.css" | asset_url }}" type="text/css" rel="stylesheet">
<h1 class="customCollageTitle">{{section.settings.custom_collage_title}}</h1>

<div class="customCollage">
{% for blocks in section.blocks %}
<div class="customBlock" style="grid-area:
{% case forloop.index %}
{% when 1 %} a
{% when 2 %} b
{% when 3 %} c
{% when 4 %} d
{% when 5 %} e
{% when 6 %} f
{% when 7 %} g
{% when 8 %} h
{% when 9 %} i
{% when 10 %}j
{% when 11 %}k

{% endcase %} ">
<img class="collageImage" src="{{blocks.settings.collage_image | img_url: 'large' }}">

</div>
{% endfor %}
</div>


{% schema %}
{
"name": "Custom Collage",
"settings": [
{
"type": "text",
"id": "custom_collage_title",
"label": "custom collage title"
}
],
"max_blocks": 11,
"blocks": [
{
"name": "collage image",
"type": "collage_image",
"settings": [
{
"type": "text",
"id": "title",
"label": "collage title"
},
{
"type": "image_picker",
"id": "collage_image",
"label": "collage image"
}
]
}
],
"presets": [
{
"name": "Custom Collage"
}
]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

 

4. Go to Asset Folder, and create a new .css file, name it "custom-collage"

5. Open and paste the code below.

 

 .customCollage{
width: 100%;
height: 100%;
display: grid;
gap: 15px;
padding: 10px 50px 50px;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(3, 15vw);
grid-template-areas: "a a b b c d"
"e f b b g g"
"h f i j j k";
position: relative;
}

.collageImage{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px;
}

.customBlock:hover .collageImage {
position: absolute;
width: 40%;
height: auto;
inset: 0;
margin: auto;
border: 15px solid white;
box-shadow: 0 0 50px crimson;
}

.customCollageTitle{
text-align: center;
margin-bottom: 0;
font-size: clamp(15px, 5vw, 45px);
}

@media only screen and (max-width: 600px){
.customCollage{
gap: 5px;
}

.customBlock:hover .collageImage {
border: 5px solid white;
}

 

I first thought clickable image is impossible with hover. I was able to add a link inside the store and outside the store. If you want to click the image, at the step 3, paste the code below instead. Then follow the rest. 

Clickable Image code:

  <link href="{{"custom-collage.css" | asset_url }}" type="text/css" rel="stylesheet">
<h1 class="customCollageTitle">{{section.settings.custom_collage_title}}</h1>

<div class="customCollage">
{% for blocks in section.blocks %}
<div class="customBlock" style="grid-area:
{% case forloop.index %}
{% when 1 %} a
{% when 2 %} b
{% when 3 %} c
{% when 4 %} d
{% when 5 %} e
{% when 6 %} f
{% when 7 %} g
{% when 8 %} h
{% when 9 %} i
{% when 10 %}j
{% when 11 %}k

{% endcase %} ">
<a href="
{% if blocks.settings.link == "image_link"%} {{blocks.settings.image_link}} {% endif %}
{% if blocks.settings.link == "web_link"%}{{blocks.settings.web_link }}{% endif %}
">
<img class="collageImage" src="{{blocks.settings.collage_image | img_url: 'large' }}">
</a>
</div>
{% endfor %}
</div>


{% schema %}
{
"name": "Custom Collage",
"settings": [
{
"type": "text",
"id": "custom_collage_title",
"label": "custom collage title"
}
],
"max_blocks": 11,
"blocks": [
{
"name": "collage image",
"type": "collage_image",
"settings": [
{
"type": "text",
"id": "title",
"label": "collage title"
},
{
"type": "image_picker",
"id": "collage_image",
"label": "collage image"
},
{
"type": "select",
"id": "link",
"label": "Select where image to link",
"default": "image_link",
"info" : "If other website, provide Web Link. If within store, provide Store Link",
"options": [
{
"value": "image_link",
"label": "within store"
},
{
"value": "web_link",
"label": "Other website"
}
]
},
{
"type": "url",
"id": "image_link",
"label": "store link"
},
{
"type": "text",
"id": "web_link",
"info" : "Type https://. Copy sample format (https://www.example.com)",
"label": "outside link"
}
]
}
],
"presets": [
{
"name": "Custom Collage"
}
]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

Your done! All left is customizing your gallery in theme editor.

Do not forget to subscribe in my youtube channel (",)

Leave us a comment