Image with text
Image with text puts a picture on one side of the page and a text column on the other, so a photo and the words explaining it are read together. Use it when the message needs a heading, a sentence or two and a button, and the wording must stay readable instead of competing with the image behind it.
Because the text sits beside the image and not on top of it, this section works with busy photography that would make an overlay banner hard to read. The text is built from blocks you add, such as a heading, description and buttons. Image position on desktop sets whether the image sits on the left or the right.
How to add it
- In the Theme Editor, open the template where you want the section.
- Select Add section, then choose Image with text.
Settings
View the section guide .
General
| Setting | Options | Description |
|---|---|---|
| Vertical alignment on desktop | • Left | Sets where the text column sits against the height of the image on desktop. Left puts the text level with the top of the image, Center puts it in the middle, and Right puts it level with the bottom. Default: center. |
Heading content
| Setting | Options | Description |
|---|---|---|
| Content alignment | • Left | Sets where each line of text starts inside the text column. Left is easiest to read for longer text, and Center suits a short headline with one button. Default: start. |
Image
| Setting | Options | Description |
|---|---|---|
| Image | The picture shoppers see beside the wording. 696px x 500px recommended. Choose a photo that shows the product or the idea the text talks about. A placeholder shows until you choose an image. | |
| Image width | How much of the section the picture takes on desktop. The text column gets the rest. Range: 40 - 70%, step 1. Default: 50. The image is automatically optimized for mobile. | |
| Image position on desktop | • Left | Sets which side of the text the image sits on, on wide screens. The image appears above the text on mobile. Default: left. |
Layout
| Setting | Options | Description |
|---|---|---|
| Column gap | • No gap | Sets the space between the image and the text column. With No gap the two touch. Default: medium. |
Column gap sets the space between the image and the text.
Appearance
| Setting | Options | Description |
|---|---|---|
| Color scheme | Sets the background and text colors of the section. Edit color schemes in Theme settings. | |
| Background color | Sets the color of the panel behind the text column. | |
| Text color | Sets the color of the text inside the colored panel. It is used only when Background color is set. Default: #1A1410. |
Section layout
| Setting | Options | Description |
|---|---|---|
| Section width | • Page width | Sets how far the section spreads across the screen. Page width lines up with the page width from Theme settings, Wide runs close to both screen edges, and Full width fills the browser window. Default: fix_width. |
| Top padding | Space above the section. Increase it when the section before this one sits too close. Range: 0 - 100, step 1 px. Default: 48. | |
| Bottom padding | Space below the section. Increase it when the next section feels cramped against this one. Range: 0 - 100, step 1 px. Default: 48. | |
| Show top border | Draws a thin line along the top edge of the section. Useful when this section and the one above share a background color. Default: off. |
No comments yet