Lorenza 3.0

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:

STEPS

  1. From your Customize theme editor, choose Home page from the pages drop-down menu at the top of the screen.

  2. Scroll down the list of home page sections and click the Add section button.

  3. Choose Image with text from the list of sections.

    This opens the image with text section settings.

  4. Choose the Style for the section, either Default or Contrast.

    If you select Contrast, this section uses Lorenza's contrast colors.

  5. 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:

Your browser does not support the video tag.Parallax scrolling effect on the Image with text section

  1. Choose or upload an Image to be used.

  2. (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.

  3. 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:

  4. Select the Media position: either Left or Right.

  5. Add a Small heading, Heading, and Text.

  6. Add a Link and Link text for a call to action button.

  7. Change the Text alignment to Left, Center, or Right.

  8. 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:

  9. 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.

  10. 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:

  1. 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 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. Our Video section is designed for those.

Host the video file with Shopify

To use Shopify to host this video file:

STEPS

  1. Go to the Shopify Files uploader screen in your Shopify dashboard.

  2. Use the Upload files button to add a video file from your computer.

  3. 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.

  4. Paste the link into the Video link field in the section settings.