The Image with text section places an image beside customizable text and other content. Use it to introduce a product feature, tell your brand story, or highlight information with a button or link. The image can appear on either side, with a separate image and layout settings for mobile.
Demo usage
In the Concept theme, Image with text is enabled on the default product template and the Earphones, Speakers, and Sibling product templates. For example, the Whisper Flow – Concept Demo product page displays the sections “Compact Power Unleashed” and “Microphone: Pure Clarity.” It also appears in the Theme Features page template as “Testimonial banner.” Two Image with text sections are present but disabled in the Accessories product template.
Steps:
Add the Image with text section
- In Shopify admin, go to Online Store > Themes and click Customize on your Concept theme.
- Open the page or product template you want to edit.
- Click Add section and select Image with text.
- Drag the section to your preferred position and click Save.
Set up the desktop image and layout
- Open the Image with text section settings.
- Select an Image and choose its Image height (a fixed height, Adapt to image, or full-screen height).
- Choose Image width: Small, Medium, or Large.
- Set Layout to Image first or Text first to place the image on the left or right.
- Adjust Text alignment and Content position (top, center, or bottom).
- Click Save.
Adjust the mobile layout
- Under Mobile layout, optionally upload a separate Mobile image.
- Select Mobile image height and Mobile text alignment.
- If no mobile image is provided, the desktop image is used on mobile.
- Preview the section in mobile view and click Save.
Add blocks
- Under the section, click Add block.
- Choose Heading to add a title. Set its size and HTML heading tag; use Highlighted text, Highlighted scribble, or Enable reveal effect if needed.
- Choose Subheading to add a short tagline and set its size and optional secondary color.
- Choose Text to add a description. Adjust its font and size, or select Custom size for additional typography controls. Text highlighting is also available.
- Choose Button to add a call to action. Enter its label and URL, then choose the button style, size, external-link option, and icon.
- Choose Link for a simple text link instead of a button.
- Click Add block > Icon to select a built-in icon or upload an icon image. Adjust the icon width and optionally add a link and accessibility text.
- Click Add block > Image to insert an additional image within the text/content area, not to replace the section's main image. Choose Full width or set custom desktop/mobile widths.
- Use a Spacing block to adjust the space between content blocks on desktop and mobile.
- Use a Custom liquid block for your own Liquid content, or add an App block when supported by an installed app.
- Drag blocks to reorder them and click Save.
Customize colors, parallax, and section spacing
- Under Colors, adjust the text, background, secondary background, highlight, and button colors or gradients.
- Under Section, adjust Top padding and Bottom padding.
- Optionally enable Section divider, Full width, or Rounded.
- Turn on Enable parallax effect to animate the main image while scrolling.
- When parallax is enabled, select Parallax direction: Vertical, Horizontal, or Zoom.
- Preview the desktop and mobile layouts, then click Save.
Image with text vs. Image with text overlay
| Section | Main difference |
|---|---|
Image with text (image-with-text.liquid) |
Displays an image and a separate content area side by side on desktop. |
Image with text overlay (image-with-text-overlay.liquid) |
Places text and buttons directly over a background image. |
Troubleshooting
- The image is missing: Select the main Image in the section settings. The extra Image block only adds an image inside the content area.
- The mobile image is not showing: Make sure a desktop Image is selected and upload a Mobile image if you want a different visual.
- The image is cropped: Change Image height or Mobile image height to Adapt to image, and preview again.
- The layout does not change on mobile: Image first / Text first controls the desktop side-by-side order; the mobile layout stacks the content.
- Parallax is not visible: Confirm Enable parallax effect is on and check the section while scrolling.
- The section is not visible on a product: Check that the product is assigned to the intended template and that the section is enabled. The exported Accessories template has these sections disabled.
Need Further Assistance
If you encounter any issues or need additional help with your Concept theme, please contact our support team via our Ticket System for assistance within 8 hours.
Share:
How to Set Up the Collage Section in Concept
How to Set Up the Images with Text Section in Concept