Image With Text Block – Shopify Section

The Image With Text Block section is a visually appealing Shopify feature that allows you to highlight important content using a combination of images and text. It is perfect for showcasing product features, brand stories, or promotional messages in a clean and modern layout. With full customization options, it helps your store look professional and user-friendly.

<section class="Section" id="section-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="image-with-text-block">
  <div class="FlexboxIeFix">
    <div class="ImageHero ImageHero--large {% if section.settings.enable_sticky_effect %}ImageHero--sticky-background{% endif %}">
      <div class="ImageHero__ImageWrapper">
        {%- unless section.settings.image != blank -%}
          <div class="PlaceholderBackground PlaceholderBackground--Dark">
            {{ 'lifestyle-1' | placeholder_svg_tag: 'PlaceholderBackground__Svg' }}
          </div>
        {%- endunless -%}
      </div>

      {%- if section.settings.title != blank or section.settings.content != blank or section.settings.button_label != blank -%}
        <div class="ImageHero__Wrapper">
          <div class="ImageHero__Block ImageHero__Block--{{ section.settings.block_size }} image-hero__block--{{ section.settings.button_position }}">
            {%- if section.settings.title != blank -%}
              <h3 class="ImageHero__BlockHeading Heading u-h6">{{ section.settings.title | escape }}</h3>
            {%- endif -%}

            {%- if section.settings.content != blank -%}
              <div class="ImageHero__BlockContent Rte">
                {{ section.settings.content }}
              </div>
            {%- endif -%}

            {%- if section.settings.button_label != blank -%}
              <a href="{{ section.settings.button_link }}" class="ImageHero__BlockLink button-base button-style--{{ section.settings.button_style }}">{{ section.settings.button_label | escape }}</a>
            {%- endif -%}
          </div>
        </div>
      {%- endif -%}
    </div>
  </div>
</section>

<style>
  #section-{{ section.id }} .Heading,
  #section-{{ section.id }} .ImageHero__BlockContent {
    color: {{ section.settings.text_color }};
  }

  #section-{{ section.id }} .ImageHero__Block {
    background: transparent;
  }
  
  #section-{{ section.id }} .ImageHero {
    {% if section.settings.image %}
      background-image: url('{{ section.settings.image | img_url: '1500x' }}');
    {% endif %}
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  @media (max-width: 767px) {
    #section-{{ section.id }} .ImageHero {
      {% if section.settings.mobile_image %}
        background-image: url('{{ section.settings.mobile_image | img_url: '750x' }}');
      {% elsif section.settings.image %}
        background-image: url('{{ section.settings.image | img_url: '750x' }}');
      {% endif %}
    }
  }

  {% if section.settings.enable_sticky_effect %}
  .ImageHero--sticky-background {
    background-attachment: fixed;
  }
  {% endif %}

  .ImageHero__ImageWrapper {
    min-height: 480px;
  }

  @media (min-width: 768px) {
    .ImageHero__ImageWrapper {
      min-height: 600px;
    }
  }

  .ImageHero__Wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
  }

  .ImageHero__Block {
    position: absolute;
    margin: 30px;
    padding: 20px;
  }

  .image-hero__block--bottom_left { bottom: 0; left: 0; top: auto; right: auto; }
  .image-hero__block--bottom_right { bottom: 0; right: 0; top: auto; left: auto; }
  .image-hero__block--bottom_center { bottom: 0; left: 50%; transform: translateX(-50%); top: auto; right: auto; text-align: center; }
  .image-hero__block--top_left { top: 0; left: 0; bottom: auto; right: auto; }
  .image-hero__block--top_right { top: 0; right: 0; bottom: auto; left: auto; }
  .image-hero__block--middle_center { top: 50%; left: 50%; transform: translate(-50%, -50%); bottom: auto; right: auto; text-align: center; }

  /* --- Button Styles --- */
  .button-base {
    display: inline-block;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    border-width: 1px;
    border-style: solid;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
  }

  /* Hollow Button (Without Hover) */
  #section-{{ section.id }} .button-style--hollow {
    background-color: transparent;
    border-color: {{ section.settings.button_border_color }};
    color: {{ section.settings.button_text_color }};
  }

  /* Solid Button (Without Hover) */
  #section-{{ section.id }} .button-style--solid {
    background-color: {{ section.settings.button_bg_color }};
    border-color: {{ section.settings.button_border_color }};
    color: {{ section.settings.button_text_color }};
  }

  /* Button Hover (Dono styles ke liye) */
  #section-{{ section.id }} .ImageHero__BlockLink:hover {
    background-color: {{ section.settings.button_bg_hover_color }} !important;
    border-color: {{ section.settings.button_border_hover_color }} !important;
    color: {{ section.settings.button_text_hover_color }} !important;
  }
