Hero collage

Hero collage is the opening section of the Vellora preset. It puts several pieces into one composed layout:

• A main image with a large heading on top of it.
• A text panel beside it, with text and two buttons.
• A secondary image with a small label, linking to a collection or page.
• An optional product hotspot: a dot on the main image that opens a small product card where shoppers can add the product to the cart.

On phones and tablets, the pieces stack in the same order. From 990 px wide, the main image and the side column sit next to each other.

Best practices#

• Use an 1800 × 1400 px main image with space for the heading. Choose a Heading color scheme that contrasts with that part of the image.
• Keep the heading short. Two to five words work best at this size. Use italics for a word or two for emphasis, as in "Quiet things, well made."
• Place the hotspot on the product. Set Horizontal position and Vertical position so the dot sits on the item in the photo. Products with several variants open quick view instead of adding straight to the cart.
• Give every link a destination. Buttons and the secondary image link to all products until you set a link.
• Adjust Minimum height so the main image isn't cropped too tightly on wide screens.

Preset tips#

• Vellora uses its deep moss scheme for both the heading and the text panel, which ties the two together.
• With Sorrel or Graphite, set Panel color scheme to the preset's darkest scheme for the same effect.

Handle

hero-collage

Group

Heroes and banners

Where

Add it to any template with Add section in the theme editor.

Settings#

Text panel#

Secondary image#

Product hotspot#