Image with text overlay solution

Store Design
,
1

Hi

Im looking for an easy and efficient way to have in theme editor sections of image with text overlay.

Just a simple solution to display image and text over it that would be easy to manage the text positioning editing etc. It should also work with shopify translate & adapt app.

Any ideas ?

2

Hi @JustinasR clean way to handle this is to create a custom section in your theme. Here’s a ready-to-use solution that works with Shopify Translate & Adapt too:

Steps:

  1. Go to Shopify Admin → Online Store → Themes → Edit Code
  2. Under sections folder, create a new file: image-with-text-overlay.liquid
  3. Paste the code below and save
  4. In Theme Editor, click “Add Section” — you’ll see “Image Overlay”

Features:

  • Image picker
  • Heading + rich text fields (Translate & Adapt compatible)
  • Text position selector (top-left, center, bottom-center etc.)
  • Text color picker
  • Dark overlay opacity slider
  • Optional button with link
<style>
  .overlay-section {
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  .overlay-section img {
    width: 100%;
    height: auto;
    display: block;
  }
  .overlay-text {
    position: absolute;
    padding: 20px;
    color: {{ section.settings.text_color }};
  }
  .overlay-text.top-left { top: 10%; left: 5%; }
  .overlay-text.top-center { top: 10%; left: 50%; transform: translateX(-50%); }
  .overlay-text.center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
  .overlay-text.bottom-left { bottom: 10%; left: 5%; }
  .overlay-text.bottom-center { bottom: 10%; left: 50%; transform: translateX(-50%); }
  .overlay-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,{{ section.settings.overlay_opacity | divided_by: 100.0 }});
  }
</style>

<div class="overlay-section">
  {% if section.settings.image %}
    {{ section.settings.image | image_url: width: 1500 | image_tag: loading: 'lazy' }}
  {% endif %}
  <div class="overlay-bg"></div>
  <div class="overlay-text {{ section.settings.text_position }}">
    {% if section.settings.title != blank %}
      <h2>{{ section.settings.title }}</h2>
    {% endif %}
    {% if section.settings.text != blank %}
      <div>{{ section.settings.text }}</div>
    {% endif %}
    {% if section.settings.button_label != blank %}
      <a href="{{ section.settings.button_link }}" style="display:inline-block; margin-top:10px; padding:10px 20px; background:{{ section.settings.text_color }}; color:#000; text-decoration:none;">
        {{ section.settings.button_label }}
      </a>
    {% endif %}
  </div>
</div>

{% schema %}
{
  "name": "Image Overlay",
  "settings": [
    { "type": "image_picker", "id": "image", "label": "Image" },
    { "type": "text", "id": "title", "label": "Heading", "default": "Your Heading" },
    { "type": "richtext", "id": "text", "label": "Description", "default": "<p>Your text here</p>" },
    { "type": "text", "id": "button_label", "label": "Button Label" },
    { "type": "url", "id": "button_link", "label": "Button Link" },
    {
      "type": "select",
      "id": "text_position",
      "label": "Text Position",
      "options": [
        { "value": "top-left", "label": "Top Left" },
        { "value": "top-center", "label": "Top Center" },
        { "value": "center", "label": "Center" },
        { "value": "bottom-left", "label": "Bottom Left" },
        { "value": "bottom-center", "label": "Bottom Center" }
      ],
      "default": "center"
    },
    { "type": "color", "id": "text_color", "label": "Text Color", "default": "#ffffff" },
    {
      "type": "range",
      "id": "overlay_opacity",
      "min": 0, "max": 80, "step": 5, "unit": "%",
      "label": "Dark Overlay Opacity",
      "default": 30
    }
  ],
  "presets": [{ "name": "Image Overlay" }]
}
{% endschema %}

And also if this will work then don’t forget to like and mark as solution on it

3

Most modern themes have similar section, you may only need to add small “Custom CSS” for positioning.
Horizon family, for example, allows text content positioning out of the box.

Or ask Shopify AI to generate a section.
Or use an app like “Sections store”.

Generally, I would not recommend editing theme code as this will make theme updates more complex.

The code above is ok’ish if only one instance per page because CSS rules are not scoped to each particular section.
When there are multiple instances on the page, some settings (like “text color”) from the last one will apply to all of them.

4

Hey @JustinasR

Have you tried asking Shopify Sidekick for this? It’s the best for quick sections development work like this. Give it as detailed explanation as you can for the best results.

Best,
Moeed

7

Before changing any code, I’d check whether your theme already has built-in settings for the Image Banner/Image with Text Overlay section. Many newer OS 2.0 themes let you adjust the content position, text alignment, overlay opacity, and even separate desktop/mobile images directly from the theme editor.

If those settings aren’t available, then a small CSS or Liquid customization is usually the right approach. Knowing which theme you’re using (Dawn, Prestige, Impulse, etc.) will make it much easier to suggest the best solution.

8

Hey, for this you’ve to do the custom code in the theme Editor.

9

Hi @JustinasR,

Go to online store > edit theme
Click add section and select Image banner
Now you can easily upload your image, edit text,and adjust the positioning directly in the setting.
For your multilingual requirments, this area is completely capatible with the Shopify Translate & Adapt software.