gallery image section

Adding a Gallery Section for Shopify Website

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: Compatible on most Shopify themes, from Debut to Dawn 2.0.

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 (",)

Copied!
Voltar para o blogue

2 comentários

Yes, we can add more than 11 photos, but we have to think of placement and the size of the image. You can drag and drop the images in the block so you can reposition it

Made4Uo

Can you share how to make it allow for more than 11 photos? And is it possible for the newest image added to be first in the grid. So the older photos move down the page? Thank you!

Aram Susong

Deixe um comentário