Image with Text overlay

Offer a versatile option of using text and images within the same immediate space - informing and illustrating at the same time.

Adding the Image with text overlay section

To add the “image with text overlay” section, head to your theme’s sections area:

  1. Admin

  2. Online Store → Themes →Customize

  3. Sections

  4. Choose "Add section"

  5. Select "Image with text overlay"

You will then be presented with the following options:

Settings

Image

When you first add the section, you will see something similar to this, with an empty image area and default text:

To add an image, choose “select image” and the section will update, similar to the below:

Note

We recommend using an image which is 1800 x 1200 pixels.

Tip

For further information relating to images and aspect ratio, please take a look at our great help document here:

Enable parallax effect

Parallax, also known as slip-scroll, gives the effect that your image is “underneath” your main website’s content, animated to look as though it is sliding along, whilst hiding under a top layer.

As you scroll up and down the page, more of this image is ‘revealed’, depending on the direction you scroll in.

This provides an extra sprinkling of dynamism to your page, but is not necessarily to everyone’s taste, so we have provided the option to toggle it on and off.

Heading

Adjust your section’s heading by editing the 'heading' text entry field.

This is plain text, so does not include bold or italic.

Tip

This is not a required field, so if you prefer not to have a heading, just leave the box blank.

Text

Add your main block of text here. You can use links, italic and bold to enhance your message.

An example of some placeholder text:

Image alignment

Choose which part of your image is used as the anchor point for the section. This helps you show the most prominent part of your image, within the constraints of the ‘window’.

As an extreme example, take a look at the below and you can see how using certain areas of an image can really affect the presentation and message you are trying to deliver (the same image was used for all examples):

Top:

Middle:

Bottom:

Section height

Choose how high the section is for your image.

You have the options of extra small, small, medium, large and extra large.

An example of extra small:

An example of extra large:

Section width

Fixed

An invisible 'grid' is used to determine your storefront’s proportions via code.

This option maps the image to this grid and maintains a small amount of margin/white space between the image and the browser edges.

Example:

Full width

This will always take your image to the very edges of your browser window.

Example:

Button label

This will appear as button text, once you have also added a link to the button (shown in the step below - “button link”).

Add a link by clicking in the entry field. Choose a link from the list which pops up, or add your own manually

Here’s how your button label and button link will look, alongside the rest of the completed section components: