- This Image with Text section for Shopify lets you showcase visuals alongside engaging content. Easily upload an image and pair it with a heading & rich text in a responsive two-column layout. Customize colors, spacing (margins/padding), and typography (font sizes for desktop/mobile) without coding. Choose between left/right image alignment and control text positioning (left/center/right). The section automatically stacks on mobile for perfect readability. Includes lazy-loaded images (optimized at 800px width) and placeholder graphics. Ideal for product highlights, promotional banners, or feature explanations. SEO-friendly with semantic HTML (h2 titles, paragraph content). Merchants get full creative control via Shopify’s theme editor while maintaining fast loading speeds and mobile responsiveness.
- Need help implementing this? Contact a Shopify developer for professional customization and integration services to make it work perfectly for your store.
Shopify Schema Code
{% schema %}
{
"name": "Image with Text",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Heading"
},
{
"type": "richtext",
"id": "content",
"label": "Content",
"default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>"
},
{
"type": "select",
"id": "text_alignment",
"label": "Text alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "left"
},
{
"type": "select",
"id": "layout",
"label": "Image alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "right",
"label": "Right"
}
],
"default": "left"
},
{
"type": "color",
"id": "background_color",
"label": "Background color",
"default": "#ffffff"
},
{
"type": "color",
"id": "text_color",
"label": "Text color",
"default": "#000000"
},
{
"type": "header",
"content": "Spacing Settings"
},
{
"type": "range",
"id": "margin_top",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"label": "Section top margin",
"default": 50
},
{
"type": "range",
"id": "margin_bottom",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"label": "Section bottom margin",
"default": 50
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"label": "Section top padding",
"default": 50
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"label": "Section bottom padding",
"default": 50
},
{
"type": "header",
"content": "Font Settings"
},
{
"type": "range",
"id": "title_font_size_desktop",
"min": 16,
"max": 72,
"step": 2,
"unit": "px",
"label": "Title font size (desktop)",
"default": 36
},
{
"type": "range",
"id": "title_font_size_mobile",
"min": 12,
"max": 48,
"step": 2,
"unit": "px",
"label": "Title font size (mobile)",
"default": 24
},
{
"type": "range",
"id": "content_font_size_desktop",
"min": 12,
"max": 24,
"step": 1,
"unit": "px",
"label": "Content font size (desktop)",
"default": 16
},
{
"type": "range",
"id": "content_font_size_mobile",
"min": 10,
"max": 20,
"step": 1,
"unit": "px",
"label": "Content font size (mobile)",
"default": 14
},
{
"type": "range",
"id": "content_line_height",
"min": 1,
"max": 2,
"step": 0.1,
"label": "Content line height",
"default": 1.6
}
],
"presets": [
{
"name": "Image with Text",
"category": "Image"
}
]
}
{% endschema %}
Shopify Liquid Code
<div class="image-with-text">
<div class="image-with-text__container">
<div class="image-with-text__image">
{% if section.settings.image != blank %}
{{ section.settings.image | image_url: width: 800 | image_tag: loading: 'lazy' }}
{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
</div>
<div class="image-with-text__content">
<h2 class="image-with-text__title">{{ section.settings.title }}</h2>
<div class="image-with-text__text">{{ section.settings.content }}</div>
</div>
</div>
</div>
CSS Code
<style>
.image-with-text {
background-color: {{ section.settings.background_color }};
color: {{ section.settings.text_color }};
margin-top: {{ section.settings.margin_top }}px;
margin-bottom: {{ section.settings.margin_bottom }}px;
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
.image-with-text__container {
display: flex;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
flex-direction: {% if section.settings.layout == 'right' %}row-reverse{% else %}row{% endif %};
}
.image-with-text__image {
flex: 1;
padding: 0 20px;
}
.image-with-text__image img {
width: 100%;
height: auto;
display: block;
}
.image-with-text__content {
flex: 1;
padding: 0 20px;
text-align: {{ section.settings.text_alignment }};
}
.image-with-text__title {
margin-bottom: 20px;
font-size: {{ section.settings.title_font_size_desktop }}px;
}
.image-with-text__text {
font-size: {{ section.settings.content_font_size_desktop }}px;
line-height: {{ section.settings.content_line_height }};
}
@media (max-width: 768px) {
.image-with-text__container {
flex-direction: column;
}
.image-with-text__image,
.image-with-text__content {
padding: 20px 0;
width: 100%;
}
.image-with-text__title {
font-size: {{ section.settings.title_font_size_mobile }}px;
}
.image-with-text__text {
font-size: {{ section.settings.content_font_size_mobile }}px;
}
}
</style>
Key Features:
1. Schema Settings (Customization Options)
Image Upload: Merchants can upload any image
Text Content:
Editable title (heading)
Rich text content area (supports formatting)
Layout Controls:
Choose image position (left/right)
Text alignment (left/center/right)
Color Settings:
Custom background color
Custom text color
Spacing Controls:
Adjustable margins and padding
Typography Settings:
Separate font sizes for desktop/mobile
Line height control
2. Responsive Design
Automatically stacks image and text on mobile
Different font sizes for mobile vs desktop
Maintains proper spacing on all screens
3. Smart Defaults
Placeholder image appears when none is uploaded
Sample text helps merchants understand content placement
Mobile-optimized from the start
4. Technical Implementation
Uses Shopify’s section schema for backend controls
CSS variables for dynamic styling
Lazy loading for images (better performance)
Semantic HTML structure (better SEO)
With 7+ years of experience in Shopify development, eCommerce solutions, and SEO, I have successfully delivered 100+ high-performing Shopify stores that drive conversions and enhance user experience.
Latest posts by Shahrukh Miya (see all)
- How To Add Before And After Slider To Shopify? - April 12, 2025
- How to add a Table of Contents for your Blog Posts Using Shopify - April 10, 2025
- How to Add Custom Image with Text section in Shopify (Step-by-Step Guide) - April 10, 2025