Image with text
Here is an example of what this section can look like:
Settings
First section
When this section is the first one at the top of the page, make sure this box is checked. It helps with SEO and page performance in the following technical ways:
- It will load the image as loading="eager" instead of loading="lazy"
- It will remove the fade in image animation if it is active in Style/Theme settings so that the image loads onto the page
Add space above or below
Depending on the sections that are above or below this section, you may want to add some extra space for a more pleasing layout.
Text animation
See the documentation for text animations for more details.
Color scheme
Choose from one of the theme's color schemes as the background for the section.
Text alignment
Choose whether to align text left or centered.
Image
The image for the section
Image placement (desktop)
Choose to show the image on the left or right side of the section. The image will automatically be above the text on mobile.
Width (desktop)
Choose how wide you want the image to be on desktop. It will automatically fill the whole screen on mobile.
Image shape
Choose from several image shapes, including different rectangular shapes. The image will automatically crop itself to fit this shape and the whole section will also adjust based on the size of the image you choose. If you have a lot of text in this section, we recommend a taller image for a taller section that can accommodate more text.
Color underneath section
See our documentation on Color underneath sections to learn more about how to use this setting.
Blocks
Heading
Heading will automatically be in the heading font chosen in Typography/Theme settings.
Heading
The text for the block.
Heading size
Select the size of the text for the heading.
Subheading
Subheading will automatically be the body font chosen in Typography/Theme settings, in all caps and bold.
Subheading
The text for the block.
Subheading size
Select the size of the text for the heading.
Text
Text will be the body font chosen in Typography/Theme settings.
Text
The text for the block.
Text size
Select the size of the text.
Make text bold
Check this box to make the text bold, which can be helpful for legibility on a transparent background.
Buttons
Buttons will be automatically colored based on the color scheme chosen as the text box background. The following applies to both Button 1 & Button 2.
Button label
The text for the button. To hide either of the buttons, leave the label for that button blank.
Button link
Add a link to the page you want the button to lead to. If it's a page outside of the store, make sure it's the full URL with "https://".