.

 The Image With Text Overlay section is a powerful visual element used in Shopify themes to display text directly on top of an image. It’s perfect for hero banners, announcement blocks, promotional sections, or any area where you want strong visual impact. The text appears clearly over the image, creating a bold and modern look that instantly grabs customer attention.

This section is fully customizable—allowing you to adjust text size, alignment, background overlay, image height, and call-to-action buttons. It works perfectly for both desktop and mobile, ensuring a sleek and professional display across all devices.

{%- comment -%} Get the images from the settings. We will use the desktop image as a fallback for mobile if no specific mobile image is set. {%- endcomment -%} {%- assign desktop_image = section.settings.image -%} {%- assign mobile_image = section.settings.image_mobile -%} <section id="section-{{ section.id }}"> <div class="FlexboxIeFix"> <div class="ImageHero {% if section.settings.section_size != 'normal' %}ImageHero--{{ section.settings.section_size }}{% endif %}" {% if desktop_image %}style="background: url({{ desktop_image | img_url: '1x1' }})"{% endif %}> <div class="ImageHero__ImageWrapper"> {%- if mobile_image != blank -%} {%- comment -%} If a mobile image is set, we create two separate image divs. CSS will be used to show the correct one based on screen size. {%- endcomment -%} <div class="ImageHero__Image ImageHero__Image--desktop {% if section.settings.overlay_opacity > 0 %}ImageHero__ImageWrapper--hasOverlay{% endif %} Image--lazyLoad Image--zoomOut" data-optimumx="1.4" data-expand="-150" {% if desktop_image %}data-bgset="{{ desktop_image | img_url: '1000x' }} 1000w, {{ desktop_image | img_url: '1500x' }} 1500w"{% endif %}> </div> <div class="ImageHero__Image ImageHero__Image--mobile {% if section.settings.overlay_opacity > 0 %}ImageHero__ImageWrapper--hasOverlay{% endif %} Image--lazyLoad Image--zoomOut" data-optimumx="1.4" data-expand="-150" data-bgset="{{ mobile_image | img_url: '750x' }} 750w, {{ mobile_image | img_url: '960x' }} 960w"> </div> <noscript> <div class="ImageHero__Image" style="background-image: url({{ desktop_image | img_url: '1000x' }})"></div> </noscript> {%- else -%} {%- comment -%} If no mobile image is set, we use the original code with just one image. {%- endcomment -%} {%- capture mobile_size -%}750x{% if desktop_image.height >= 960 %}960{% else %}{{ desktop_image.height }}{% endif %}{%- endcapture -%} <div class="ImageHero__Image {% if section.settings.overlay_opacity > 0 %}ImageHero__ImageWrapper--hasOverlay{% endif %} Image--lazyLoad Image--zoomOut" data-optimumx="1.4" data-expand="-150" {% if desktop_image %}data-bgset="{{ desktop_image | img_url: mobile_size, crop: 'center' }} 750w, {{ desktop_image | img_url: '1000x' }} 1000w, {{ desktop_image | img_url: '1500x' }} 1500w"{% endif %}> </div> <noscript> <div class="ImageHero__Image" style="background-image: url({{ desktop_image | img_url: '1000x' }})"></div> </noscript> {%- endif -%} {%- unless desktop_image != blank -%} <div class="PlaceholderBackground PlaceholderBackground--Dark"> {{ 'lifestyle-1' | placeholder_svg_tag: 'PlaceholderBackground__Svg' }} </div> {%- endunless -%} </div> {%- if section.settings.subheading != blank or section.settings.title != blank or section.settings.content != blank -%} <div class="ImageHero__ContentOverlay"> <header class="SectionHeader"> {%- if section.settings.subheading != blank -%} <h3 class="SectionHeader__SubHeading Heading u-h6">{{ section.settings.subheading | escape }}</h3> {%- endif -%} {%- if section.settings.title != blank -%} <h2 class="SectionHeader__Heading Heading u-h1">{{ section.settings.title | escape }}</h2> {%- endif -%} {%- if section.settings.content != blank -%} <div class="SectionHeader__Description"> {{ section.settings.content }} </div> {%- endif -%} </header> </div> {%- endif -%} </div> </div> </section> <style> #section-{{ section.id }}, #section-{{ section.id }} .Heading { color: {{ section.settings.text_color }}; } #section-{{ section.id }} .ImageHero__ImageWrapper--hasOverlay::before { {%- assign overlay_opacity = section.settings.overlay_opacity | divided_by: 100.0 -%} background-color: {{ section.settings.overlay_color | color_modify: 'alpha', overlay_opacity }}; } {%- if section.settings.image_mobile != blank -%} /* Hide mobile image by default on larger screens */ .ImageHero__Image--mobile { display: none; } /* Shopify's common breakpoint for mobile is 749px */ @media screen and (max-width: 749px) { /* Hide the desktop image on mobile */ .ImageHero__Image--desktop { display: none; } /* Show the mobile image on mobile */ .ImageHero__Image--mobile { display: block; } } {%- endif -%} </style> {% schema %} { "name": "Image with text overlay", "settings": [ { "type": "select", "id": "section_size", "label": "Section size", "options": [ { "value": "small", "label": "Small" }, { "value": "normal", "label": "Normal" }, { "value": "large", "label": "Large" } ], "default": "large" }, { "type": "image_picker", "id": "image", "label": "Desktop Image", "info": "1500 x 800px .jpg recommended" }, { "type": "image_picker", "id": "image_mobile", "label": "Mobile Image", "info": "750 x 960px .jpg recommended. If none is selected, the desktop image will be used." }, { "type": "color", "id": "text_color", "label": "Text", "default": "#ffffff" }, { "type": "color", "id": "overlay_color", "label": "Overlay", "default": "#000000" }, { "type": "range", "id": "overlay_opacity", "label": "Overlay opacity", "min": 0, "max": 100, "step": 1, "unit": "%", "default": 30 }, { "type": "text", "id": "subheading", "label": "Sub-heading" }, { "type": "text", "id": "title", "label": "Heading", "default": "Tell your story" }, { "type": "richtext", "id": "content", "label": "Text", "default": "<p>Add your own custom content to give more information about your store, availability details...</p>" } ], "presets": [ { "category": "Image", "name": "Image with text (overlay)", "settings": {} } ] } {% endschema %}

The Image With Text Overlay section is ideal for creating high-impact visuals on your Shopify store. By placing text on top of an image, you can quickly deliver powerful messages such as sales announcements, product highlights, or brand introductions.

This section helps you create professional landing pages, attractive homepages, and visually appealing marketing banners—without the need for coding. Whether you want to showcase a full-width hero image or a promotional block, this overlay section provides a stunning and responsive design that elevates your store’s overall appearance.

If you want, I can create the same format for:
✔️ Slideshow
✔️ Banner
✔️ Multicolumn
✔️ Rich Text
✔️ Featured Products
✔️ Custom Sections