Changelog

Ships with a default layout: product image, title, variant picker, quantity, line price and add button. The section accepts every public theme block, so the tree is free to rearrange.

The first open learns the section id and later opens are a cheap section fetch; Preload popup on hover on the trigger (on by default) means a second click is instant.

Adding this section to an ordinary page from Add section will not open as a popup — it only works through the quick-add template and the trigger block.

Label / icon / icon-only, button presets, Show on card hover only, and a separate label for single-variant products (for example "Add" rather than "Choose").

Renders through the existing snippets/hw-group.liquid with a new is_max param, so hw-group and the -basic / -card / -link / -hover variants are byte-identical to before. New files: blocks/hw-group-max.liquid, snippets/hw-group-max-style.liquid.

No schema changes to register it: @theme already admits every public block, so every host offering @theme picks it up automatically. The few older schemas that enumerate children by hand instead of using @theme do not offer it yet, which resolves when those gain @theme.

Additive and backward compatible: no existing block, section, snippet or template changes behaviour.

The prev and next arrows can take different edges: a Set next arrow sides separately switch reveals a second Next arrow border sides group with its own four. Off — the default — the next arrow mirrors the four above, so the pair stays in step unless a merchant deliberately splits them. The case this exists for is a pair that meets in the middle: prev without its right edge, next without its left.

All switches default to on, and an unset value reads as on, so every existing nav renders an unchanged all-round ring.

The arrow border is an inset box-shadow, not a real CSS border, so there is no per-side form of it: new snippets/hw-carousel-nav-border-ring.liquid builds the shadow list for one arrow and is rendered once per arrow. It keeps emitting the single spread ring (inset 0 0 0 Npx) byte-for-byte while every edge is on, and only swaps to one directional inset shadow per enabled edge once an edge is switched off. A real border was rejected because it would eat into the icon box on a fixed-size control.

Left and Right mean the edges the merchant sees, on both arrows. slideshow-arrow puts flip-x (scale: -1 1) on the previous control, which mirrors its box-shadow along with everything else, so the previous arrow's ring is built with left and right swapped. The custom-icon control is not flipped and takes them unswapped, which is why the emitted CSS addresses slideshow-control--previous and hw-carousel-navigation__control--previous in separate rules.

Consequence of that technique, called out in the setting's help text: with an edge off, the remaining edges are drawn independently, so on heavily rounded controls the ring can thin out where two edges meet.

Content is driven entirely by a bundle_promo metaobject list setting (Bundle entries) - one entry per pill/tab, no bundle-building logic in the section itself.

Layout: image always fills the section's full height (padding no longer carves a gap out of it, matching the split used by hw-feature-row.liquid - padding insets the content column only, and a separate, off-by-default margin setting owns real space between this section and its neighbours).

Minimum height (mobile/desktop, free-text px/rem/% fields) lets the section be forced taller than its content, with the image stretching to match.

Typography: heading and body (colour label + USPs) text each get a preset select (Paragraph / Paragraph 2-12 / Label / H1-H6, matching the scale used by blocks/_heading.liquid and blocks/text.liquid elsewhere in the theme), defaulting to Custom size so the section's own pixel sliders keep control until a preset is chosen.

All colours (content background, pill states, colour swatches, sold badge, USP border, thumbnail placeholder, CTA) and remaining spacing are schema settings rather than hardcoded values, each defaulting to the section's original design so no visual change happens until a merchant overrides one.

New metaobject type expected: bundle_promo (tab_label, hero_image, bundle_name, item_count, colors_label, sold_label, usps list, thumbnail_images list, product reference).

Additive and backward compatible: this is a new section with no changes to any existing section, block, or snippet (only a new <script> tag added to hw-scripts.liquid to load its custom element).

Content (heading/subheading/image/button/badge) is deliberately metaobject-driven rather than block-based: a shared collection template (e.g. a "cards" view used by every collection) has exactly one section instance, so per-collection content can't come from blocks, which are fixed to one instance per template file.

