Docs Section reference Hero collage
Section reference
Hero collage
Open your home page with Vellmar's hero collage, which combines a main image, a text panel, a second image and a shoppable product.
Hero collage is the opening section of the Vellmar 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#
Vellmar 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#
Setting Type Default Options
Main image 1800 x 1400px .jpg recommended Image None — Minimum height Slider 720px 400px to 900px, in steps of 20px Heading Inline rich text Quiet things, well made. — Heading color scheme Choose a scheme that contrasts with the image. Color scheme Scheme 3 —
Text panel#
Setting Type Default Options
Text Rich text Soft linen, warm walnut and stoneware glazed by hand. Pieces for slower days at home. — First button label Text Shop the collection — First button link Link None — Second button label Text Shop the look — Second button link Link None — Panel color scheme Color scheme Scheme 3 —
Secondary image#
Setting Type Default Options
Image Image None — Label Text New in — Link Link None —
Product hotspot#
Setting Type Default Options
Product Product None — Horizontal position Slider 50% 0% to 100%, in steps of 1% Vertical position Slider 55% 0% to 100%, in steps of 1% Section color scheme Color scheme Scheme 1 —
Padding#
Setting Type Default Options
Top padding Slider 24px 0px to 200px, in steps of 4px Bottom padding Slider 48px 0px to 200px, in steps of 4px Top padding on mobile Slider 20px 0px to 200px, in steps of 4px Bottom padding on mobile Slider 36px 0px to 200px, in steps of 4px