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

NOTE: I made several updates and added several options that make it easy to personalized the section. With that being said, the code below will be different from the video.

 What you are buying:

  • Update code that does not need to go over the video
  • Clickable image option available

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away. 

 

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. I first thought clickable image is impossible with hover. I was able to add an option to make the image clickable.

<h2 class="customCollageTitle" style="color: {{ section.settings.collage_heading_color }}">{{section.settings.custom_collage_title}}</h2>
<div class="customCollage" style="--collage-box-shadow: {{ section.settings.collage_box_shadow }};">
{% 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 %}">
{% if blocks.settings.image_link != blank %}<a href="{{ blocks.settings.image_link }}">{% endif %}
<img class="collageImage" src="{{blocks.settings.collage_image | img_url: 'large' }}" alt="{{ blocks.settings.collage_image.alt }}" title="{{ blocks.settings.title }}">
{% if blocks.settings.image_link != blank %}</a>{% endif %}
{% if blocks.settings.title != blank %}
<span class="customCollageImageTitle{% if forloop.index == 2 %} customCollageSecondImage{% endif %}{% if forloop.index == 6 or forloop.index == 9 or forloop.index == 10 %} customCollageBottomImage{% endif %}"
style="color: {{ section.settings.collage_image_text_color }}">
{{ blocks.settings.title }}
</span>
{% endif %}
</div>
{% endfor %}
</div>
<style>
.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;
padding: 1vw;
background: white;
box-shadow: 0 0 3vw var(--collage-box-shadow);
}

.customCollageImageTitle {
display: none;
text-align: center;
position: relative;
top: 50%;
left: 50%;
line-height: 1.1;
font-size: clamp(12px, 2vw, 18px);
transform: translate(-50%,-50%);
font-weight: 700;
}

span.customCollageImageTitle.customCollageSecondImage {
top: 0;
left: 0;
transform: translate(0%,0%);
margin-top: clamp(1rem, 4vw, 4rem);
}

span.customCollageImageTitle.customCollageBottomImage {
top: calc(100% - clamp(1rem, 4vw, 4rem));
left: 0;
transform: translateY(-100%);
}

.customBlock:hover .customCollageImageTitle{
display: block;
}

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

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

</style>
{% schema %}
{
"name": "Custom Collage",
"settings": [
{
"type": "text",
"id": "custom_collage_title",
"label": "Custom collage title"
},
{
"type": "color",
"id": "collage_heading_color",
"default": "#f08080",
"label": "Custom collage title color"
},
{
"type": "color",
"id": "collage_image_text_color",
"default": "#f08080",
"label": "Image text color"
},
{
"type": "color",
"id": "collage_box_shadow",
"default": "#f08080",
"label": "Custom collage box shadow color"
}
],
"max_blocks": 11,
"blocks": [
{
"name": "collage image",
"type": "collage_image",
"settings": [
{
"type": "text",
"id": "title",
"label": "Collage title",
"info": "Leave this blank if you do not want image title to show"
},
{
"type": "image_picker",
"id": "collage_image",
"label": "Collage image"
},
{
"type": "url",
"id": "image_link",
"label": "Image link",
"info": "Leave this link blank if you do not want images to be clickable"
}
]
}
],
"presets": [
{
"name": "Custom Collage"
}
]
}
{% endschema %}

 

4. Make sure you click SAVE.

5. Your done! All left is customizing your gallery in theme editor. The section name is Custom Collage, when adding the section in your theme editor.

 

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

Updates: 08/30/22 Added an option to change the box shadow, text colors, and make the image clickable if link is provided. I also added a text that will show when the image is hovered. 

 

Copied!
Back to blog

4 comments

Hi @AMY RANESES,

There is a link option for this. Just go to the theme settings

Made4Uo

is it possible that the images are connected to links? different links for different images? thanks

Amy Raneses

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

Leave a comment