Image with text
You can add a section that contains an image and a text block with an optional button to link customers to a new page.
To add this section, please follow the below steps:
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Add section and choose "Image with text".
Section settings
Image
The image for the section.
Image height
Determines the height of the image:
Adapt to image - Keeps the image's original aspect ratio.
Small
Medium
Large
Desktop image width
Determines the width of the image on desktop:
Small
Medium
Large
Desktop image placement
Position of the image on desktop:
Image first
Image second
Image corner radius
Set the radius of the image corners. Can be from 0px to 40px, increasing arithmetically of 1px (pixel).
Color scheme
Set the color of the section.
Content
Desktop content position
Sets the vertical position of the content on desktop:
Top - Displays the content at the top.
Middle - Displays the content in the middle.
Bottom - Displays the text at the bottom.
Desktop content alignment
Sets the alignment of the content on desktop:
Left - Aligns the content to the left.
Center - Aligns the content to the center.
Right - Aligns the content to the right.
Desktop top padding
Determines the height of the top inner space of the content. Can be from 0% to 50%, increasing arithmetically of 1% (percent).
Desktop bottom padding
Determines the height of the bottom inner space of the content. Can be from 0% to 50%, increasing arithmetically of 1% (percent).
Animations
Image behavior
Animation for the image when scroll:
None
Ambient movement
Zoom in on scroll
Mobile layout
Mobile content alignment
Sets the alignment of the content on mobile:
Left - Aligns the content to the left.
Center - Aligns the content to the center.
Right - Aligns the content to the right.
Section padding
Desktop left padding
Determines the width of the left inner space of the section on desktop. Can be from 0px to 100px, increasing arithmetically of 2px (pixel).
Desktop right padding
Determines the width of the right inner space of the section on desktop. Can be from 0px to 100px, increasing arithmetically of 2px (pixel).
Top padding
Determines the height of the top inner space of the section. Can be from 0px to 150px, increasing arithmetically of 2px (pixel).
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0px to 150px, increasing arithmetically of 2px (pixel).
Caption block
Text
The text for this block.
Text style
The style of the text:
Body
Subtitle
Text size
The size of the text:
Small
Medium
Large
Bottom margin
Adjust the space between the bottom edge of a block. Can be from 0px to 150px, increasing arithmetically of 2px (pixel).
Heading block
Heading
The heading for this block.
Heading size
The size of the heading text:
Small
Medium
Large
Extra large
Bottom margin
Adjust the space between the bottom edge of a block. Can be from 0px to 150px, increasing arithmetically of 2px (pixel).
Text block
Description
The paragraph content for this block.
Text style
The style of the text:
Body
Subtitle
Bottom margin
Adjust the space between the bottom edge of a block. Can be from 0px to 150px, increasing arithmetically of 2px (pixel).
Button block
Button label
The text that displays on the button.
Button link
The URL that you want the button to link to.
Button style
Style of the button:
Filled
Text link
Outlined
Bottom margin
Adjust the space between the bottom edge of a block. Can be from 0px to 150px, increasing arithmetically of 2px (pixel).
Last updated