Mastering Responsive Image & Text Banners on Shopify: A Community Guide

Hey fellow store owners! Ever found yourself wanting that sleek, modern layout on your Shopify store where an image sits beautifully next to some compelling text on desktop, then gracefully stacks on top for mobile users? It's a common design request, and one that popped up recently in the Shopify Community forums. Our friend veluxe1 asked for exactly this, showing an example of an "image and text banner" with a specific, detailed text layout. It's a fantastic question because this kind of responsive, split-section design is incredibly effective for showcasing products, features, or brand stories.

The good news? There are a few excellent ways to achieve this, from simple built-in options to custom code, and even helpful apps. Let's dive into what the community suggested and how you can implement these dynamic sections on your own Shopify store.

The "No-Code" Built-in Approach: Image with Text Section

For many of you running modern Shopify 2.0 themes like Dawn, the easiest solution might already be at your fingertips. As community members websensepro and rshrivastava63 pointed out, your theme likely includes an "Image with Text" section that can get you pretty close to veluxe1's desired layout without touching a single line of code.

How to Use the Built-in "Image with Text" Section:

1. Go to your Shopify Admin: Navigate to Online Store > Themes.
2. Customize your Theme: Click the "Customize" button for your active theme.
3. Add a New Section: On the left sidebar, click "Add section" and search for "Image with Text".
4. Configure the Layout: Once added, select the section. You'll typically find settings to choose the image position (e.g., "Image on right" or "Image on left").
5. Adjust Width and Padding: Some themes offer options for section width (full-width, content width) or padding. Play around with these settings to get that clean, split look.
6. Add Your Content: Populate the image, heading, and text blocks with your desired content.

This approach is fantastic for speed and simplicity. While it might not match veluxe1's exact text styling (which featured a detailed info table), it provides the core image-next-to-text, stacked-on-mobile functionality. For more granular control over typography or spacing, rshrivastava63 mentioned that a bit of custom CSS could be added on top of this built-in section.

Going Custom with Code: The "Hydration Split" Section

If you need an absolutely precise design, or if your theme's built-in sections don't offer enough flexibility, creating a custom Liquid section is the way to go. This is where Hardeep's incredibly helpful code snippet comes in. This solution uses CSS Grid for the desktop split and media queries to ensure a perfect vertical stack on mobile, just like veluxe1 requested. Sadik_ShopiDevs also provided a similar file, reinforcing this as a solid custom solution.

Here's how to implement Hardeep's custom "Hydration Split" section:

Step-by-Step Instructions for Custom Code:

1. Backup Your Theme: Before making any code changes, always, always, always duplicate your theme (Online Store > Themes > Actions > Duplicate). This way, you can easily revert if anything goes wrong.
2. Open Your Shopify Admin: Go to Online Store > Themes. Find your published theme, click the three dots (…) next to it, and select Edit code.
3. Create a New Section: In the left sidebar, find the Sections folder. Click Add a new section. Name it hydration-split (or hydration-shimmer as sadik_ShopiDevs suggested, if you prefer) and then paste the following code into the new file.

  


    

      {% if section.settings.heading != blank %}
        
{{ section.settings.heading }}
      {% endif %}

      

        {% for block in section.blocks %}
          

            
{{ block.settings.label }}
            
{{ block.settings.value }}
          
        {% endfor %}
      
    

    

      {% if section.settings.image %}
        {{
          section.settings.image
          | image_url: width: 1600
          | image_tag:
          loading: 'lazy',
          widths: '600,800,1200,1600',
          class: 'cover-image'
        }}
      {% endif %}
    

  




{% schema %}
{
  "name": "Hydration Split",
  "settings": [
    {
      "type": "textarea",
      "id": "heading",
      "label": "Heading",
      "default": "Potent HYDRATION with a soft SHIMMER finish."
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Right Image"
    }
  ],
  "blocks": [
    {
      "type": "row",
      "name": "Table Row",
      "settings": [
        {
          "type": "text",
          "id": "label",
          "label": "Label",
          "default": "GOOD FOR:"
        },
        {
          "type": "text",
          "id": "value",
          "label": "Value",
          "default": "All skin types"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Hydration Split",
      "blocks": [
        {
          "type": "row",
          "settings": {
            "label": "GOOD FOR:",
            "value": "All skin types"
          }
        },
        {
          "type": "row",
          "settings": {
            "label": "FEELS LIKE:",
            "value": "Lightweight, milky texture"
          }
        },
        {
          "type": "row",
          "settings": {
            "label": "LOOKS LIKE:",
            "value": "A sheer glow with soft pink shimmer"
          }
        },
        {
          "type": "row",
          "settings": {
            "label": "AWARD:",
            "value": "Seal of Acceptance™ from the National Eczema Association"
          }
        }
      ]
    }
  ]
}
{% endschema %}

4. Save the File: Click "Save" in the top right corner.
5. Add the Section to a Template: Now, go back to Online Store > Customize. On your desired page (e.g., Home page), click "Add section" and you'll find your new "Hydration Split" section available. You can then upload your image, change the heading, and customize the info table rows directly from the theme customizer!

This code is brilliant because it's self-contained and comes with schema settings, meaning you can edit the content and image right from the theme customizer without touching the code again. Hardeep and sadik_ShopiDevs really hit the nail on the head with this one, providing a robust solution.

The "Easy Button": Page Builder Apps

If coding isn't your thing at all, or if you want even more drag-and-drop flexibility for various layouts, a page builder app is a fantastic alternative. Sadik_ShopiDevs specifically mentioned Slider Revolution & Sections, but there are many others available in the Shopify App Store. These apps often provide visual editors where you can create complex sections, hero banners, and column layouts with ease, typically offering robust responsive options out of the box.

Dan-From-Ryviu also briefly mentioned using AI to create sections, which is an interesting emerging option for those looking to automate code generation for custom layouts.

Wrapping It Up: Your Responsive Layout Awaits

Ultimately, achieving that perfect image and text banner layout that adapts beautifully from desktop to mobile is totally within reach for Shopify store owners. Whether you opt for the simplicity of your theme's built-in sections, roll up your sleeves with a custom Liquid code snippet, or lean on the power of a page builder app, the key is to prioritize responsiveness. Always preview your changes on different devices to ensure your content looks great and functions perfectly for all your visitors. The community discussion around veluxe1's question really highlighted the diverse ways to tackle common design challenges on Shopify, proving there's usually a solution for every comfort level with code!