Design (alignment, spacing, typography size, text color) is ordinary section settings instead, since it doesn't need to vary per collection: Layout (horizontal/vertical alignment, independently mobile and desktop, matching the hw-hero-card convention), Spacing (content max-width, gap, vertical padding, mobile/desktop pairs), Typography & color (heading size H1-H6, subheading size paragraph/paragraph_2-7, optional text color override), and Minimum height (mobile/desktop text inputs, in px) as an opt-in floor on top of the section's aspect-ratio frame - all default to values matching the section's original hardcoded styling, so an instance with nothing touched renders identically.

Settings are wired through CSS custom properties on the rendered elements rather than static {% stylesheet %} rules, because {% stylesheet %} blocks are deduplicated globally per section *type*, not per instance - a static rule can't express "this instance's gap is 20px, that one's is 8px."

Optional Trust bar: a full-bleed strip along the bottom edge with up to two icon+text items (checkbox to show/hide, icon picker, text field each) - section-level rather than metaobject-driven, since it's store-wide messaging ("14 day returns"), not per-collection content.

Reuses assets/hw-hero.css's .hw-hero__* frame/media-fill/content-inner classes so it matches the visual rhythm of sections/hw-hero.liquid without pulling in that section's full block system.

Each tab lazily fetches its own real filter list on tab select (not on drawer open), so the filter options shown always match the active tab's actual collection rather than a stale/shared list.

Known gap, left unresolved on purpose: hw-collection-tab-card.liquid's swatch slot still targets ll-swatch, a block from the source client project that shows *sibling products* (metafield-driven: products_metafield + swatch_color_metafield) as colour swatches on a card - not the same thing as core's hw-swatches, which shows a single product's own variant options. Core has no equivalent for "metafield-sourced sibling-product swatches in a shared card/grid instance" yet (hw-product-siblings.liquid is the closest relative, but it's a PDP block with a static collection/product_list data source, which can't vary per-card in a grid the way a metafield can). See the PORT NOTE comment at the block's swatch content_for slot.

Ported from thatworkagency/legend-london (feat/collections-cards-tab-page); templates/collection.cards.json is included as a starting preset with the source store's real collection handles stripped to "".

