The Images with text section combines up to two layered images with a separate text area. Use it to tell your brand story, introduce a collection, or highlight a product feature. On desktop, the images and content appear side by side, with an optional parallax effect.
Demo usage
The section appears on the About page – Concept Demo, in the “Our Journey” area. The Concept 6.1.0 page.about.json template uses two portrait images, Image first placement, and parallax.
Steps:
Add the Images with text section
- In Shopify admin, go to Online Store > Themes and click Customize on your Concept theme.
- Open the page or template you want to edit.
- Click Add section and select Images with text.
- Move the section to your preferred position and click Save.
Upload images and adjust the layout
- Open the Images with text section settings.
- Choose Image for the main image and Image 2 for the second, overlapping image. You can also use just one image.
- Choose an Image ratio: Adapt to image, Square, Portrait, Landscape, Wide, or Rounded.
- Set Desktop image width to Small, Medium, or Large.
- Set Desktop image placement to Image first or Image second to control which side holds the images.
- Adjust Desktop content alignment and Mobile content alignment independently.
- On mobile, the image area appears before the content. There is no separate mobile-image picker for this section.
- Click Save.
Add blocks
- Under the section, click Add block.
- Add a Heading block for your title. Adjust the heading size and tag, and optionally apply Highlighted text, Highlighted scribble, or Enable reveal effect.
- Add a Subheading block for a short introductory line.
- Add a Text block for your description. Choose its font, size, optional secondary color, and text highlight style.
- Add a Button block with a label and destination. Choose Solid button, Outline button, or Link, and adjust the size or icon.
- Alternatively, add a Link block for a simple text link.
- Use an Icon block to display a built-in icon or custom image, with optional link and accessibility text.
- Use an Image block to place an additional image inside the text area, not in the layered main image area. Set it to full width or customize its desktop/mobile maximum widths.
- Add an Empty space block to control the spacing between content blocks on desktop and mobile.
- Add a Custom Liquid block for custom content, or an App block when supported by an installed app.
- Drag the blocks into the preferred order and click Save.
Customize colors, parallax, and spacing
- Under Colors, customize the text, background, highlight, and button colors or gradients.
- Under Section, adjust Top padding and Bottom padding.
- Optionally enable Show section divider, Make section full width, or Make section rounded.
- Turn Enable parallax effect on or off. With two images, the effect is applied to the second, overlapping image; with only the main image, the main image can move vertically during scrolling.
- Preview the section on desktop and mobile, then click Save.
Theme update
Concept 1.5.0 (April 26, 2024): Fixed the text alignment settings in the Images with text section. This fix is included in Concept 1.5.0 and later. See the official Concept release notes.
Images with text vs. Image with text
| Section | Main difference |
|---|---|
| Images with text | Supports two layered images alongside a separate text area; the second image can move with the parallax effect. |
| Image with text | Uses one main image beside content, with separate desktop/mobile image options. |
| Images with text overlay | Displays text over multiple background images, rather than in a separate side-by-side content area. |
Troubleshooting
- Only one image appears: Make sure you uploaded both Image and Image 2 in the section settings. An Image content block is separate from these settings.
- Text is aligned incorrectly: Check Desktop content alignment and Mobile content alignment separately.
- Images appear cropped: Try Adapt to image under Image ratio, and check the uploaded images' proportions.
- The second image does not animate: Check that Image 2 is selected and Enable parallax effect is turned on. Preview while scrolling.
- Cannot upload a separate mobile image: This section does not provide a mobile image picker. The desktop images are used in the mobile layout.
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 Image with Text Section in Concept
How to Set Up the Compact Product Bundle Section in Concept