A user wants to create a two-column layout within Dawn theme’s image banner section: one empty column on the left, and heading/text/buttons on the right, all over a single background image.
Initial Suggestions:
Recommended Solution:
The discussion evolved toward modifying the theme code directly for a cleaner, long-term solution:
image-banner.liquid file in the theme code editorCurrent Status:
The user successfully duplicated the file but encountered difficulty locating the specific code section mentioned in the instructions. The helper clarified that newer Dawn versions structure the content differently, using a banner__box wrapper with a {% for block in section.blocks %} loop instead of the older structure. The conversation remains ongoing as they work through implementing the two-column modification within the correct code section.
This is my image banner. I would like to make it so the image banner is one image. Then Inside the image banner there must be 2 columns. So in the first column will have no blocks/elements. second column my have heading, text and buttons. How can I do this? Or is there another method i can be using?
Hello @lifeofrimo021
I’d be happy to help with this! To give you the most accurate feedback, could you kindly share your store URL? This will allow me to provide tailored suggestions for improvement.
Hello @lifeofrimo021
thanks for the screenshots!
You’re very close to what you want, and yes, you can definitely achieve this clean 2-column layout inside an Image Banner in Dawn. I’ll walk you through it.
Problem:
You want:
. Full one background image (no split images)
. Two columns inside:
. Left column: empty
. Right column: heading, text, button
Simple Solution:
You don’t need to hack the image banner much.
Instead, just:
. Use Image Banner section
. Add a Custom Liquid block (or customize the section)
. Write small HTML to create the 2-column layout.
Here’s how to do it:
In your Dawn theme, open the Image Banner settings.
Add a Custom Liquid block inside it.
Paste this inside the Custom Liquid:
## Move Freely. Stay True.
ATHLEISURE
Shop Men
Shop Women
Important settings:
. Set the Image Banner background image to your desired image (the full image).
. Set the content alignment to Middle Center (optional).
. Set the overlay opacity if needed (to make text pop out better).
Alternative (cleaner but needs minor code edit):
If you want it even cleaner without using Custom Liquid, I can show you how to edit the Dawn theme code so the Image Banner natively has two columns — like “Split Content” but keeping one background image.
Would you want that too? (it’s a little bit cleaner for long-term projects!)
Thank you 
Thanks for your response, This is the type of solution I am looking for.
How do I add a custom liquid block inside it? Dawn theme only allows me to add 3 blocks in the section of which a custom liquid is not one of them. I am however able to create a custom liquid section. I did try pasting this code in the custom liquid section but it seems it is the code intended for use within the section i think.
How could I maybe implement the cleaner native option? This could be the better longer term solution.
I did try this option. The issue is that it stacks on mobile view. Also the image is best when it is over 50% width.
Awesome — thanks for explaining clearly.
You’re totally right: in Dawn’s Image Banner, you’re limited to specific blocks (heading, text, buttons) — no direct Custom Liquid block allowed there.
And yes, pasting that HTML in a full Custom Liquid section doesn’t behave right, because it’s missing the background image and structure from the Image Banner.
So YES, I recommend the native cleaner method for you.
We’ll modify the Image Banner section code to:
. Allow 2 columns inside the Image Banner
. Keep your single background image
. Control the layout easily from theme editor
Here’s the plan:
Step 1:
Duplicate the image-banner.liquid file (always safe to work on a copy first).
Step 2:
Edit the structure to add a 2-column layout inside it.
Step 3:
Move the heading, text, buttons into the second column only.
Step-by-Step Instructions:
Go to:
Online Store > Themes > Edit Code
Find:
/sections/image-banner.liquid
→ Right-click it → Duplicate (call it maybe image-banner-2col.liquid)
In your duplicated file, find the big wrapper where the content sits.
Search for this line inside:
{%- if section.blocks.size > 0 -%}
or something similar.
Right under that div, replace the inner structure with a 2-column grid.
Here’s a modified skeleton you can use:
Replace the current content area with:
{%- for block in section.blocks -%}
{% case block.type %}
{% when 'heading' %}
## {{ block.settings.heading | escape }}
{% when 'text' %}
{{ block.settings.text | escape }}
{% when 'buttons' %}
{%- if block.settings.button_label != blank -%}
{{ block.settings.button_label }}
{%- endif -%}
{%- if block.settings.button_label_2 != blank -%}
{{ block.settings.button_label_2 }}
{%- endif -%}
{% endcase %}
{%- endfor -%}
Then style it a little more nicely
At the bottom of your file, or inside your theme CSS file (base.css), you can add:
.button-group a {
display: inline-block;
margin-right: 1rem;
padding: 0.75rem 1.5rem;
border: 1px solid black;
text-decoration: none;
}
.button-group a:hover {
background-color: black;
color: white;
}
After that:
. In the Theme Editor, add the “Image Banner 2Col” section.
. Upload your full background image.
. Add Heading, Text, Buttons as normal.
. You’ll see your text/buttons nicely placed in the second column, with the first column empty.
Bonus Tip:
You can even make the column widths adjustable by adding a setting in schema if you want total flexibility later.
Thank you
Okay, I have duplicated a file as suggested. I am unable to locate the part you mentioning.
{%- if section.blocks.size > 0 -%}
This is what the new duplicate file code looks like.
{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}
{%- if section.settings.image_height == 'adapt' and section.settings.image != blank -%}
{%- style -%}
@media screen and (max-width: 749px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before,
#Banner-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
@media screen and (min-width: 750px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
{%- endstyle -%}
{%- endif -%}
{%- style -%}
#Banner-{{ section.id }}::after {
opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
}
{%- endstyle -%}
{%- liquid
assign full_width = '100vw'
assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
if section.settings.image_behavior == 'ambient'
assign half_width = '60vw'
assign full_width = '120vw'
assign stacked_sizes = '(min-width: 750px) 60vw, 120vw'
assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'
elsif section.settings.image_behavior == 'fixed' or section.settings.image_behavior == 'zoom-in'
assign half_width = '100vw'
assign stacked_sizes = '100vw'
else
assign half_width = '50vw'
assign stacked_sizes = '(min-width: 750px) 50vw, 100vw'
endif
assign fetch_priority = 'auto'
if section.index == 1
assign fetch_priority = 'high'
endif
-%}
{%- if section.settings.image != blank -%}
{%- liquid
assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
if section.settings.image_2 != blank
assign image_class = 'banner__media-image-half'
endif
if section.settings.image_2 != blank and section.settings.stack_images_on_mobile
assign sizes = stacked_sizes
elsif section.settings.image_2 != blank
assign sizes = half_width
else
assign sizes = full_width
endif
-%}
{{
section.settings.image
| image_url: width: 3840
| image_tag:
width: section.settings.image.width,
height: image_height,
class: image_class,
sizes: sizes,
widths: widths,
fetchpriority: fetch_priority
}}
{%- elsif section.settings.image_2 == blank -%}
{{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
{%- if section.settings.image_2 != blank -%}
{%- liquid
assign image_height_2 = section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio
if section.settings.image != blank
assign image_class_2 = 'banner__media-image-half'
endif
if section.settings.image != blank and section.settings.stack_images_on_mobile
assign sizes = stacked_sizes
elsif section.settings.image_2 != blank
assign sizes = half_width
else
assign sizes = full_width
endif
-%}
{{
section.settings.image_2
| image_url: width: 3840
| image_tag:
width: section.settings.image_2.width,
height: image_height_2,
class: image_class_2,
sizes: sizes,
widths: widths,
fetchpriority: fetch_priority
}}
{%- endif -%}
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'heading' -%}
##
{{ block.settings.heading }}
{%- when 'text' -%}
{{ block.settings.text }}
{%- when 'buttons' -%}
{%- if block.settings.button_label_1 != blank -%}
{{- block.settings.button_label_1 | escape -}}
{%- endif -%}
{%- if block.settings.button_label_2 != blank -%}
{{- block.settings.button_label_2 | escape -}}
{%- endif -%}
{%- endcase -%}
{%- endfor -%}
{% schema %}
{
"name": "t:sections.image-banner.name",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "t:sections.image-banner.settings.image.label"
},
{
"type": "image_picker",
"id": "image_2",
"label": "t:sections.image-banner.settings.image_2.label"
},
{
"type": "range",
"id": "image_overlay_opacity",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"label": "t:sections.image-banner.settings.image_overlay_opacity.label",
"default": 0
},
{
"type": "select",
"id": "image_height",
"options": [
{
"value": "adapt",
"label": "t:sections.image-banner.settings.image_height.options__1.label"
},
{
"value": "small",
"label": "t:sections.image-banner.settings.image_height.options__2.label"
},
{
"value": "medium",
"label": "t:sections.image-banner.settings.image_height.options__3.label"
},
{
"value": "large",
"label": "t:sections.image-banner.settings.image_height.options__4.label"
}
],
"default": "medium",
"label": "t:sections.image-banner.settings.image_height.label"
},
{
"type": "select",
"id": "image_behavior",
"options": [
{
"value": "none",
"label": "t:sections.all.animation.image_behavior.options__1.label"
},
{
"value": "ambient",
"label": "t:sections.all.animation.image_behavior.options__2.label"
},
{
"value": "fixed",
"label": "t:sections.all.animation.image_behavior.options__3.label"
},
{
"value": "zoom-in",
"label": "t:sections.all.animation.image_behavior.options__4.label"
}
],
"default": "none",
"label": "t:sections.all.animation.image_behavior.label"
},
{
"type": "header",
"content": "t:sections.image-banner.settings.content.content"
},
{
"type": "select",
"id": "desktop_content_position",
"options": [
{
"value": "top-left",
"label": "t:sections.image-banner.settings.desktop_content_position.options__1.label"
},
{
"value": "top-center",
"label": "t:sections.image-banner.settings.desktop_content_position.options__2.label"
},
{
"value": "top-right",
"label": "t:sections.image-banner.settings.desktop_content_position.options__3.label"
},
{
"value": "middle-left",
"label": "t:sections.image-banner.settings.desktop_content_position.options__4.label"
},
{
"value": "middle-center",
"label": "t:sections.image-banner.settings.desktop_content_position.options__5.label"
},
{
"value": "middle-right",
"label": "t:sections.image-banner.settings.desktop_content_position.options__6.label"
},
{
"value": "bottom-left",
"label": "t:sections.image-banner.settings.desktop_content_position.options__7.label"
},
{
"value": "bottom-center",
"label": "t:sections.image-banner.settings.desktop_content_position.options__8.label"
},
{
"value": "bottom-right",
"label": "t:sections.image-banner.settings.desktop_content_position.options__9.label"
}
],
"default": "middle-center",
"label": "t:sections.image-banner.settings.desktop_content_position.label"
},
{
"type": "select",
"id": "desktop_content_alignment",
"options": [
{
"value": "left",
"label": "t:sections.image-banner.settings.desktop_content_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.image-banner.settings.desktop_content_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.image-banner.settings.desktop_content_alignment.options__3.label"
}
],
"default": "center",
"label": "t:sections.image-banner.settings.desktop_content_alignment.label"
},
{
"type": "checkbox",
"id": "show_text_box",
"default": true,
"label": "t:sections.image-banner.settings.show_text_box.label"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "scheme-1"
},
{
"type": "header",
"content": "t:sections.image-banner.settings.mobile.content"
},
{
"type": "checkbox",
"id": "stack_images_on_mobile",
"default": true,
"label": "t:sections.image-banner.settings.stack_images_on_mobile.label"
},
{
"type": "select",
"id": "mobile_content_alignment",
"options": [
{
"value": "left",
"label": "t:sections.image-banner.settings.mobile_content_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.image-banner.settings.mobile_content_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.image-banner.settings.mobile_content_alignment.options__3.label"
}
],
"default": "center",
"label": "t:sections.image-banner.settings.mobile_content_alignment.label"
},
{
"type": "checkbox",
"id": "show_text_below",
"default": true,
"label": "t:sections.image-banner.settings.show_text_below.label"
}
],
"blocks": [
{
"type": "heading",
"name": "t:sections.image-banner.blocks.heading.name",
"limit": 1,
"settings": [
{
"type": "inline_richtext",
"id": "heading",
"default": "t:sections.image-banner.blocks.heading.settings.heading.default",
"label": "t:sections.image-banner.blocks.heading.settings.heading.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
},
{
"value": "hxl",
"label": "t:sections.all.heading_size.options__4.label"
},
{
"value": "hxxl",
"label": "t:sections.all.heading_size.options__5.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
}
]
},
{
"type": "text",
"name": "t:sections.image-banner.blocks.text.name",
"limit": 1,
"settings": [
{
"type": "inline_richtext",
"id": "text",
"default": "t:sections.image-banner.blocks.text.settings.text.default",
"label": "t:sections.image-banner.blocks.text.settings.text.label"
},
{
"type": "select",
"id": "text_style",
"options": [
{
"value": "body",
"label": "t:sections.image-banner.blocks.text.settings.text_style.options__1.label"
},
{
"value": "subtitle",
"label": "t:sections.image-banner.blocks.text.settings.text_style.options__2.label"
},
{
"value": "caption-with-letter-spacing",
"label": "t:sections.image-banner.blocks.text.settings.text_style.options__3.label"
}
],
"default": "body",
"label": "t:sections.image-banner.blocks.text.settings.text_style.label"
}
]
},
{
"type": "buttons",
"name": "t:sections.image-banner.blocks.buttons.name",
"limit": 1,
"settings": [
{
"type": "header",
"content": "t:sections.image-banner.blocks.buttons.settings.header_1.content"
},
{
"type": "text",
"id": "button_label_1",
"default": "t:sections.image-banner.blocks.buttons.settings.button_label_1.default",
"label": "t:sections.image-banner.blocks.buttons.settings.button_label_1.label",
"info": "t:sections.image-banner.blocks.buttons.settings.button_label_1.info"
},
{
"type": "url",
"id": "button_link_1",
"label": "t:sections.image-banner.blocks.buttons.settings.button_link_1.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_1",
"default": false,
"label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_1.label"
},
{
"type": "header",
"content": "t:sections.image-banner.blocks.buttons.settings.header_2.content"
},
{
"type": "text",
"id": "button_label_2",
"default": "t:sections.image-banner.blocks.buttons.settings.button_label_2.default",
"label": "t:sections.image-banner.blocks.buttons.settings.button_label_2.label",
"info": "t:sections.image-banner.blocks.buttons.settings.button_label_2.info"
},
{
"type": "url",
"id": "button_link_2",
"label": "t:sections.image-banner.blocks.buttons.settings.button_link_2.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_2",
"default": false,
"label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_2.label"
}
]
}
],
"presets": [
{
"name": "t:sections.image-banner.presets.name",
"blocks": [
{
"type": "heading"
},
{
"type": "text"
},
{
"type": "buttons"
}
]
}
]
}
{% endschema %}
Ok wait
Thanks for sharing the full file — you did it perfectly.
I see exactly where you are now.
The part I had mentioned earlier ({%- if section.blocks.size > 0 -%} with
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'heading' -%}
...
{%- when 'text' -%}
...
{%- when 'buttons' -%}
...
{%- endfor -%}
So in your version, the
Here’s why:
In newer versions (like yours), Shopify’s image-banner.liquid evolved. They wrapped the blocks inside a .banner__box div, which gives more styling control over content width and mobile responsiveness.
So what does this mean for you?
You’re in the right file.
You have the correct place where content (like heading, text, and buttons) is rendered.
You don’t need to find another {% if section.blocks.size > 0 %}, because the loop {% for block in section.blocks %} already ensures it.
If you need to modify or insert something new in the content (like an extra paragraph, image, or button), you would work inside this:
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'heading' -%}
...
{%- when 'text' -%}
...
{%- when 'buttons' -%}
...
{%- endfor -%}
Thank you