Image with text

The Image with Text section allows Shopify merchants to combine visuals with compelling text content. This section is ideal for storytelling, product highlights, or brand messages, offering customizable layout options to enhance the user experience.

How to add image with text section

Quick Start Guide

‍

Access the Theme Editor: Navigate to `Online Store > Themes > Customize`.
Add a Section: Click on `Add section` and select the desired section from the list of available sections.
Customize Your Section: Adjust the settings such as display type, alignment, and visibility according to your preferences.
‍

If you need a more detailed, step-by-step guide on accessing the theme editor, adding sections and blocks, refer to our Setting up theme sections and blocks article.

General section settings

Within this section, you'll find common settings like containers, visibility options, and color settings that are consistent across all sections. For more detailed information on these shared settings, please refer to the Common settings between all sections article.

Note

Unlike the other sections that contain a section header, this particular section does not include one. Instead, the content is presented as blocks that overlay the image within the section.

Section Settings

Image on Desktop: Upload an image that will be displayed on desktop screens.
Image on Mobile: Upload a separate image for mobile devices to ensure optimized display.
Enable Parallax: Enable or disable a smooth scrolling effect on the image.
Image Position on Desktop: Choose whether the image appears on the left or right side on the desktop.
Image Position on Mobile: Select if the image should be above or below the text content on mobile.
Image Width on Desktop: Adjust the image width: Small, Medium, or Large.
Content position on Desktop: Adjust the vertical alignment of content on desktop screens to Top, Middle, or Bottom for optimal layout placement.
Text Alignment: Adjust text alignment for desktop and mobile views.

Color Settings

Color Scheme: Select a color scheme for the section.
Content Background: Set a custom background color for the content area.

Block Settings

Subheading: Add a subheading with adjustable size (small, medium, large).
Heading: Add up to three headings with customizable text and size (small, medium, large, extra-large).
Text: Provide rich text content, with the option to enlarge it for emphasis.
Buttons: Add up to two customizable buttons (primary or outline styles).
Icon with Text: Choose an icon from the preset library or upload a custom image. Customize the icon size and provide supporting text.
Icon: Select an icon from a predefined list or upload a custom icon to enhance the section design.
Collapsible Tab: Create collapsible content blocks with an optional icon, rich text, or dynamic content from a selected page.
Spacing: Adjust the vertical spacing for desktop and mobile (0-50px).

Custom Code: Add custom HTML or Liquid code blocks if needed.

Can't find what you're looking for?

Our support staff are here to answer your queries, so don't hesitate to write to us!