Fluorescent
Eclipse
Eclipse
  • Get started
    • Migrating to Eclipse
    • Theme license
  • FAQs
  • Changelog
    • Update your theme
  • General
    • Editing themes
      • Dynamic content with metafields
      • Edit default theme content
      • Multiple languages
      • Unique content for markets
      • Customizing your site
      • H1 heading tags
    • Image guide
      • Web ready photography
      • Image sizes
      • File formats
      • Theme image settings
    • SEO for Shopify
    • Online store speed
    • Accessibility
  • Theme settings
    • Theme settings
      • Social media
    • Theme styles
    • Fonts
    • Colors
  • Corner rounding
  • Pages
    • Page templates
      • Using templates
      • Customize page styles
      • Create and assign templates
    • Demo layouts
    • About page
    • Home page
    • Blog page
    • Blog post
    • Contact page
    • Password page
    • Search page
  • Sections
    • Sections
      • Using sections
      • Content blocks
    • Blog posts
    • Collapsible content
    • Collection list
    • Contact form
    • Featured collection
    • Featured links
    • Feature product
    • Grid
    • Icon with text columns
    • Image hero
    • Image with text
    • Multi-column
    • Newsletter
    • Rich text
    • Scrolling content
    • Shop the look
    • Shoppable feed
    • Slideshow
    • Video
    • Video hero
    • Video with text
    • Custom Liquid
  • Header
    • Announcement bar
    • Header
      • Layout and style
      • Logo
      • Transparent header
      • Mega menu
      • Language and Currency
    • Impact logo
    • Search
  • Footer
    • Footer
      • Image Text and Socials
      • Links block
      • Newsletter and Socials
      • Language and Currency
      • Custom Liquid
  • Products
    • Product listings
      • Product card styles
      • Sale and sold out badges
      • Quick shopping
    • Prices and currencies
    • Swatches
      • Use default colors
      • Use custom colors
      • Use custom images
  • Product pages
    • Product page
      • Gift card product
    • Media gallery
      • Media grouping
    • Product overview blocks
      • Description
      • Price
      • Buy buttons
      • Collapsible row
      • Complementary products
      • Custom option
      • Featured icon with text
      • Icon with text
      • Inventory status
      • Image block
      • Popup block
      • Product rating
      • Text block
      • Share icons
      • Custom Liquid
    • Variant selector
      • Info popup
    • Sticky add-to-cart
    • Sibling products
    • Product recommendations
  • Collections
    • Collection page
      • Banner
      • Product grid
      • Promotion tiles
      • Filters and sorting
    • Collection list page
  • Cart
    • Cart
    • Free shipping bar
    • Cross sells
  • Popups
    • Popups
  • Support
    • Support policy
    • Shopify vs Theme issues
    • Store access requests
  • Advanced
    • Custom CSS
    • Custom fonts
Powered by GitBook
On this page
  • Set up section
  • Section styles
  • Set up hero image
  • Set image height
  • Add content blocks
  • Change content layout
  • Section colors
  • Change background color

Was this helpful?

  1. Sections

Image hero

Last updated 2 months ago

Was this helpful?

The Image hero section was added in v1.2.0 — to access new features.

The Image hero section displays a large image banner with overlaid headings, text, and buttons.

Editing templates will change all pages that use the same template. for different page layouts, or in the same template.

Set up section


In the editor side panel, click (+) Add section and select Image hero. Click and hold the drag handles ⋮⋮ to re-order sections.

Section styles


Click the section to edit general section styles for colors and spacing, available in all sections:

Set up hero image


Upload an Image and adjust its Height, Focal point, and color Overlay or Gradient. Add a Mobile-specific image for the best results on smaller screens.

Click Image hero section to find settings

Setting
Description

Image

Select or upload an image to display as the hero image. There are no required images dimensions. We simply recommend uploaded images have a minimum width of 2500px for optimal quality across all devices.

Mobile image

Select or upload an alternate image to display on mobile devices. You may want a different image that works best with mobile screen dimensions, for example a portrait shaped image.

Background link

Select a page or URL to make the entire image a clickable link.

Image animation

Change the animation style of how the image loads. The image can gradually fade into view or be revealed by an iris swipe, which appears as a growing circle. Set to None to disable animations.

Set image height


Under Image height, choose to display the image with a Fixed or Relative height.

  • Fixed heights maintain the same pixel height on all screens.

  • Relative heights adapt the image height as a percentage of the screen height.

Click Image hero section to find settings

Setting
Description
Options

Desktop height

Set the section height to a fixed height (in pixels) or relative height (as a percentage of the screen height).

Fixed height 250 - 750px Relative height 50 - 100% Default: 650px

Mobile height

Choose a fixed height (in pixels) or relative height (as a percentage of the screen height).

Fixed height 150 - 750px Relative height 50 - 100% Default: 450px

Add content blocks


Click (+) Add block to add text and image content to the section. Use the drag handles ⋮⋮ to re-order blocks, and add Spacer and Divider blocks to further customize the layout.

Change content layout


Change the position and width of the content blocks that overlay the image.

Click Image hero section to find settings

Setting
Description
Options

Content width

Use the sliders to set the maximum width (in pixels) of the section content.

200 - 1000 px Default: 500

Text position

Set the position of the text content for desktop screens.

Top / Middle / Bottom Left / Center / Right

Mobile text position

Set the position of the text content for mobile screens.

Top / Middle / Bottom Left / Center / Right

Section colors


The section uses two color schemes. The first color scheme applies a section background color, and the overlay color scheme applies text, button, and overlay tint colors.

Change background color


The section background is visible when the section has top and bottom padding or when the section width is page width or full width padded.

In the section settings, select a color scheme (at the top of the settings panel) to apply its background color. You can edit the color scheme in your theme settings.

Update your theme
Create new templates
show dynamic page content

Section colors

Section width

Section padding

Overline

Add small label heading.

Heading

Add title heading.

Text

Add multiple lines of rich text.

Button

Add buttons with custom styles.

Image

Add images with custom sizes.

Spacer

Add space between blocks.

Divider

Add border between blocks.

Custom Liquid

Add Liquid code block.

Cover

Using color overlays

Learn how to change overlay colors and use gradients.