Adding a Gallery Section for Shopify Website

Adding a Gallery Section for Shopify Website

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

Product Slider for Dawn Theme - No apps or subscript- Just a little bit of code

Add a product slider for Dawn theme, almost like Debut theme slider. No app or subscription neede...

Tab Component Section - Pure CSS

Add a tab component as a section which means, you can add it to any pages in Shopify 2.0, like pr...

Add WhatsApp to Shopify for Free - No App or Subscription

Add WhatsApp to your Shopify website without app or subscription. Personalize the icon with your ...

Product / Card Automatic Swipeable Carousel / Slider for Most of Shopify Theme

Add a carousel / slider for your product or card without an app or external library. This work in...

Awesome slideshow for most of Shopify Themes - Work well with Dawn

Awesome slideshow with 11 unique designs to choose from. No app or subscription needed. No coding...

Update your Product Page to Shopify 2.0 - Just like Dawn

Not ready for Dawn Theme but would like to update your Debut theme's product page just like Dawn?...

Create a Collage with Repositionable or Dynamic Blocks in Shopify Page

Positional items using grid. You can add video, images, custom content and product.

Create a Pure CSS Boundless Sliding Sidebar with NO APP or Subscription

Add a sliding side bar just like the Boundless theme. Works in most of the shopify themes. This i...

2 comments

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