Taiga
documentation

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.

✅ 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.
Opacity Slider: 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 Toggle: Choose to display either an image or a video, enhancing the background of the hero section.
Desktop Media: Select an image or link a video URL (supports YouTube, Vimeo, and MP4 files). More info on videos and images in Taiga
Mobile Media: Optional image picker and video URL allow for different content on mobile devices; if left empty, desktop settings will apply.

 

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.