Image text overlay

The Image Text Overlay section blends visuals and text in a captivating layout, ideal for making impactful statements or highlighting key information on your store. 

Steps

  1. Open the Theme Editor.
    Navigate to your Shopify dashboard and open the Theme Editor for your store.
  2. Add the Image text overlay section.
    Click on 'Add section' and select 'Image text overlay' to integrate this section into your page layout.
  3. Save your changes.
    After customizing the Image with text overlay section, click 'Save' to implement your adjustments.

Section Settings 

  • Color Scheme: Set the overall tone for the background.
  • Content Color Scheme: Choose a color for overlaying container background, text and buttons.

Desktop Layout Settings

  • Full Width Toggle: Opt for a full-screen stretch to make a bold visual impact.
  • Section Height: Choose between 'Relative', 'Natural', or a precise pixel height ('Set by Pixels'), with a slider adjustment from 200px to 1200px for fixed heights.
  • Text Content Width: Adjust the text box width from 'Wide', 'Default', to 'Narrow'.
  • Text Position: Select text placement from options: Top Left, Top Center, Top Right, Left, Center, Right or Bottom Left, Bottom Center and Bottom Right.
  • Full Width Button: Optimize button design to match the content's width.
  • Margins: Fine-tune the top and bottom spacing for a polished layout.

Mobile Layout Settings

  • Section Height: Choose between 'Relative', 'Natural', or a precise pixel height ('Set by Pixels'). If you chose 'Set by Pixels', you can make a slider adjustment from 200px to 800px for fixed heights.
  • Content positioning: Choose from 'Top', 'Center', 'Bottom'.
  • Full Width Button:Optimize button design to match the content's width.
  • Margins: Fine-tune the top and bottom spacing for a good looking mobile layout.

Customize with Blocks

Image or Video

Media type
Choose what this section shows: a still image, an uploaded (Shopify) video, a YouTube or Vimeo video, or mixed media (both an image and an uploaded video together).

Image settings

  • Default image: The primary image used for both mobile and desktop. This field is mandatory.
  • Mobile image: An optional image used specifically for mobile devices. If left empty, the default image is used.

Video settings

  • Video: The primary video file used for both mobile and desktop. This field is mandatory.
  • Mobile video: An optional video file used specifically for mobile devices. If left empty, the default video is used.

External video settings

  • Default video URL: Paste a link to a YouTube or Vimeo video. This serves as the primary video source.
  • Mobile video URL: An optional YouTube or Vimeo link for mobile devices. If left empty, the default video is used.
  • External video’s aspect ratio: Enter the aspect ratio of the desktop video (e.g., 16:9) to prevent cropping issues.
  • External mobile video’s aspect ratio: Enter the aspect ratio of the mobile video (e.g., 9:16) to prevent cropping issues.

Mixed media settings

When Mixed media is selected, you can use Default image, Mobile image, Video, and Mobile video as above. The theme prefers the uploaded video when it is set; images are the fallback when the video is not available.

Text

Subheading & Heading: Add subheadings and headings, each with customizable HTML tags, size modifiers, and top margins for both desktop and mobile views.
Text: Incorporate rich text editor content with adjustable size and top margins.

Button

Customization Options: Include up to two buttons per section, with editable labels, links, styles (Primary, Secondary, Link), size modifiers, and margin adjustments.