{"handle":"two-picture","url":"https://cdn.shopify.com/mock-shop-production-media/_heroes/ee893566afff8005220f81b82afd51c8865907128795ebbfae83f4c012a0a271.liquid","sha256":"ee893566afff8005220f81b82afd51c8865907128795ebbfae83f4c012a0a271","description":"Two image panels side by side at equal width, each the full height of the hero, with the headline, one line of supporting copy and a pill call to action set into the lower-left corner over the left panel. 500px tall, 600 above 1100px, stacking to one column under 640px.","install":["Install it only when the shop can fill it, which is the test the reference render applies before drawing it: `images` must supply both pictures, each an absolute URL on the `https` scheme, since the reference render reads any other entry (relative, plain `http`, malformed or null) as a missing picture; this hero writes its copy on them and has no legible state without one. And the headline, `copy.headline` or else the shop's name, must fit `layoutRules` (at most `maxHeadlineCharacters` characters and `maxHeadlineWords` words). When either fails, the reference render keeps the theme's own opening hero, `hero_hRhTz6` in `origin`, `hero_p9CmMG` in `catalyst` and `section_bpfKjQ` in `heritage`, and so should the clone: stop here, before downloading anything. A subheadline longer than `maxSubheadlineCharacters` is left out, not shortened.","Download `url`, check it against `sha256`, and save it as `sections/two-picture.liquid` in the theme directory: a section file is named for its `type`.","In `templates/index.json`, replace the theme's opening hero — the first entry in `order`, `hero_hRhTz6` in `origin`, `hero_p9CmMG` in `catalyst` and `section_bpfKjQ` in `heritage` — with a new section of `type` `two-picture`, keeping its place at the front of `order`. Replace, do not insert: the page has one hero, and this is it. In `heritage` the opener is two sections, so set `\"disabled\": true` on `section_U3FMdW`, the billboard picture under `section_bpfKjQ`, in the same edit: this hero carries its own picture, and the reference render draws neither of the two behind it. The theme's own `install` says the same from its side.","Fill `settings` from the shop's `mock_shop.hero` metafield, each field on its own: `headline` is `copy.headline`, or the shop's name when the shop wrote none; `subheadline` is `copy.subheadline`, or the shop's description; `cta` is `copy.cta`, or `Shop now`; `cta_url` is `/collections/all`. That is what the reference render shows for any partial `copy`, an empty one included. The section's own defaults are its author's demonstration copy and never what a shop shows.","`images[0]` fills the left panel, the one the copy sits over: write its `url` to `image_1_url` and its `alt` to `image_1_alt`. `images[1]` fills the right panel: `image_2_url` and `image_2_alt`. The array counts from zero and the settings from one. That is what the reference render draws; or import each file into the shop and pick it as `image_1` and `image_2`, which the section prefers when both are set.","Leave `background_color`, `text_color`, `accent_color` and `on_accent_color` at their defaults: they are the pair the reference render paints over these images."],"aesthetics":["editorial","modernist","soft"],"qualities":["split","multi-image","balanced","vertical"],"sectionType":"two-picture","settings":[{"id":"headline","type":"text","label":"Headline","default":"Wear your way"},{"id":"subheadline","type":"text","label":"Subheadline","default":"Premium materials. Timeless design."},{"id":"cta","type":"text","label":"Button label","default":"Explore →"},{"id":"cta_url","type":"url","label":"Button link"},{"id":"image_1","type":"image_picker","label":"Image"},{"id":"image_1_url","type":"text","label":"Image URL"},{"id":"image_1_alt","type":"text","label":"Image alt text"},{"id":"image_2","type":"image_picker","label":"Image"},{"id":"image_2_url","type":"text","label":"Image URL"},{"id":"image_2_alt","type":"text","label":"Image alt text"},{"id":"background_color","type":"color","label":"Background","default":"#d9c8ae"},{"id":"text_color","type":"color","label":"Text","default":"#ffffff"},{"id":"accent_color","type":"color","label":"Button background","default":"#ffffff"},{"id":"on_accent_color","type":"color","label":"Button text","default":"#000000"},{"id":"height","type":"range","label":"Height","default":500},{"id":"height_wide","type":"range","label":"Height on wide screens","default":600}],"style":{"font-body":{"role":"font-body","default":"Arial, sans-serif"},"font-heading":{"role":"font-heading","default":"Arial, sans-serif"},"on-surface-secondary":{"role":"muted","default":"#9C8B7D"},"surface":{"role":"canvas","default":"#D9C8AE"},"accent":{"role":"accent","default":"#8BA9D0"},"on-accent":{"role":"accent-text","default":"#FDFAF6"},"on-ink":{"role":"inverse-text","default":"#FFFFFF"},"on-surface":{"role":"text","default":"#FDFAF6"},"surface-secondary":{"role":"surface","default":"#9C8B7D"}},"layoutRules":{"textOverImage":true,"textZone":"editorial copy aligned to the reference geometry","contrastStrategy":"use controlled negative space or a scrim for legibility","maxHeadlineCharacters":28,"maxHeadlineWords":5,"maxSubheadlineCharacters":70,"typographyGuidance":"system sans-serif with restrained editorial scale","imageGuidance":"use replaceable image slots with authored crop and framing"}}