Goal: Add an image gallery section on the Shopify homepage with up to 4 images per row (desktop) and 2 per row (mobile), each linking to product pages. Mockups and error screenshots were shared and are central to understanding the layout and issues.
Key implementation detail: The posted sectionâs schema had âmax_blocksâ: 3, limiting images to three. Multiple replies advised changing it to âmax_blocksâ: 4 to allow four images.
Reported issues:
Assistance offered: Several requests for store URLs to review live setups. One preview link was checked with no clear issue reported. A YouTube tutorial for a masonry gallery (Dawn and older themes) was suggested as an alternative.
Status: Partially addressed. Changing âmax_blocksâ enables four items, but broader errors (syntax, image attribute requirements, non-displaying grid) remain unresolved. No final, working, universally applicable code was shared; follow-up debugging per theme is needed.
Hi Guys,
I would like to insert an image gallery section in my template homepage, with a maximum of 4 images in a row which i can add links to product pages. Desktop mock up:
Ideally the gallery will then adjust to two in a row for mobile. Mobile mock up:
Does anyone have any liquid code i can use to create a new image gallery in my template homepage please?
Or, if anyone knows another way i can do this, that would also be great!
Thanks so much for any help you can give!!
Hi Ketan
I have realised that i actually already have this section in my template. However, i only have the ability to have 3 images. Is there a way i can change the liquid file below so that i can have 4?
Many thanks
<div data-section-id="{{ section.id }}" data-section-type="featured-images">
{% assign sectionBorder = section.settings.border %}
{% assign textShadow = section.settings.text-shadow %}
{% if section.blocks.size == 0 %}
{% assign featureCount = 2 %}
{% else %}
{% assign featureCount = 0 %}
{% for block in section.blocks %}
{% assign featureCount = featureCount | plus: 1 %}
{% endfor %}
{% endif %}
<div class="home-module home-feature-row
row-of-{{featureCount}} text-shadows-{{ textShadow }}
{% if sectionBorder %}has-border{% endif %}">
<div class="home-module-content {% if section.settings.title != blank %}home-module-has-heading{% endif %}">
{%
include 'home-section-title',
sectionTitle: section.settings.title,
%}
<div class="home-module-inline-items">
{% if section.blocks.size > 0 %}
{% for block in section.blocks %}
{% assign textAbove = block.settings.text-above | escape %}
{% assign heading = block.settings.title | escape %}
{% assign textBelow = block.settings.text-below | escape %}
{% assign url = block.settings.url %}
{% assign textColor = block.settings.text-color %}
{% assign textPosition = block.settings.text-position %}
{% assign image = block.settings.image %}
{%- capture image_html -%}
{% if image %}
{%
include 'rimg',
img: image,
size: '1440x640',
lazy: true
%}
{% else %}
{{ 'collection-1' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{%- endcapture -%}
<div class="home-feature">
<div class="home-feature-image">
{{- image_html -}}
</div>
{% if url != blank %}
<a class="home-feature-link" href="{{ url }}"></a>
{% endif %}
{% if textAbove != blank or heading != blank or textBelow != blank %}
<div class="home-feature-content text-color-{{ textColor }} text-positioned-{{ textPosition }} rte">
{% if textAbove != blank %}
<p>{{ textAbove }}</p>
{% endif %}
{% if heading != blank %}
<h3>{{ heading }}</h3>
{% endif %}
{% if textBelow != blank %}
<p>{{ textBelow }}</p>
{% endif %}
</div>
{% endif %}
</div>
{% endfor %}
{% else %}
{% for i in (1..2) %}
<div class="home-feature">
<div class="home-feature-image">
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'collection-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
<a class="home-feature-link" href="#"></a>
<div class="home-feature-content text-color-dark text-positioned-center rte">
<p>{{ 'onboarding.featured_images.text_above' | t }}</p>
<h3>{{ 'onboarding.featured_images.title' | t }}</h3>
<p>{{ 'onboarding.featured_images.text_below' | t }}</p>
</div>
</div>
{% endfor %}
{% endif %}
</div>
</div>
</div>
</div>
{% schema %}
{
"name": "Gallery",
"max_blocks": 3,
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Image gallery"
},
{
"type": "checkbox",
"id": "border",
"label": "Show border",
"default": false
},
{
"type": "checkbox",
"id": "text-shadow",
"label": "Show text shadow",
"info": "Only appears when \"text shade\" is set to \"light\"."
}
],
"blocks": [
{
"type": "feature",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "1440 x 640px .jpg recommended"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Image with text"
},
{
"type": "text",
"id": "text-above",
"label": "Subheading",
"default": "Subheading"
},
{
"type": "text",
"id": "text-below",
"label": "Text",
"default": "Text"
},
{
"type": "url",
"id": "url",
"label": "Link"
},
{
"type": "select",
"id": "text-color",
"label": "Text shade",
"options": [
{
"value": "light",
"label": "Light"
},
{
"value": "dark",
"label": "Dark"
}
],
"default": "light"
},
{
"type": "select",
"id": "text-position",
"label": "Align text",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center",
"info": "Will default to \"center\" if three features are shown in a row."
}
]
}
],
"presets": [
{
"category": "Image",
"name": "Gallery",
"blocks": [
{
"type": "feature"
},
{
"type": "feature"
}
]
}
]
}
{% endschema %}
Did you successfully create the gallery? Can you share the code?
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community! 
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
https://r372j4tjza415pbe-9291146.shopifypreview.com
Look at gallery page
yes i can see its proper whatâ issue?
"name": "Gallery",
"max_blocks": 3,
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Image gallery"
},
here âmax_blocksâ :3 changed To âmax_blocksâ: 4
thanks
Hi! I am trying to add the same image gallery section to my shopify theme but I am having trouble. I copied and pasted the exact code into my section liquid but when I try to add the section to the theme, I keep getting this first error. And when I try to upload a picture to the image gallery, I keep getting this second error. Really need some help, thank you.
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Hello,
I am having the same problem â I would like to create an image gallery exactly as described in the original post. I tried to copy the code provided into a custom liquid section but I received a syntax error message.
Has anyone got working code for an image gallery section, that when an image is clicked, it routes to the page for that specific product?
My store url is otherworldnotebooks.com
Would really appreciate any help!
sorry i canât see the gallery section on home page can you show me with issue details
Hi,
Add a masonry image gallery in your Shopify website. Work with Dawn and even the older themes.
Hello!
I tried the code. Looks good but does not display the grid of the images in the theme.
Can you help?
Change the max-blocks to have 4..
"name": "Gallery",
"max_blocks": 4,
"settings": [
This max block can be anything from 1-unlimited number. This will allow you to add more blocks in the customizer.
Nate
Hi, it doesnât work, it doesnât show images in customize editing and in the code it shows an error: âmissing width and height attributesâ
@ethnica oh sorry for that issue
can you please send your store url so i will check and let you know