Hero with overlay links

Hero with Overlay Links section transforms a standard hero image into an interactive experience by allowing the addition of up to six text overlay links directly on the image. This setup is perfect for creating visually striking banners that not only capture attention but also guide visitors to various parts of your website through clickable links.

Adding the Hero with Overlay Links section

Steps

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

Section Settings

General

  • Color Scheme: Customize the color theme to align with your site’s aesthetic.
  • Overlay Opacity: Adjust the transparency of the text overlays to ensure readability without sacrificing the visual impact of the hero image.

Desktop Layout

  • Section Height: Choose between a full screen (relative) height or a specified pixel height, adjustable via a slider from 200px to 1200px.
  • Margins: Set the top and bottom margins to create balanced spacing within the overall layout.

Mobile Layout

  • Section Height: Options include full screen (relative) or a custom pixel height, with a slider range from 200px to 800px.
  • Margins: Adjust the top and bottom margins to optimize the appearance on mobile devices.

Block Settings

Image or Video Block

  • Media type: Choose what this slot 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 using Mixed media, you can configure both Default image, Mobile image, Video, and Mobile video settings as described above. The video is used when it is available, and the image is the backup when the video is missing, helpful if you use dynamic sources.

Overlay Link Block

  • Heading: Enter the text that will appear as clickable links over the hero image.
  • Link URL: Provide the URL where each link should redirect, making each text block a functional navigation point.
  • Heading Tag: Choose the appropriate HTML tag for each link to influence SEO and match the visual hierarchy of your design.
  • Size Modifier: Adjust the text size for both desktop and mobile to ensure the links are prominent yet not overwhelming.