- \n
- Directly add an image gallery section – <\/strong>Using an app provides a significant advantage with diverse pre-built sections (free and paid), enhancing functionality beyond standard themes for richer content and more customization without extensive coding.<\/li>\n<\/ul>\n\n\n\n
How to Add a Shopify Image Gallery via Code?<\/h2>\n\n\n\n
Here are the steps to create a product image gallery section using the custom code.<\/p>\n\n\n\n
Step 1: Create a New Gallery Section in Shopify<\/h3>\n\n\n\n
In your Shopify admin, navigate to Online Store > Themes > \u2026(three dots) > Edit code.<\/strong><\/p>\n\n\n
\n![\"Navigate](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/click-customize-2.png\")
<\/figure>\n<\/div>\n\n\nIn the Sections directory, click Add a new section<\/strong> and name it gallery-section.liquid<\/strong>.<\/p>\n\n\n\n
Step 2: Add the Code to the Section<\/h3>\n\n\n\n
Paste this code in the newly created gallery-section.liquid<\/strong> file.<\/p>\n\n\n\n
This code creates a basic gallery section with a title and a block for each image.<\/p>\n\n\n\n
{{ 'section-gallery.css' | asset_url | stylesheet_tag }}\n\n<div class=\"gallery-section\">\n <div class=\"page-width\">\n {% if section.settings.title != blank %}\n <h2 class=\"gallery-section__title\">{{ section.settings.title | escape }}<\/h2>\n {% endif %}\n\n <div class=\"gallery-grid\">\n {% for block in section.blocks %}\n <div class=\"gallery-grid__item\">\n {% if block.settings.image != blank %}\n <div class=\"gallery-image-wrapper\">\n <img\n src=\"{{ block.settings.image | img_url: '1024x' }}\"\n alt=\"{{ block.settings.image.alt | escape }}\"\n loading=\"lazy\"\n class=\"gallery-image\"\n >\n <\/div>\n {% if block.settings.caption != blank %}\n <p class=\"gallery-caption\">{{ block.settings.caption | escape }}<\/p>\n {% endif %}\n {% else %}\n {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}\n {% endif %}\n <\/div>\n {% endfor %}\n <\/div>\n <\/div>\n<\/div>\n\n{% schema %}\n{\n \"name\": \"Gallery\",\n \"tag\": \"section\",\n \"class\": \"section-gallery\",\n \"settings\": [\n {\n \"type\": \"text\",\n \"id\": \"title\",\n \"label\": \"Heading\",\n \"default\": \"Image Gallery\"\n }\n ],\n \"blocks\": [\n {\n \"type\": \"image\",\n \"name\": \"Image\",\n \"settings\": [\n {\n \"type\": \"image_picker\",\n \"id\": \"image\",\n \"label\": \"Image\"\n },\n {\n \"type\": \"text\",\n \"id\": \"caption\",\n \"label\": \"Image caption\"\n }\n ]\n }\n ],\n \"presets\": [\n {\n \"name\": \"Image Gallery\",\n \"category\": \"Image\",\n \"blocks\": [\n {\n \"type\": \"image\"\n },\n {\n \"type\": \"image\"\n },\n {\n \"type\": \"image\"\n }\n ]\n }\n ]\n}\n{% endschema %}\n<\/pre>\n\n\n\nAlso, add CSS for modern and enhanced styling.<\/p>\n\n\n\n
To do so, in the Assets<\/strong> directory, create a file named section-gallery.css <\/strong>and paste the following code. <\/p>\n\n\n\n
This CSS file will control the layout and appearance of your gallery.<\/p>\n\n\n\n
.gallery-section {\n padding: 50px 0;\n}\n\n.gallery-section__title {\n text-align: center;\n margin-bottom: 30px;\n}\n\n.gallery-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n}\n\n.gallery-grid__item {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.gallery-image-wrapper {\n width: 100%;\n overflow: hidden;\n border-radius: 8px;\n}\n\n.gallery-image {\n width: 100%;\n height: auto;\n display: block;\n}\n\n.gallery-caption {\n margin-top: 10px;\n text-align: center;\n font-size: 14px;\n color: #555;\n}\n\n.placeholder-svg {\n width: 100%;\n height: 250px;\n background-color: #f0f0f0;\n border-radius: 8px;\n}\n<\/pre>\n\n\n\nStep 3: Customize Using the Theme Editor <\/h3>\n\n\n\n
Head to the theme editor, Online store > Themes > Customize. <\/strong>Find and <\/strong>add the section we created.<\/p>\n\n\n\n
Then, from here, add the image you want to display in the image gallery. To make sure your visuals look sharp and load fast, check out our Shopify Image Sizes Guide<\/a>.<\/p>\n\n\n
\n![\"Add](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/add-section-5.png\")
<\/figure>\n<\/div>\n\n\nSave <\/strong>the changes. And this is how it\u2019ll look, simple and minimal.<\/p>\n\n\n
\n![\"Preview](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/preivew-700x243.png\")
<\/figure>\n<\/div>\n\n\nSteps to Add a Direct Shopify Image Gallery Section<\/h2>\n\n\n\n
Now, let\u2019s try the image gallery section through a Shopify section app. <\/p>\n\n\n\n
The best part is that the app gives you complete control to display your images without coding a single line. You can use the simple settings to make changes that fit your brand guidelines, which ultimately saves you a ton of time and effort.<\/p>\n\n\n
\n![\"Shopify](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/mit-preview-5-700x249.png\")
<\/figure>\n<\/div>\n\n\nFor creating a section just like the above displayed, we will use the MIT Sections Pro <\/strong>app, (super simple and easy) gives you numerous options to choose from and letting you try it for free.<\/p>\n\n\n\n
Step 1: Install App & Find Your Desired Section<\/h3>\n\n\n\n
![\"Select](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/browse-section-5-700x339.png\")
<\/figure>\n<\/div>\n\n\n![\"Click](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/try-for-free-4-700x384.png\")
<\/figure>\n<\/div>\n\n\n![\"Add"Meetsanshi](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/mit-add-section-3.png\")
<\/figure>\n<\/div>\n\n\n![\"Editing](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/mit-edit-section-700x367.png\")
<\/figure>\n<\/div>\n\n\n![\"Save](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/click-save-700x388.png\")
<\/figure>\n<\/div>\n\n\n![\"MIT](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/mit-sections-pro.png\")
\r\n<\/div>\r\n<\/div>\n\n\n\n