{"id":23571,"date":"2025-10-13T17:00:00","date_gmt":"2025-10-13T11:30:00","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=23571"},"modified":"2025-10-14T16:04:17","modified_gmt":"2025-10-14T10:34:17","slug":"add-responsive-image-section-shopify","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-responsive-image-section-shopify\/","title":{"rendered":"How to Add a Responsive Image Section in Shopify?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Images can make or break your store\u2019s first impression. While Shopify does include built-in options to add images, these features can be limited in terms of design and responsiveness.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A responsive image section ensures visuals automatically adjust to every screen size, maintaining perfect alignment, quality, and speed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can create one using an app for a quick, no-code setup or custom code for full design flexibility (though it requires some technical skill).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s walk through how to add a responsive image section in Shopify quickly and easily.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Method 1: Add Shopify Responsive Image Section (Using App)&nbsp;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Using the <strong>MIT Sections Pro<\/strong>, you can add an image section that automatically adjusts to any screen size, keeping visuals sharp, well-aligned, and fast-loaded with proper <a href=\"https:\/\/meetanshi.com\/blog\/shopify-image-optimization\/\">Shopify image optimization<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here\u2019s an example of what a responsive image should look like.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"720\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/app-preview-4.gif\" alt=\"Preview of the responsive image section using a Shopify app\" class=\"wp-image-23582\"\/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Step 1: Find the Section in Shopify<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Install the <a href=\"https:\/\/apps.shopify.com\/mit-custom-sections\" target=\"_blank\" rel=\"noopener\">MIT Sections Pro<\/a><strong> <\/strong>from the Shopify App Store, then from the app dashboard, click <strong>Browse sections <\/strong>and search for responsive image.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"534\" height=\"391\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/browse-section-7.png\" alt=\"App dashboard showing search bar with &quot;responsive image&quot;\" class=\"wp-image-23583\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/browse-section-7.png 534w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/browse-section-7-300x220.png 300w\" sizes=\"auto, (max-width: 534px) 100vw, 534px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Step 2: Open the Shopify Theme Editor<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To acquire this section without any cost, click <strong>Try for free.<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"942\" height=\"477\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/try-for-free-6.png\" alt=\"Click Try for free button to Add responsive image section in Shopify\n\n\" class=\"wp-image-23584\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/try-for-free-6.png 942w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/try-for-free-6-300x152.png 300w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/try-for-free-6-768x389.png 768w\" sizes=\"auto, (max-width: 942px) 100vw, 942px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">During the free trial, you will be redirected to the MIT demo store. Once you purchase it, you can have it in your store. From the left sidebar, click <strong>Add section <\/strong>and select <strong>Meetanshi Responsive image.<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"834\" height=\"131\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/app-add-section-6.png\" alt=\"From the theme editor click add section and select Meetanshi Responsive image\" class=\"wp-image-23585\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/app-add-section-6.png 834w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/app-add-section-6-300x47.png 300w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/app-add-section-6-768x121.png 768w\" sizes=\"auto, (max-width: 834px) 100vw, 834px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Step 3: Customize the Section<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Click <strong>Meetanshi Responsive image <\/strong>to expand the customization settings. Make the needed changes and save them.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"518\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/app-edit-section-7-1024x518.png\" alt=\"edit the section to  Add responsive image section in Shopify.\n\" class=\"wp-image-23586\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/app-edit-section-7-1024x518.png 1024w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/app-edit-section-7-300x152.png 300w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/app-edit-section-7-768x388.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/app-edit-section-7.png 1385w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">This is how it will look in the frontend based on the customization you have made.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"720\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/app-preview-5.gif\" alt=\"Preview of the responsive image section using a Shopify app\" class=\"wp-image-23587\"\/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Method 2: Custom Code to Responsive Image Section<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Here are the clear steps if you want to opt for the technical way.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Create New Section<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">From your Shopify admin panel, <strong>Online stores &gt; Themes &gt; \u2026(Three dots) &gt; Edit code. <\/strong>Then, from the <strong>sections<\/strong> folder, add a new section and save it as <strong>responsive-image.liquid.<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"495\" height=\"90\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/create-section-5.png\" alt=\"create a new section to add a responsive image section in Shopify\" class=\"wp-image-23588\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/create-section-5.png 495w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/create-section-5-300x55.png 300w\" sizes=\"auto, (max-width: 495px) 100vw, 495px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Step 2: Add Code to Section<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Then paste the code below in the newly created <strong>responsive-image.liquid <\/strong>section and save it.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{%- liquid\n  assign image = section.settings.image\n  assign mobile_image = section.settings.mobile_image\n  assign link = section.settings.link\n  assign height_desktop = section.settings.height_desktop\n  assign height_mobile = section.settings.height_mobile\n-%}\n\n&lt;div class=\"responsive-image-banner section-{{ section.id }}\">\n  &lt;div class=\"responsive-image-banner__wrapper\">\n    \n    {% if link != blank %}&lt;a href=\"{{ link }}\">{% endif %}\n      \n      {% if image != blank %}\n        &lt;div class=\"image-wrapper desktop-only\">\n          {{ image | image_url: width: 2000 | image_tag: widths: '375, 550, 750, 1100, 1500, 1780, 2000', sizes: '100vw', loading: 'lazy' }}\n        &lt;\/div>\n      {% endif %}\n\n      {% if mobile_image != blank %}\n        &lt;div class=\"image-wrapper mobile-only\">\n          {{ mobile_image | image_url: width: 1000 | image_tag: widths: '375, 550, 750', sizes: '100vw', loading: 'lazy' }}\n        &lt;\/div>\n      {% endif %}\n\n    {% if link != blank %}&lt;\/a>{% endif %}\n\n  &lt;\/div>\n&lt;\/div>\n\n{% style %}\n  \/* Section Styling *\/\n  .section-{{ section.id }} {\n    margin-top: {{ section.settings.padding_top }}px;\n    margin-bottom: {{ section.settings.padding_bottom }}px;\n  }\n\n  \/* Desktop Image Height and General Styling *\/\n  .section-{{ section.id }} .image-wrapper {\n    overflow: hidden;\n    height: {{ height_desktop }}px; \/* Desktop height from settings *\/\n  }\n\n  .section-{{ section.id }} .image-wrapper img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover; \/* Ensures the image covers the container without distortion *\/\n  }\n\n  \/* Mobile-Specific Styles *\/\n  @media screen and (max-width: 749px) {\n    .section-{{ section.id }} .image-wrapper.desktop-only {\n      display: none; \/* Hide desktop image on mobile *\/\n    }\n    \n    .section-{{ section.id }} .image-wrapper.mobile-only {\n      display: block; \/* Show mobile image on mobile *\/\n      height: {{ height_mobile }}px; \/* Mobile height from settings *\/\n    }\n  }\n\n  \/* Hide Mobile Image on Desktop *\/\n  @media screen and (min-width: 750px) {\n    .section-{{ section.id }} .image-wrapper.mobile-only {\n      display: none;\n    }\n  }\n\n  \/* Ensure desktop image is visible on desktop *\/\n  @media screen and (min-width: 750px) {\n    .section-{{ section.id }} .image-wrapper.desktop-only {\n      display: block;\n    }\n  }\n{% endstyle %}\n\n{% schema %}\n{\n  \"name\": \"Responsive Image Banner\",\n  \"tag\": \"section\",\n  \"class\": \"section-responsive-image\",\n  \"settings\": [\n    {\n      \"type\": \"image_picker\",\n      \"id\": \"image\",\n      \"label\": \"Image (Desktop)\",\n      \"info\": \"Best for screen widths 1100px and up.\"\n    },\n    {\n      \"type\": \"image_picker\",\n      \"id\": \"mobile_image\",\n      \"label\": \"Image (Mobile)\",\n      \"info\": \"Optional: Image for screen widths below 750px. If not set, the desktop image will be used and cropped.\"\n    },\n    {\n      \"type\": \"url\",\n      \"id\": \"link\",\n      \"label\": \"Image link\"\n    },\n    {\n      \"type\": \"range\",\n      \"id\": \"height_desktop\",\n      \"min\": 200,\n      \"max\": 1000,\n      \"step\": 50,\n      \"unit\": \"px\",\n      \"label\": \"Section Height (Desktop)\",\n      \"default\": 450\n    },\n    {\n      \"type\": \"range\",\n      \"id\": \"height_mobile\",\n      \"min\": 100,\n      \"max\": 600,\n      \"step\": 50,\n      \"unit\": \"px\",\n      \"label\": \"Section Height (Mobile)\",\n      \"default\": 300\n    },\n    {\n      \"type\": \"range\",\n      \"id\": \"padding_top\",\n      \"min\": 0,\n      \"max\": 100,\n      \"step\": 4,\n      \"unit\": \"px\",\n      \"label\": \"Top padding\",\n      \"default\": 36\n    },\n    {\n      \"type\": \"range\",\n      \"id\": \"padding_bottom\",\n      \"min\": 0,\n      \"max\": 100,\n      \"step\": 4,\n      \"unit\": \"px\",\n      \"label\": \"Bottom padding\",\n      \"default\": 36\n    }\n  ],\n  \"presets\": [\n    {\n      \"name\": \"Responsive Image Banner\"\n    }\n  ]\n}\n{% endschema %}\n\n<\/pre>\n\n\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Edit the Theme Editor&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Head back to the Shopify admin panel, <strong>Online stores &gt; Themes &gt; Customize.&nbsp; <\/strong>From the theme editor sidebar, click <strong>Add section <\/strong>and select <strong>Responsive Image Banner.<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"838\" height=\"78\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/code-add-section-4.png\" alt=\"from the theme editor click add section and select Responsive Image Banner.\" class=\"wp-image-23592\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/code-add-section-4.png 838w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/code-add-section-4-300x28.png 300w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/code-add-section-4-768x71.png 768w\" sizes=\"auto, (max-width: 838px) 100vw, 838px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Click the <strong>Responsive Image Banner <\/strong>to expand the modification features.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"456\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/code-edit-section-5-1024x456.png\" alt=\"Edit the section from the sidebar to add a responsive image section in Shopify\" class=\"wp-image-23593\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/code-edit-section-5-1024x456.png 1024w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/code-edit-section-5-300x133.png 300w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/code-edit-section-5-768x342.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/code-edit-section-5.png 1378w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Once done making changes, <strong>save<\/strong> them. This is how it will work.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1438\" height=\"626\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/code-preview-3.gif\" alt=\"Preview of the add a responsive image section in Shopify using code.\" class=\"wp-image-23594\"\/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Why Pick the Shopify App to Add a Responsive Image?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Our app ensures that your site&#8217;s images display smoothly on all devices without compromising quality. It also offers a variety of features, such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Instantly access 130+ pre-made free and paid sections, including featured collections, newsletters, banners, testimonials, FAQs, and more&nbsp;&nbsp;<\/li>\n\n\n\n<li>Add any section to your store with zero coding or technical skills required&nbsp;&nbsp;<\/li>\n\n\n\n<li>Free installation with advanced customization available, even for free templates&nbsp;&nbsp;<\/li>\n\n\n\n<li>Fully optimized for speed and seamless compatibility with all Shopify themes&nbsp;&nbsp;<\/li>\n\n\n\n<li>Simple editing allows you to personalize each section as your business grows&nbsp;&nbsp;<\/li>\n\n\n\n<li>Offers flexibility to add, edit, or swap out sections anytime&nbsp;&nbsp;<\/li>\n\n\n\n<li>Provides cost-effective options for businesses of all sizes, with a free trial included<\/li>\n<\/ul>\n\n\n<div class=\"meetanshi-cta\">\r\n<div class=\"cta-content-wrapper\">\r\n<span>130+ Shopify Sections<\/span>\r\n<p>Your all-in-one solution to create a professional Shopify store<\/p>\r\n<a href=\"https:\/\/apps.shopify.com\/mit-custom-sections\" target=\"_blank\" class=\"btn-primary\" rel=\"noopener\">Install App Now<\/a>\r\n<\/div>\r\n<div class=\"cta-image-new\">\r\n<img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/mit-sections-pro.png\" alt=\"MIT Sections Pro\">\r\n<\/div>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Images can make or break your store\u2019s first impression. While Shopify does include built-in options to add images, these features can be limited in terms&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[787],"tags":[],"class_list":["post-23571","post","type-post","status-publish","format-standard","hentry","category-shopify"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/23571","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=23571"}],"version-history":[{"count":5,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/23571\/revisions"}],"predecessor-version":[{"id":23656,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/23571\/revisions\/23656"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=23571"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=23571"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=23571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}