Shopify Custom Sections: Crafting Dynamic Image and Text Banners for Your Store

Unlock Dynamic Content: Crafting Responsive Image and Text Banners in Shopify

Hey everyone! As a Shopify migration expert and community analyst at Shopping Cart Mover, I spend a lot of time sifting through discussions to find those golden nuggets of advice that really help store owners. Recently, I stumbled upon a fantastic thread initiated by a store owner, @veluxe1, asking for guidance on a super common design request: an image and text banner that sits side-by-side on desktop but gracefully stacks on mobile. It's a classic layout, and the community really delivered with some solid solutions!

The original question, "Image and text banner or column," quickly evolved into a detailed discussion on how to achieve this specific look, especially with a structured text layout next to the image. @veluxe1 even shared a screenshot, which really helped clarify the desired aesthetic: a clean split, with an image on one side and a detailed text block with a heading and an "info-table" style list on the other. This kind of section is perfect for showcasing product features, brand values, or unique selling points, enhancing your store's visual appeal and conversion potential.

Understanding the Core Layout Challenge: Responsiveness is Key

The key here is responsiveness. On larger screens, you want that impactful visual alongside compelling text. But on smaller devices, a side-by-side layout would shrink everything down too much, making it unreadable. The solution, as several community members pointed out, is a "50/50 split section with the content on the left and the image on the right. On desktop, both columns sit side by side and on mobile they stack vertically." This is a fundamental principle of modern web design, ensuring your content is accessible and aesthetically pleasing across all devices.

For merchants looking to build a robust online presence from scratch, starting a Shopify store offers the perfect foundation for implementing such dynamic and responsive designs.

Community Insights: Multiple Paths to the Same Goal

What I loved about this thread was the variety of solutions offered, catering to different comfort levels with code:

1. The "No-Code" / Low-Code Route: Utilizing Built-in Theme Sections

For those less comfortable with diving into code, a great starting point is your theme's existing sections. As @websensepro and @rshrivastava63 suggested, many modern Shopify 2.0 themes, like Dawn, offer an "Image with Text" section. This section often provides options in the theme customizer to:

• Set the image layout (left or right alignment on desktop).
• Control section width (full-width or contained).
• Adjust basic typography and spacing.

While this might not give you the exact "info-table" style list @veluxe1 desired, it's a quick way to achieve a similar responsive image-text split. You can often add a bit of custom CSS directly in the theme customizer for minor tweaks to spacing or text styles without editing core Liquid files.

2. The Custom Code Approach: Precision with Liquid and CSS Grid

For precise control and to achieve the exact structured text layout, creating a custom Liquid section is the most powerful method. This is where the "development-integrations" category truly shines. @Hardeep provided an excellent, comprehensive code example, which @sadik_ShopiDevs later packaged into a downloadable file.

Breaking Down the Custom Section Code:

The provided code (`hydration-split.liquid` or `hydration-shimmer.liquid`) demonstrates a robust solution using HTML, CSS, and Liquid schema:

  


    

      {% 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" },
    { "type": "image_picker", "id": "image", "label": "Right Image" }
  ],
  "blocks": [
    {
      "type": "row",
      "name": "Table Row",
      "settings": [
        { "type": "text", "id": "label", "label": "Label" },
        { "type": "text", "id": "value", "label": "Value" }
      ]
    }
  ],
  "presets": [
    { "name": "Hydration Split", /* ... default blocks ... */ }
  ]
}
{% endschema %}

• HTML Structure: The section uses two main `div` elements within a `hydration-grid`: `hydration-content` for text and `hydration-image` for the visual. This clear separation is crucial for responsive design.
• CSS Grid for Responsiveness: The magic happens with `display: grid;` and `grid-template-columns: 1fr 1fr;` for desktop, creating a perfect 50/50 split. The `@media(max-width:768px)` query then collapses this to `grid-template-columns: 1fr;`, stacking the content vertically for mobile. The `order:-1;` on `.hydration-image` ensures the image appears above the text on smaller screens, a common and user-friendly mobile pattern.
• Liquid Schema (`{% schema %}`): This is what makes the section editable in the Shopify theme customizer. It defines:
  • `settings`: For global section options like the main `heading` (a textarea) and the `image_picker` for the banner image.
  • `blocks`: This is a powerful feature allowing merchants to add repeatable content. In this case, "Table Row" blocks are defined, each with a `label` and `value` text input, perfectly replicating the desired "info-table" style.
  • `presets`: Provides default content for the section when it's first added, making it easier for merchants to get started.

Implementation Steps for Custom Sections:

1. Access Theme Code: Go to Shopify Admin → Online Store → Themes. Find your published theme, click … (three dots) → Edit code.
2. Create New Section: In the `Sections` folder, click "Add a new section." Name it something descriptive like `hydration-split.liquid` or `custom-image-text-banner.liquid`.
3. Paste Code: Copy the full HTML, CSS, and Liquid schema code into this new file and save.
4. Add to Page: Go to Online Store → Customize. Navigate to the page where you want the banner, click "Add section," and select your newly created custom section. You can then customize the heading, image, and add multiple "Table Row" blocks directly from the customizer.

3. App-Based Solutions: Simplicity with Page Builders

If coding seems daunting, even with detailed instructions, apps offer a user-friendly alternative. @sadik_ShopiDevs mentioned apps like "Slider Revolution & Sections." These page builder apps often provide drag-and-drop interfaces to create complex layouts, including image and text banners, hero sections, and column layouts, without touching a line of code. While convenient, remember that apps can add to your store's loading time and subscription costs.

4. AI-Assisted Development: The Future is Now

@Dan-From-Ryviu also touched upon using AI to generate such sections. While still evolving, AI tools are becoming increasingly capable of generating code snippets or even full sections based on natural language descriptions, potentially bridging the gap between no-code and custom development.

Best Practices for Implementing Dynamic Sections

• Test Thoroughly: Always test your new sections on various devices (desktop, tablet, mobile) and browsers to ensure full responsiveness and functionality.
• Backup Your Theme: Before making any code changes, duplicate your live theme. This provides a safety net if anything goes wrong.
• Optimize Images: Ensure the images you use are optimized for web (compressed, appropriate dimensions) to maintain fast page load times.
• Accessibility: Pay attention to contrast ratios for text and ensure proper alt text for images for better accessibility and SEO.

Conclusion

Creating a dynamic, responsive image and text banner is a highly effective way to engage your customers and highlight key information on your Shopify store. Whether you opt for the simplicity of built-in theme sections, the precision of custom Liquid and CSS, or the convenience of a page builder app, Shopify provides the tools to bring your vision to life. By understanding these different approaches, you can choose the method that best suits your technical comfort level and design requirements, ultimately enhancing your store's user experience and professional appearance.

At Shopping Cart Mover, we specialize in helping merchants leverage the full power of Shopify, from seamless migrations to custom development and optimization. If you're looking to implement advanced features or need assistance with your store's design and functionality, don't hesitate to reach out to our experts!