</style>

{% schema %}
{
  "name": "Image with text block",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image",
      "info": "1500 x 800px .jpg recommended"
    },
    {
      "type": "image_picker",
      "id": "mobile_image",
      "label": "Mobile Image",
      "info": "750px width recommended. If none is set, the desktop image will be used."
    },
    {
      "type": "checkbox",
      "id": "enable_sticky_effect",
      "label": "Enable sticky background effect",
      "default": true
    },
    {
      "type": "header",
      "content": "Content & Layout"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Heading & Text Color",
      "default": "#FFFFFF"
    },
    {
      "type": "select",
      "id": "block_size",
      "label": "Block size",
      "options": [
        { "value": "small", "label": "Small" },
        { "value": "normal", "label": "Normal" },
        { "value": "large", "label": "Large" }
      ],
      "default": "small"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "READY TO STITCH"
    },
    {
      "type": "richtext",
      "id": "content",
      "label": "Text",
      "default": "<p></p>"
    },
    {
      "type": "select",
      "id": "button_position",
      "label": "Block Position",
      "options": [
        { "value": "bottom_left", "label": "Bottom Left" },
        { "value": "bottom_right", "label": "Bottom Right" },
        { "value": "bottom_center", "label": "Bottom Center" },
        { "value": "top_left", "label": "Top Left" },
        { "value": "top_right", "label": "Top Right" },
        { "value": "middle_center", "label": "Middle Center" }
      ],
      "default": "bottom_left"
    },
    {
      "type": "header",
      "content": "Button"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button label",
      "default": "Shop Now"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button link"
    },
    {
      "type": "select",
      "id": "button_style",
      "label": "Button Style",
      "options": [
        { "value": "hollow", "label": "Hollow" },
        { "value": "solid", "label": "Solid" }
      ],
      "default": "hollow"
    },
    {
      "type": "header",
      "content": "Button Colors (Without Hover)"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button Text",
      "default": "#FFFFFF"
    },
    {
      "type": "color",
      "id": "button_bg_color",
      "label": "Button Background (for Solid style)",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "button_border_color",
      "label": "Button Border",
      "default": "#FFFFFF"
    },
    {
      "type": "header",
      "content": "Button Colors (On Hover)"
    },
    {
      "type": "color",
      "id": "button_text_hover_color",
      "label": "Button Text Hover",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "button_bg_hover_color",
      "label": "Button Background Hover",
      "default": "#FFFFFF"
    },
    {
      "type": "color",
      "id": "button_border_hover_color",
      "label": "Button Border Hover",
      "default": "#FFFFFF"
    }
  ],
  "presets": [
    {
      "category": "Image",
      "name": "Image with text block",
      "settings": {}
    }
  ]
}
{% endschema %} }} }}">

This Image With Text Block section improves the visual flow of your Shopify page and makes your content easy to understand. The left-right image and text alignment keeps your design balanced and highly readable. You can use this block to highlight products, explain features, show comparisons, or deliver a message with strong visuals.

Its clean design works beautifully on both desktop and mobile, making it one of the most commonly used sections in modern e-commerce themes.

Want more?

I can create the same format for:
✔️ Slideshow Section
✔️ Featured Collection Section
✔️ Product Grid Section
✔️ Multicolumn Section
✔️ Custom HTML Section
✔️ FAQ Dropdown Section

.

Search Suggest

Image With Text Block – Shopify Section

Want more?

Post a Comment

Oops! No Internet!

Cookies Consent

Safelink Converter