Tutorial
Diek ThunnissenFounder & lead developer. Bouwt, verbetert en migreert de Shopify-laag voor DTC- en B2B-merken.Plan een gesprek →
Upgrade je Shopify Dawn-thema Banner, zonder premium kosten!
Diek Thunnissen · 6 mrt 2025 · 7 min leestijd
In deze tutorial voegen we apparaat-specifieke bannerafbeeldingen toe aan je Shopify-winkel.
Heb jij moeite om in het Dawn-thema een mooie banner te creëren die óók op mobiel strak oogt? Ik herken het probleem. Daarom heb ik een nieuwe video gemaakt waarin ik stap voor stap laat zien hoe je een custom desktop- én mobiele banner maakt, net zoals grote merken (denk aan Body & Fit).Het beste nieuws? Je hebt geen duur premium thema nodig, alleen een beetje slimme code. In mijn video deel ik exact hoe je dat doet, met duidelijke uitleg en voorbeeldcode.
Compatibele thema’s: Deze code zou moeten werken voor alle gratis Shopify-thema’s (Dawn, Refresh, Craft, Studio, Publisher, Crave, Origin, Taste, Colorblock, Sense, Ride, Spotlight).
Maak sectie image-banner-custom.liquid
{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}
{%- liquid
assign desktop_image = section.settings.image
assign mobile_image = section.settings.image_2
assign desktop_height = section.settings.desktop_image_height
assign mobile_height = section.settings.mobile_image_height
assign desktop_sizes = '100vw'
assign mobile_sizes = '100vw'
assign desktop_widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
assign mobile_widths = '375, 550, 750, 1100'
if section.settings.image_behavior == 'ambient'
assign desktop_sizes = '120vw'
assign mobile_sizes = '120vw'
assign desktop_widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'
assign mobile_widths = '450, 660, 900, 1320'
elsif section.settings.image_behavior == 'fixed' or section.settings.image_behavior == 'zoom-in'
assign desktop_sizes = '100vw'
assign mobile_sizes = '100vw'
endif
assign fetch_priority = 'auto'
if section.index == 1
assign fetch_priority = 'high'
endif
-%}
<div class="banner__desktop">
<div
id="Banner-{{ section.id }}"
class="banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--{{ desktop_height }}{% if settings.animations_reveal_on_scroll %}{% if section.settings.show_text_below %} banner--mobile-bottom{% endif %}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %} scroll-trigger animate--fade-in{% endif %}"
>
{%- if desktop_image != blank -%}
{%- if section.settings.image_link != blank -%}
<a href="{{ section.settings.image_link }}" class="banner__link">
{%- endif -%}
<div class="banner__media media{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
{%- liquid
assign image_height_desktop = desktop_image.width | divided_by: desktop_image.aspect_ratio
-%}
{{
desktop_image
| image_url: width: 3840
| image_tag:
width: desktop_image.width,
height: image_height_desktop,
class: '',
sizes: desktop_sizes,
widths: desktop_widths,
fetchpriority: fetch_priority
}}
</div>
{%- if section.settings.image_link != blank -%}
</a>
{%- endif -%}
{%- else -%}
<div class="banner__media media placeholder{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
{{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- endif -%}
<div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
<div class="banner__box content-container content-container--full-width-mobile color-{{ section.settings.color_scheme }} gradient">
{%- if section.settings.image_link == blank -%}
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'heading' -%}
<h2 class="banner__heading inline-richtext {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>
{{ block.settings.heading }}
</h2>
{%- when 'text' -%}
<div class="banner__text rte {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
<p>{{ block.settings.text }}</p>
</div>
{%- when 'buttons' -%}
<div class="banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_label_2 != blank %} banner__buttons--multiple{% endif %}" {{ block.shopify_attributes }}>
{%- if block.settings.button_label_1 != blank -%}
<a {% if block.settings.button_link_1 == blank %}role="link" aria-disabled="true"{% else %}href="{{ block.settings.button_link_1 }}"{% endif %} class="button{% if block.settings.button_style_secondary_1 %} button--secondary{% else %} button--primary{% endif %}">
{{- block.settings.button_label_1 | escape -}}
</a>
{%- endif -%}
{%- if block.settings.button_label_2 != blank -%}
<a {% if block.settings.button_link_2 == blank %}role="link" aria-disabled="true"{% else %}href="{{ block.settings.button_link_2 }}"{% endif %} class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}">
{{- block.settings.button_label_2 | escape -}}
</a>
{%- endif -%}
</div>
{%- endcase -%}
{%- endfor -%}
{%- endif -%}
</div>
</div>
</div>
</div>
<div class="banner__mobile">
<div
id="Banner-{{ section.id }}"
class="banner banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ mobile_height }}{% if settings.animations_reveal_on_scroll %}{% if section.settings.show_text_below and section.settings.image_link == blank %} banner--mobile-bottom{% endif %}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %} scroll-trigger animate--fade-in{% endif %}"
>
{%- if mobile_image != blank -%}
<div class="banner__media media{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
{%- liquid
assign image_height_mobile = mobile_image.width | divided_by: mobile_image.aspect_ratio
-%}
{{
mobile_image
| image_url: width: 1100
| image_tag:
width: mobile_image.width,
height: image_height_mobile,
class: '',
sizes: mobile_sizes,
widths: mobile_widths,
fetchpriority: fetch_priority
}}
</div>
{%- else -%}
<div class="banner__media media placeholder{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
{{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- endif -%}
{%- if section.settings.image_link != blank -%}
<a href="{{ section.settings.image_link }}" class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
{%- else -%}
<div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
{%- endif -%}
<div class="banner__box content-container content-container--full-width-mobile color-{{ section.settings.color_scheme }} gradient">
{%- if section.settings.image_link == blank -%}
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'heading' -%}
<h2 class="banner__heading inline-richtext {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>
{{ block.settings.heading }}
</h2>
{%- when 'text' -%}
<div class="banner__text rte {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
<p>{{ block.settings.text }}</p>
</div>
{%- when 'buttons' -%}
<div class="banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_label_2 != blank %} banner__buttons--multiple{% endif %}" {{ block.shopify_attributes }}>
{%- if block.settings.button_label_1 != blank -%}
<a {% if block.settings.button_link_1 == blank %}role="link" aria-disabled="true"{% else %}href="{{ block.settings.button_link_1 }}"{% endif %} class="button{% if block.settings.button_style_secondary_1 %} button--secondary{% else %} button--primary{% endif %}">
{{- block.settings.button_label_1 | escape -}}
</a>
{%- endif -%}
{%- if block.settings.button_label_2 != blank -%}
<a {% if block.settings.button_link_2 == blank %}role="link" aria-disabled="true"{% else %}href="{{ block.settings.button_link_2 }}"{% endif %} class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}">
{{- block.settings.button_label_2 | escape -}}
</a>
{%- endif -%}
</div>
{%- endcase -%}
{%- endfor -%}
{%- endif -%}
</div>
{%- if section.settings.image_link != blank -%}
</a>
{%- else -%}
</div>
{%- endif -%}
</div>
</div>
<style>
@media screen and (max-width: 749px) {
.banner__desktop {
display: none !important;
}
.banner__mobile {
display: block !important;
}
}
@media screen and (min-width: 750px) {
.banner__mobile {
display: none !important;
}
.banner__desktop {
display: block !important;
}
}
.banner__link {
display: block;
z-index: 3;
}
</style>
{% schema %}
{
"name": "Image Banner Custom",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Desktop image"
},
{
"type": "image_picker",
"id": "image_2",
"label": "Mobile image"
},
{
"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": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "scheme-1"
},
{
"type": "url",
"id": "image_link",
"label": "Link URL",
"info": "Add a link to make the images clickable. Cannot be used with banner content."
},
{
"type": "header",
"content": "t:sections.all.animation.content"
},
{
"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.collage.settings.desktop_layout.label"
},
{
"type": "select",
"id": "desktop_image_height",
"options": [
{
"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": "Desktop image height",
"info": "t:sections.image-banner.settings.image_height.info"
},
{
"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": "checkbox",
"id": "show_text_box",
"default": true,
"label": "t:sections.image-banner.settings.show_text_box.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": "header",
"content": "t:sections.image-banner.settings.mobile.content"
},
{
"type": "select",
"id": "mobile_image_height",
"options": [
{
"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": "Mobile image height",
"info": "For best results, use an image with a 1:1 aspect ratio."
},
{
"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": "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": "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": "Image Banner Custom",
"blocks": [
{
"type": "heading"
},
{
"type": "text"
},
{
"type": "buttons"
}
]
}
]
}
{% endschema %}