Shopify Image & Text Banners: Master Side-by-Side Layouts (Desktop) & Stacking (Mobile)
Hey everyone! As a Shopify migration expert and community analyst, 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.
Understanding the Core Layout Challenge
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.
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:
- The "No-Code" / Low-Code Route: @websensepro and @rshrivastava63 quickly highlighted that for Shopify 2.0 themes (like Dawn), you can often achieve something very similar using the built-in "Image with Text" section. This is a fantastic starting point for many store owners. You just add the section, set the image layout to the right (or left), and then, if your theme supports it, adjust the section width to full-width. You might need "a bit of custom CSS for the spacing and typography" to get the exact look, but it's a quick win.
- The Custom Code Approach (Full Control): This is where the real power of Shopify comes in. @Hardeep and @sadik_ShopiDevs provided a comprehensive custom Liquid section solution. This gives you pixel-perfect control over the design and ensures it matches your vision exactly. It involves creating a new section file with Liquid, HTML, CSS, and a schema for customizer settings.
- The App Solution: @sadik_ShopiDevs also mentioned that for those who "don’t want to work with code," apps like Slider Revolution & Sections can help create these layouts without manual coding. @Dan-From-Ryviu echoed this, suggesting checking for theme support or using AI to generate sections. Apps are great for speed and ease, but sometimes introduce extra costs or dependencies.
- Getting Direct Help: And, of course, there were offers like @devcoders's to check the store directly, which is a common and often helpful step in the community when you need personalized assistance.
For store owners seeking that exact, polished look with the specific "info-table" style text layout, the custom code solution from @Hardeep and @sadik_ShopiDevs is probably the most robust. Let's break down how to implement it.
Step-by-Step: Creating a Custom Image & Text Section with Liquid
This method involves adding a new "section" to your theme code. Sections are modular blocks that you can add, remove, and reorder from your Shopify theme customizer, giving you incredible flexibility.
1. The Code for Your New Section
First, here's the complete code provided by @Hardeep. This includes the HTML structure, the CSS for styling and responsiveness, and the Liquid schema that makes it editable in the theme customizer.
{% 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 %}This code uses CSS Grid for the desktop (grid-template-columns: 1fr 1fr;) and mobile (grid-template-columns: 1fr;) layout, ensuring that responsive stacking. The {% schema %} tag defines the settings and blocks that will appear in your theme customizer, allowing you to easily update the heading, image, and table rows without touching code again!
2. Implementing the Code in Your Shopify Theme
Follow these steps carefully:
- Open Your Shopify Admin: Go to Online Store → Themes.
- Edit Your Theme Code: Find your published theme, click the … (three dots), and then select Edit code.
- Create a New Section File: In the left sidebar, locate the Sections folder. Click Add a new section.
- Name Your Section: Name it
hydration-split.liquid(orhydration-shimmer.liquidas suggested by @sadik_ShopiDevs, either works!) and paste the entire code block from above into this new file. - Save the File: Click Save.
- Add the Section to Your Page: Now, go to Online Store → Customize. On any page (like your homepage), click “Add section” and you'll find your new "Hydration Split" section listed. Add it, and then use the customizer settings to add your heading, image, and the "Table Rows" for your detailed text.
You should now have a beautiful, responsive image and text banner that looks exactly like the example @veluxe1 was aiming for! Here's the visual reference from the thread:
Quick Alternative: Using the Built-in "Image with Text" Section
If the custom code feels a bit daunting, or if your design isn't *exactly* as intricate as the "info-table" example, remember the simpler approach:
- Go to Online Store → Customize.
- Click "Add section" and choose the "Image with Text" section.
- In the section settings, look for "Image layout" or "Desktop content position" and select "Image on right" (or left, depending on your preference).
- Adjust the text and image in the section settings. You might find options for section width or padding to achieve a full-width split.
- If the typography or spacing isn't quite right, you can add some custom CSS in your theme's
base.cssortheme.cssfile (or a custom CSS section in the theme customizer if available) to fine-tune it.
It's really inspiring to see how the Shopify community comes together to solve these design challenges. Whether you're comfortable diving into Liquid and CSS or prefer sticking to the theme customizer and apps, there&s always a solution to bring your vision to life on Shopify. Don't be afraid to experiment, and always make a backup of your theme before making code changes!