Hero Split

Hero Split creates a two-panel landing section. It works well for directing customers into two major areas, such as Shop and Showcase.

Configure Hero Split

  1. Add or open Hero Split.
  2. Choose a color scheme.
  3. Add the center logo and mobile center logo if needed.
  4. Set logo widths.
  5. Add the left square title, image, and link.
  6. Add the right square title, image, and link.
  7. Choose whether the right square appears first on mobile.
  8. Save.

Section Settings

  • Color scheme: Sets the text and background colors used by the section. Because Hero Split is image-led, choose a color scheme that keeps the panel titles readable over the selected images.
  • Hide header when first section on homepage: Hides the normal header only when this Hero Split is the first homepage section. Use this if the centered Hero Split logo is acting as the main brand mark at the top of the homepage.
  • Center Logo: Adds a desktop logo in the center of the two panels. Use this for a strong brand-led entrance page.
  • Center Logo Width: Controls how large the center logo appears on desktop. Increase this for a bold brand moment; reduce it if the logo competes with panel titles.
  • Center Logo Mobile: Lets you upload a different logo for mobile. Use this when the desktop logo is too wide or detailed for small screens.
  • Center Logo Mobile Width: Controls the mobile logo size.
  • Show right square first on mobile: Reverses the mobile stacking order. Use this when the right panel is the more important first action on mobile.
  • Left Square Title: The visible label for the left panel. Example: Shop  .
  • Left Background Image: The image shown behind the left title. Choose an image that still reads clearly with text over it.
  • Left Link: The page, collection, or URL customers visit when they click the left panel.
  • Right Square Title: The visible label for the right panel. Example: Showcase  .
  • Right Background Image: The image shown behind the right title.
  • Right Link: The page, collection, or URL customers visit when they click the right panel.

Tips

  • Use images with similar visual weight for both panels.
  • Keep titles short, such as Shop  , Showcase  , Objects  , or Projects  .
  • Preview mobile if you enable Show right square first on mobile.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.