Sort uses snippets/hw-tab-sorting.liquid (Clone & Own fork of core's sorting.liquid) rather than the core snippet directly, so the drawer's curated Sort list and Apply-gated (not live-updating) behavior actually work.

Known gap: Apply-gated behavior currently only covers Sort - the color-swatch and price-range filters in this drawer still apply live on change rather than waiting for Apply.

Resolution order matches Compare (HW) and Loop – Card Object (HW)'s metaobject mode: a pdp_feature_row metafield override directly on the product, then whichever of the product's collections has that metafield set with the highest Priority, then the section's own Global (fallback) row setting, then a manual block-based fallback (enable with Enable block fallback, using _hw-feature-row-item blocks), then the section doesn't render at all.

Strict all-or-nothing completeness check at every tier: a row only counts as resolved if heading, subheading and image are all present and it has at least one complete feature (icon, label and description all set); an incomplete row or item is treated as unresolved and falls through to the next tier rather than rendering with gaps. A "no data resolved" diagnostic only ever shows in the theme editor or on localhost, never on the live storefront.

New metaobject types: pdp_feature_row (heading, subheading, image, features list of pdp_feature_item references, priority) and pdp_feature_item (icon, label, description).

New restricted blocks: _hw-feature-row-item (one feature tab, dual-sourced from closest.metaobject.pdp_feature_item or block.settings in blocks-fallback mode) and _hw-feature-row-header (the heading/subheading, same dual-sourcing). Both delegate their rendering to the shared hw-group snippet, so they inherit its full layout/typography/color settings rather than a fixed, hand-rolled style.

Content placement: heading/subheading and the feature grid can each be set to sit above the image (in normal document flow) or overlaid on it, independently per breakpoint. Desktop overlay is a fixed horizontal split (heading left, feature tabs right, not configurable); mobile overlay is a vertical stack (heading above the tabs). Both grow to fit their content rather than clipping or overlapping when copy runs long.

Layout: always a CSS grid for the feature tabs (no separate grid/stack mode) — column count and gap are independently set per breakpoint, plus an optional max-width for the tab grid. All three vertical-spacing values (frame min-height, item gap, item max-width) are free-text px/rem fields rather than range sliders, for exact values a slider's step size can't reach.

Width: the background image always spans the full viewport edge to edge; the section's Width setting ("Page"/"Full") controls the heading/feature content only, inset to the theme's normal page-width column or left to run edge to edge with the image.

Padding vs. margin: section padding insets the heading/feature content within the image rather than adding a gap around the image itself; a new, separate Add section margin setting (mobile/desktop, off by default) adds real space between this section and its neighbours.

Additive and backward compatible: this is a new section with no changes to any existing section, block, or snippet.

A row with a Submenu renders as an accordion; a row without one renders as a plain link with the forward chevron. Markup mirrors hw-header-drawer-accordion-mode.liquid exactly, so the drawer's existing rules for rows, dividers, animation and colour apply with no new layout CSS.

Per row: Badge (text, filled/outline, background, text colour, corner radius) and a Chevron override. Badge colours travel as inline custom properties on the block's own root — the reverse of Nav item (HW), where they live on the parent Menu (HW) block, because there the parent draws the badge and here the block draws its own. Nothing reads a parent block's settings, which is the lookup .agent/docs/blocks/loop/FINDINGS.md §2.2 documents as unreliable.

Outline reuses the text colour for the ring rather than adding a fifth colour that would almost always be set to the same value, matching the Figma's red-on-red pill.

Per row Divider: on/off, width and colour. It reuses the theme's .menu-drawer__list-item--divider class rather than drawing a private border, because that class also drives the childlist spacing rules in hw-header-drawer.liquid — a separate border would have missed them. Blank colour keeps --color-border. Turn it off on the last row so the list does not end on a line.

Nav rows come from — Menu (default, unchanged) or Nav item blocks. In block mode the linklist nav is skipped entirely rather than hidden with CSS: rendering both would duplicate every row for screen readers and double the drawer's height before the CSS loaded.

Nav link size / color and Child link size / color are set once here rather than on each row block. Left at 0 / blank the property is not emitted at all, so each row keeps falling back to the drawer's own --menu-* pair and a block row renders identically to a linklist row out of the box.

.header-menu is height: 100% inside the header row and everything in it centres, so a symmetric pair tightens the nav's hover area and an uneven pair nudges the links up or down against the logo. That is the reason to reach for this rather than the row padding on the header section, which moves every column at once.

box-sizing is border-box theme-wide, so the padding eats into the 100% rather than adding to it: the nav shrinks inside the row instead of growing the header.

Those icons had no switch of their own: Show nav chevron drove both the top-level nav chevron and the panel link icons, so losing the panel icons meant losing the top-level chevron with them. The new setting hides the panel icons alone.

The old coupling is left in place — Show nav chevron off still hides both — so existing headers render exactly as before. The new setting only ever subtracts.

.hw-menu-backdrop is pinned below the nav row, so with a transparent header the hero kept showing through it at full brightness while everything below was dimmed — a bright band across the header. Header and page starts the scrim at the top of <header-component> instead, so what shows through the header is covered too.

top is host-relative because #header-component has contain: layout and is therefore the containing block for the fixed backdrop. The height cannot use the same origin — it is a viewport measurement, and the header is not always flush with the viewport top. It comes from the difference between the two anchor variables header-menu.js already publishes off one shared rect, so the two can never drift apart.

z-index is unchanged at 0: above the underlays so what the header lets through is dimmed, below the row (raised to --layer-heightened while a submenu is open) so the logo, links, icons and the open panel all stay legible on top of the scrim.

The Figma desktop header reads ($) then an uncropped rectangular flag, with no ISO code. One switch rather than three toggles, because the three parts only make sense together: a symbol with no flag is an orphaned bracket, and the ISO code next to the symbol states the same fact twice.

The symbol is emitted before the flag in the markup rather than reordered in CSS, so what a screen reader announces matches what is painted. The square flag rules carry both the modifier and the button class so they outrank the theme's clip-path: circle(50%) on specificity rather than on source order.

It is a trigger, not a second search form: it opens the same overlay the search icon opens, and reads the icon block's own Search style so the two controls cannot disagree about their target. No duplicate q input and no second search landmark for screen readers.

Width, padding, corner radius, icon size, background (with blur), text and border colours are settings; text colour falls back to inherit so the field tracks a transparent header over a hero.

Hidden on mobile by default — mobile search belongs in the menu drawer, and the header row has no column for a field at that width.

Off by default on Header (HW); turn on Show search field and pick its column.

The drawer's localization row had always been gated on section settings this section never had, so it was dead markup — adding Country/region, Language, Flag, font and size switches it on for both surfaces at once.

Desktop placement is its own column setting, so the right bookend reads search field, then region, then account and cart.

New Space between header items overrides the gap between the items in one bookend; left at 0 the header renders exactly as before.

Badge text and Filled / Outline style are per nav item; every colour, size, radius, padding and typography value is shared on the Menu (HW) block so all badges in a nav match.

Works on plain links as well as dropdowns — a badge on a link with no chevron lays the item out horizontally the same way a submenu link does.

New Hug content width plus Corner radius. Hug shrinks the panel background itself and anchors it to the inline start of the nav row; Full and Page are unchanged, and still keep the background full width so no page shows through at the sides.

New Promo width (px) sets the promo rail as a fixed length. Required with Hug — a percentage rail cannot resolve against a panel that is sized by its own content.

New Promo 1 / 2 description on Nav item (HW) and a Promo descriptions typography group on Menu (HW), plus a Promo text gap between the two lines.

Setting a Promo arrow background turns the arrow into a fixed, rounded, optionally blurred chip pinned to the bottom of the tile instead of a full-height divider cell; size, radius and blur are settings.

The schema had always accepted children here but nothing output them, so anything a merchant added silently disappeared. Search fields, promo tiles and any @theme block now appear in the drawer with their own gap and padding settings.

Every one of those was hard-coded in CSS, so a simple "Assistance"-style dropdown could not be matched to a design without a code change. Defaults are the exact former values, so an untouched header renders unchanged.

The third level of a dropdown reads the same radius, padding and gap, so a nested panel matches its parent card. Compact dropdowns deliberately keep their own tighter 16px inset.

Appearance comes from the shared badge settings on Menu (HW), plus drawer-only style / background / text / border / border width / letter case overrides, because the same pill usually reads filled on a transparent header and outlined on the white drawer.

A badge is matched by handleized label, so renaming a nav item's label without renaming the menu link stops the badge appearing — that coupling is deliberate.

A button's look came only from the global style presets, so matching one button to a design meant restyling every button in the theme. The overrides are off by default and land in the block's existing 0,2,0 scope rule, so they beat .button and the size preset without !important; background also sets border-color so an outline preset does not keep its old ring around a new fill.

First user is the drawer's Shop All button, now a black pill at the Figma's 14px.

The Figma puts the flag row last in the drawer, under Sign In/Register, but the selector's markup is hard-coded between the nav and the footer blocks, so there was no way to get it there from the editor.

The markup is captured once and echoed into whichever slot the setting names, rather than duplicated — the two positions render byte-identical markup apart from a modifier class.

Below footer also re-aligns it: the default rule pins the block with an auto top margin and its own --padding-xl indent, neither of which lines up with footer content that pads by --drawer-padding. It hides with the footer when a sliding submenu is open, which the default position does not need to do.

Set on the drawer panel rather than per link, so nav items, footer links, the close button and every chevron follow it — the icons are stroke="currentColor" already. Blank keeps the theme foreground.

Left blank the drawer keeps --color-background, so an untouched header renders exactly as before.

It also covers the sliding submenu panels, which sit over the drawer at full height — colouring only the drawer would have flashed back to white the moment a submenu opened.

Nothing else in the theme could do this: a menu link's label is fixed, and Group (Conditional) keys off a dynamic source, not the customer. The mobile drawer's account row is the first user.

Optional custom link overrides the destination; leave it blank and signed-out visitors go to the login page, signed-in customers to their account.

New Full width setting for that use: the header row's width lives in flex-basis, which reads as a *height* inside the drawer's column stack.

Renamed from _hw-header-search-field to hw-search-field (dropping the _ is what makes it placeable). Not yet released, so nothing to migrate.

New Promo layout (Stacked / Side by side). Side by side is the Figma variation with two tiles; set Promo width to the pair's total, not one tile's.

New Promo 1 / 2 badge text and per-tile badge background on Nav item (HW), with shared colour, size, case, radius, padding and blur on Menu (HW) so every badge in the nav matches.

New Promo arrow background / colour (hover) turns the arrow chip white on hover to signal it is clickable. Blank keeps the resting colours, so an existing menu is unchanged.

An offer pill typed as "3 For £65" is wrong the moment someone shops another market. This keeps one badge correct everywhere.

Resolution order: a one-off comparison_table metafield override directly on the product, then whichever of the product's collections has that metafield set with the highest Priority, then the section's own Global fallback table setting. Collection-level is the intended primary path — tag a category's collection with its table once, every product in it picks it up automatically.

New metaobject types: comparison_table (heading, subheading, rows, columns, priority), comparison_row (label, tooltip — same shape as the manual Compare Row block), comparison_column (title, logo, floating product image, badge text, highlight, background color, order-matched values list, CTA text/link).

New dynamic blocks render the resolved entry in place of the section's normal manual/nested blocks: _hw-compare-row-dynamic, _hw-compare-column-dynamic (one per list entry), and _hw-compare-header-dynamic / _hw-compare-header-subheading-dynamic for the heading and subheading. The last two are full-settings text blocks (width, alignment, size preset, case override, color — same schema as Text (HW, basic)) rather than fixed styling, and are two separate block instances specifically so heading and subheading can each carry independent settings.

The floating product image (metaobject mode only) fixes two real layout bugs found while building this: a circular shrink-to-fit/percentage-width dependency that silently rendered the image at roughly half its correct width, and a missing top-clearance case where the image could sit on top of whatever text precedes the table below the 990px side-layout breakpoint.

New Bleed table to screen edge on mobile setting (mobile_edge_bleed, on by default, matches prior behavior): off keeps a table that already fits a phone screen inside the normal page margin instead of bleeding edge-to-edge, and lets the configured item gap apply on mobile instead of a small fixed default.

Blocks mode (the section's original, fully manual behavior) is unchanged.

Height — an exact px value per breakpoint (1–100), mobile and desktop set separately. The icon cell scales with it, staying the height minus both border edges the way base Horizon does against --button-size-md, so the button stays balanced at any size. Full button stretches to its label, so the same number is a floor there rather than a fixed box.

Border and corner radius — thickness 0–20px, colour with alpha (blank keeps the theme's hairline), radius 0–100px. The radius also lands on the inner .add-to-cart-text layer, whose own 50px corners would otherwise show through a less-rounded button. Both hide themselves for Full button, which spans the image edge to edge, and for Size picker, whose tile grid has a look of its own.

Every one of these values travels as a CSS custom property rather than a variant class, so assets/hw-quick-add.css holds no merchant numbers and each var() fallback repeats the base-theme value — an unset setting renders exactly as base Horizon does.

Icon — Default (theme cart icon), Custom image, or Custom SVG, with its own size (8–48px). Picking a custom source and leaving it empty falls back to the default icon rather than rendering nothing. Icon position (left or right of the label) is available for every style except Icon only, which has no label.

Placement — Any of the four corners plus bottom-centre, with horizontal and vertical offsets (0–48px) on top of the card's existing padding. Each edge reads the card padding on its own side: base Horizon defines only the bottom-right pair, so the top and left insets are built from the same parts rather than borrowing the opposite edge's value. The corner-radius compensation that pushes a pill clear of a rounded corner is dropped for bottom-centre, which sits nowhere near one, and the horizontal offset rides on the centring translate there so it still moves the control. Full button spans the image width, so it takes only the top/bottom half of the value; Size picker is a bottom strip and ignores placement entirely — those controls hide themselves for it.

Both quick-add buttons ("Add" and "Choose") render one captured icon, so they cannot drift apart.

Width and height are set independently for mobile and desktop, each with its own unit: 0–100% or 0–100px, in steps of 1. 100% covers the fill-the-parent case, so there is no separate fill option. A percentage *height* only resolves once the parent has a height of its own (e.g. Group (HW) with a set height) — use px when the parent grows with its content.

Background is a colour-or-gradient picker rather than a flat colour, so a bar can carry a gradient; left empty it falls back to the palette's primary colour instead of a hard-coded hex. No overlay and no text colour — there is nothing inside the block to tint.

Corner radius takes px or percent, so 50% gives a pill or a circle at any size. Optional border (0–20px + colour), opacity, and −180°/180° rotation round out the shape controls.

One Alignment setting maps to align-self/justify-self, which reads as left/centre/right inside a vertical Group and top/middle/bottom inside a horizontal one — the axis belongs to the parent, so it is one control rather than two.

Available anywhere @theme blocks are allowed. Use Inset (HW) for spacing around it — Div (HW) deliberately ships no padding or margin settings.

Same sale-first, “From”, tax and installments toggles as Price (HW); the two blocks render identically until you override styling on Price (HW).

Available anywhere @theme blocks are allowed, and listed explicitly on Product card (HW) and the product media overlay blocks.

Composed from existing blocks rather than new markup: an Image (HW) child acts as the card background and a Group (HW, basic) child carries the heading/paragraph/CTA as Text (HW, basic) + Button (HW). Gap, section width and palette colours are section settings.

Columns are derived from the number of cards rather than set by hand: desktop always fits every card into one row of equal columns, so three cards means three thirds and five means five fifths, and every card in a row stretches to the same height.

Two cards per row on mobile (off by default) puts small screens two across instead of stacked; with an odd number of cards the last one spans the full width. Off keeps the stacked layout, each card at its own height.

Section width honours the theme's page width: Page constrains the row to the same centre column as any other page-width section, Full runs it edge to edge.

Section preset ships two cards; templates/index.json now leads with a configured two-card instance matching the Legend London hero design — two full-bleed cards with centred copy, a per-column utility bar on desktop, and a single shared utility bar under the stack on mobile.

Content placement chooses whether the copy floats over the background image or sits below it in normal flow. Editor block order decides which comes first. Either way the background image runs the full width of the column; the content max width only caps the copy.

Content alignment is set per breakpoint: Layout (small screens) and Layout (desktop) each carry their own horizontal (left / center / right) and vertical (top / center / bottom) position, so a card can sit bottom-left on mobile and centred on desktop. Desktop falls back to the mobile value when left alone.

Accepts Image (HW), the Group (HW) family, the Text (HW) family, Button (HW), Inset (HW), Flex spacer (HW) and Group Overlay (HW).

Options to distribute items evenly and show dividers between them, for utility bars like "14 Day Returns | Fast Priority Shipping".

Accepts Text (HW), Text (HW, custom), Icon (HW) and Group (HW, basic) — the group variant is there so an icon and its label can travel as one item.

Hotspot placement uses the same free-text top/right/bottom/left insets as Absolute (HW) — px, %, or blank for auto — with an independent desktop override.

Nested content is placed relative to the *centre* of the hotspot: a 9-way direction (top/center/bottom × left/center/right) picks which corner of the panel meets that point, then horizontal and vertical insets (−100 to +100px) nudge it. Separate direction and insets per breakpoint.

Trigger size is a 1–100px width/height per breakpoint; the image fits inside that box without distortion, and leaving the image empty falls back to a simple round pin.

Hover animation composes scale, opacity, a directional move, and rotation with a shared duration; an optional idle animation (pulse / float / breathe) draws the eye before anyone interacts. All motion is skipped under prefers-reduced-motion.

Behaviour toggles for open-on-hover (desktop pointers only), close-on-outside-click, and closing sibling hotspots; shoppers also close a panel with Escape, which returns focus to the trigger.

With open-on-hover on, hovering reveals the panel transiently and clicking the pin keeps it open until dismissed, so a click never reads as “dismiss the thing I was about to read”.

No padding, background or appearance settings on the block itself — nest a Group (HW) for those, so the controls live in one place rather than being split across two blocks.

hw-image sizes its box by intent (fit-content / fill / custom %) and then caps it, so it can’t reliably land on a specific pixel size; these take literal px instead and drop the max-width, max-height, and aspect-ratio controls they no longer need. Corner radius, crop/fit, link, overlay, placeholder, and device visibility all carry over. Image (HW) stays the right choice when the image should scale with its column, needs an aspect-ratio crop, or is larger than 1000px.

Each tier keeps its slider at 100 discrete values, so every value in its range is reachable — which is why none of them need Image (HW)’s parallel text inputs. Setting IDs are shared across tiers, so swapping one block for another preserves the values (clamped to the new tier’s range).

Optional Auto height keeps the image’s own ratio at the set width. All three render through snippets/hw-image-fixed.liquid, so the family ships one copy of its CSS. Available anywhere @theme blocks are allowed, plus every slot that already listed Image (HW) explicitly.

Default stays 0, so existing overlays are unchanged; a transparent or semi-transparent background is needed for the frost to show.

Default stays fill, so existing lists are unchanged; only cards from the block with the setting on are affected.

Previously hardcoded to 990px across four places (two {% stylesheet %} blocks, a shared JS breakpoint constant, and the pre-paint FOUC guard in theme.liquid); all four now read the section setting. Default behaviour is unchanged for existing stores.

Same layout model on Carousel Grid, Product Carousel/Grid, Collections Carousel/Grid, Featured Collections, Featured Blog, and Collection (HW).

Previous shared Alignment / Position / Gap apply to mobile; matching desktop controls default to the same values. Uniform Mobile/Desktop inset is replaced by horizontal and vertical inset per breakpoint (defaults match the old 24px / 48px).

Optional collection metafield paths can replace each slide’s title and mobile/desktop background images, with independent fallback to the standard collection title and image.

Frame height is the visible stage (px / vh), capped to the space under the header so it always sits fully in view; the header height is measured automatically and Extra top offset only adds to it.

Scroll distance per collection sets the pace, and Snap to one collection (on by default) glides to the nearest whole image once scrolling stops.

Mouse wheel, trackpad, touch, arrow keys, Page Down and scrollbar drags all step through it — it rides ordinary page scroll rather than intercepting gestures.

Transitions: crossfade, cross-zoom, push, or wipe. Optional progress bar, custom active-title icon, and Absolute (HW) overlay slot.

Width: independent Full width / Page toggle (Mega menu → Width) lets the grid's columns and promo rail stop at the theme's normal page width and centre, matching Product showcase's page-width option — the panel's background, border, and shadow always stay full-bleed regardless of this setting, so only the content is ever constrained.

Promo tile: up to two promo images with label, link, and position (left/right of the columns); configurable background/blur, label padding, arrow (default or a custom SVG), and divider colour.

Grid heading typography: column headings get their own size preset (paragraph/heading/label scale or a fully custom font, size, line height, letter spacing, weight, and case) instead of inheriting the nav link style.

Plain and compact dropdowns no longer carry an automatic subtle shadow; pick Drop shadow if that look is wanted.

Migration: the old dropdown_show_shadow block setting is removed. Any store that had it switched on needs Menu open style set to Drop shadow after syncing, or it will silently fall back to the new default (Page overlay).

Switching modes needs no content rebuild and no saved-JSON migration; carousel remains the default, so existing stores are unchanged.

Hugging measures the real rendered text, not the Slides max width setting, so long messages are never forced to wrap.