Image with text
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:
-
From your theme’s “Customize” screen, choose Home page from the pages drop-down menu at the top of the screen.
-
Scroll down the list of home page settings until you see the Add section button.
-
Choose Image with text from the list of sections, and press the Add button.
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 parallax scrolling effect. 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:
-
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 an example of 2/3:
See an example of 1/2:
-
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.
-
Use the Back to settings (<) button to go back to all of the home page settings again. Use the drag handles to rearrange the order of your home page sections:
-
Use the Save button in the top-right corner when you are finished editing.
Settings
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 parallax scrolling effect 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.
Host the video file with Shopify
To use Shopify to host this video file:
-
Go to the Shopify Files uploader screen in your Shopify dashboard.
-
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.