Modular documentation
Support
Modular latest
Modular latest
  • Modular theme documentation
  • Sections
    • How to use sections
      • Section settings
      • Adding sections
      • Hiding sections
      • Reordering sections
      • Theme Settings
    • Modular sections
      • Announcement bar
      • Background video
      • Blog posts
      • Collections list
      • Contact form
      • Custom code
      • FAQ
      • Featured collection
      • Featured product
      • Icons row
      • Image with text
      • Image with text overlay
      • Logo list
      • Mosaic
      • Newsletter
      • Product features
      • Recently viewed products
      • Rich text
      • Slideshow
      • Split content
      • Split hero
      • Testimonials
      • Video
    • Recommended Image Sizes
      • Product Images
      • Blog Images
      • Slideshow Section Images
      • Catalog Banner Images
      • Product Feature Images
  • Theme Settings
    • Theme settings
      • How to make changes
      • Colors
      • Typography
      • Buttons
      • Appearance
      • Search
      • Product grid
      • Product form
      • Cart
      • Breadcrumbs
      • Favicon
      • Social media
      • Checkout
      • Custom CSS
  • Header
    • Announcement bar section
    • Header
      • Transparent header
      • Logo
      • Mega menu
  • Footer
    • Footer
      • Blocks and settings
      • Logo
      • Menu
      • Text
      • Newsletter
  • Products
    • Product pages
      • Pre-order
      • Product ratings
      • Creating new product page templates
    • Blocks
      • Price and title
      • Form
      • Product description
      • Social share
      • Store availability
  • Collections
    • Collection pages
      • Creating more collection page templates
      • Customizing the collection list page
    • Badges
  • Pages
    • Page templates
  • Blogs
    • Blog pages
      • Creating new blog page templates
  • Popups
    • Popup section
  • License
    • Theme license
  • Custom
    • Custom
      • How to add custom color swatches
      • How to make CSS customizations
      • How to set up custom filtering options
      • How to add custom fonts
  • Online Store 2.0
    • The new experience
  • FAQ
    • Frequently asked questions
      • Checking your theme version
      • Downloading the latest version
      • How to use sections
      • Section settings
      • Theme settings
      • Reordering sections
      • Hiding sections
      • Adding sections
      • Recommended image sizes
        • Product images
        • Blog images
        • Slideshow section images
        • Catalog banner images
        • Product feature images
      • Updating your theme
      • Sharing a preview link
      • How to remove the Shopify credit
  • Support
    • Contacting support
Powered by GitBook
On this page
  • Key components
  • Configuring your section: Settings overview
Export as PDF
  1. Sections
  2. Modular sections

Image with text overlay

PreviousImage with textNextLogo list

Similar to the Slideshow section, 'Image with text overlay' is perfect when you only need a single image banner section.

Unlike the Slideshow section, you can rearrange the order of text blocks.

Key components

  • Banner image: Choose a captivating image to serve as the background for your overlay content, setting the tone and mood for your website.

  • Height options: Select from various height options to ensure the perfect balance between your image and text content, whether you prefer a full-screen experience or a specific height for the overlay.

Configuring your section: Settings overview

  • Mobile image: Optimize the experience for mobile users with a separate image selection and height settings tailored specifically for smaller screens.

  • Text position: Place your text overlay strategically, whether centered, aligned left or right, or positioned at the bottom corners for a unique touch.

  • Buttons: Direct users to relevant pages or actions on your website, such as product pages, collections, or contact forms.

  • Rich text editor: Utilize the rich text editor to create descriptive and engaging content.

  • Overlay opacity: Adjust the opacity of the overlay to achieve the desired visual effect and ensure optimal readability of your text content.