The Image with text section adds a single image and marketing call to action block to your home page. It's a great way to introduce a product collection or something new and exciting.
Set up an image with text section
To set up an Image with text section on your home page:
STEPS
From your Customize theme editor, choose Home page from the pages drop-down menu at the top of the screen.
Scroll down the list of home page sections and click the Add section button.
Choose Image with text from the list of sections.
This opens the image with text section settings.
Choose the Style for the section, either Default or Contrast.
If you select Contrast, this section uses Lorenza's contrast colors.
Choose whether to Enable animation for this section.
This enables a . This effect makes it look like the image is moving as customers scroll passed. You can see this effect in action in the video below:
Your browser does not support the video tag.Parallax scrolling effect on the Image with text section
Choose or upload an Image to be used.
(Optional.) Add a Video link.
Your Image is used as a fallback for the video, if you've added a video link.
For more information about adding videos, see Add a video to an image with text section.
Select the Media width: either 2/3 (two-thirds the width of the page) or 1/2 (one half the width of the page). See examples below:
Select the Media position: either Left or Right.
Add a Small heading, Heading, and Text.
Add a Link and Link text for a call to action button.
Change the Text alignment to Left, Center, or Right.
Tweak the Text color, Text container color, Button text color, and Border button color.
The Text container color can add a box around this section's text. You can see it in pink in the image below:
Tweak the Max width of text.
The text max width setting gives you extra control over how the heading and text look, and where the line breaks in the paragraph.
Return to the list of Home page sections to find your new Image with text section.
Use the drag handles to rearrange the order of your Home page sections:
Click Save.
Settings reference
The image with text section has the following settings:
Style
Choose a section style, either Default or Contrast. This affects the colors of the current section.
Enable animation
Add a to the current section.
Image
Select or upload an image to be associated with the current section.
Video link
Paste a link to an MP4 file that should be auto-played in the image with text block, taking the place of the image.
For more information, see Add a video to an image with text section.
Media width
Change the width of image in this section. Either 2/3 (two-thirds of the width of the page) or 1/2 (one half the width of the page).
Media position
Change where the image appears in relation to the featured products. Either Left or Right.
Small heading
Add a small heading to be displayed above the heading.
We recommend keeping this to just a word or two.
Heading
Add heading text to be used for the section.
We recommend keeping this to just a few words long.
Text
Add subheading text to be displayed below the heading text.
We recommend keeping this to a short sentence or two.
Link
Choose a link to be displayed as a call to action button.
Link text
Add the call to action button text.
Text alignment
Set the text alignment for the section. Either Left, Center, or Right.
Text color
Choose the color of this section's text.
Text container color
Choose the color of this section's text area.
Button text color
Choose the color of the button text.
Button border color
Choose the color of the button's border.
Max width of text
Change how wide the heading and text can be at a maximum.
Add a video to an image with text section
The image with text home page section allows you to add an auto-playing video instead of an image.
Before you start setting this up, you should know a few things:
✓ You'll need your video as an MP4 video file.
✓ For the best customer experience, we strongly recommend using a 20- to 30-second video that's under 10MB in size.
✗ You can't use a service like YouTube or Vimeo to host this video. Our Video section is designed for those.
Host the video file with Shopify
To use Shopify to host this video file:
STEPS
Use the Upload files button to add a video file from your computer.
Once it has been uploaded, copy the URL next to the file.
It should look something like this: https://cdn.shopify.com/s/files/1/0074/8165/5349/files/my-video-filename.mp4.
Paste the link into the Video link field in the section settings.
Home page
Collage
Gallery
Colors
Go to the uploader screen in your Shopify dashboard.