next-devin · Sep 21, 2026 · Sep 21, 2026 · Sep 21, 2026 · Sep 21, 2026 · Sep 21, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@ The GitHub release body is a summary, not a copy of the changelog section. Write
 
 ## Unreleased
 
+- Added the Image with Text homepage section (`partials/section_image_text.html`, Theme Settings > Homepage > Image with Text, toggle `show_image_text`, off by default). It is a 50/50 image and copy split with image left/right, a square/portrait/landscape/native image ratio, eyebrow, heading, rich-text body, a CTA with primary/secondary/outline styles, and background and text colours; on mobile it stacks image first. It is included from `templates/index.html` between Featured Categories and On Sale. With the toggle on and nothing configured it renders the same setup placeholder pattern as the other sections. `partials/cta_button.html` gained a `secondary` style so the section can reuse the existing `.btn-secondary` class. Spec: `docs/section-specs/image-text.md`. `assets/main.css` grew from 50298 to 50536 bytes for the new ratio and ordering utilities.
 - Published the app-hook contract in `docs/app-hooks.md`: an inventory of all 13 `{% app_hook %}` sites with the file, page position, surrounding DOM, and whether each renders once per page or once per product card; the `<surface>_<purpose>` naming rule derived from the existing names; and a stability policy (existing hook names are stable, new hooks are additive, renames and removals keep the old hook for at least one minor release). The two locations the platform Tag Reference documents, `global_header` and `global_footer`, are both carried. Linked from `docs/README.md`, `docs/extending-spark.md`, and `CLAUDE.md`; the matching `TODOS.md` entry is closed.
 - The default for `membership_status_metadata_key` is now the neutral `member_status` in `configs/settings_schema.json`, `layouts/base.html`, and `assets/js/spark-membership-pricing.js`. It previously shipped a store-specific key. A store that enabled membership pricing without setting the key explicitly must now set it in Theme Settings; the migration note in `docs/theme-settings-partials.md` names the old value.
 - `PLAN.md` now lists all six Web Components (it omitted `<spark-subscription>`) and states the shipped version as 1.4.1 rather than 1.1.1.

diff --git a/CLAUDE.md b/CLAUDE.md
@@ -111,7 +111,7 @@ CSS custom properties set in `layouts/base.html` from `store.branding`:
 Stable `{% app_hook 'NAME' %}` extension surfaces for Apps (Reviews app uses them today). Future Apps should target the same pattern rather than fork the theme. The published contract is `docs/app-hooks.md`: the full inventory with DOM context, the `<surface>_<purpose>` naming rule, and the stability policy (existing names stable, new hooks additive, renames need one minor release of overlap). Update that doc in the same PR as any hook change.
 
 ### Settings (`configs/settings_schema.json`)
-Typography (fonts, text/heading/link colors), Navigation (main menu, navbar colors), Footer (menu, colors, social links ×8, payment icons, disclaimer), homepage section partials (hero with text overlay, featured products/categories, recommended products, On Sale, Promo Banner, Featured Product — each with its own toggle), Announcement Bar, Advanced (noindex, account-only mode). v1.1 added 22 settings and restructured homepage settings around fixed-order section partials.
+Typography (fonts, text/heading/link colors), Navigation (main menu, navbar colors), Footer (menu, colors, social links ×8, payment icons, disclaimer), homepage section partials (hero with text overlay, featured products/categories, recommended products, On Sale, Promo Banner, Featured Product, Image with Text — each with its own toggle), Announcement Bar, Advanced (noindex, account-only mode). v1.1 added 22 settings and restructured homepage settings around fixed-order section partials.
 
 ### Architecture Docs
 - `CONTEXT.md` defines Spark's domain language for architecture reviews.

diff --git a/README.md b/README.md
@@ -139,7 +139,7 @@ Tracked theme documentation starts at [docs/README.md](docs/README.md). Current
 - **Documented extension modules** — `SparkEvents`, `SparkVariantState`, `SparkCartRewards`, and the cart drawer renderer keep extension points explicit for theme developers and apps.
 - **Cart milestones** — multi-step progress bar with default thresholds for free shipping and free gifts; auto-add/remove driven by progress events.
 - **Tailwind CSS v4** — standalone CLI binary, no Node dependency. CSS-based config with `@theme`, `@layer base`, and `@layer components`.
-- **Homepage section partials (Wave 1 + 1.1.1)** — hero with text overlay, featured products, featured categories, recommended products, On Sale, Promo Banner, Featured Product. Each section partial has its own toggle in Theme Settings and is included from `templates/index.html` in a fixed order.
+- **Homepage section partials (Wave 1 + 1.1.1)** — hero with text overlay, featured products, featured categories, recommended products, On Sale, Promo Banner, Featured Product, Image with Text. Each section partial has its own toggle in Theme Settings and is included from `templates/index.html` in a fixed order.
 - **Sale badges** — automatic on product cards when `compare_at_price > price`.
 - **Review app hooks** — template surfaces (`{% app_hook %}`) for product cards, PDP rating summary, full reviews module, home/collection review feeds, and global social proof. Apps render into Spark without theme edits.
 - **Membership price presentation** — optional client-side member price display driven by logged-in customer metadata, designed to pair with platform-side checkout discounts.

diff --git a/assets/main.css b/assets/main.css
diff --git a/configs/settings_data.json b/configs/settings_data.json
@@ -3,6 +3,7 @@
     "show_featured_product": false,
     "show_featured_products": true,
     "show_featured_categories": true,
+    "show_image_text": false,
     "homepage_hero_image": "",
     "homepage_hero_image_mobile": "",
     "homepage_hero_heading": "",
@@ -127,6 +128,17 @@
     "promo_banner_text_color": "",
     "promo_banner_cta_style": "primary",
     "promo_banner_cta_outline": true,
+    "image_text_image": "",
+    "image_text_image_alt": "",
+    "image_text_image_position": "left",
+    "image_text_image_ratio": "square",
+    "image_text_eyebrow": "",
+    "image_text_heading": "",
+    "image_text_body": "",
+    "image_text_cta_url": "",
+    "image_text_cta_style": "primary",
+    "image_text_bg_color": "",
+    "image_text_text_color": "",
     "site_index": false,
     "account_only": false,
     "account_only_show_footer": true,

diff --git a/configs/settings_optional.txt b/configs/settings_optional.txt
@@ -8,6 +8,7 @@ featured_products_cta_text # template applies a default filter
 featured_products_header # template applies a default filter
 final_step_message # template applies a default filter
 homepage_hero_cta # template applies a default filter
+image_text_cta_text # template applies a default filter
 membership_active_status_value # template applies a default filter
 membership_detail_text # template applies a default filter
 membership_discount_percent # template applies a default filter

diff --git a/configs/settings_schema.json b/configs/settings_schema.json
@@ -42,6 +42,13 @@
                 "type": "checkbox",
                 "default": false,
                 "help_text": "Display a full-width promotional banner with a heading and call-to-action button."
+            },
+            {
+                "name": "show_image_text",
+                "label": "Show Image with Text",
+                "type": "checkbox",
+                "default": false,
+                "help_text": "Display a two-column image and text section for a brand story, ingredient callout, or explainer."
             }
         ],
         "Hero": [
@@ -714,6 +721,131 @@
                 "help_text": "Text color for category tile labels. Leave blank for white."
             }
         ],
+        "Image with Text": [
+            {
+                "name": "image_text_image",
+                "label": "Image",
+                "type": "image_picker",
+                "help_text": "Image for one half of the section. Use a product or lifestyle photo that survives cropping."
+            },
+            {
+                "name": "image_text_image_alt",
+                "label": "Image Alt Text",
+                "type": "text",
+                "help_text": "Accessible description of the image. Leave blank to use the heading.",
+                "max_length": 250
+            },
+            {
+                "name": "image_text_image_position",
+                "label": "Image Position",
+                "type": "select",
+                "options": [
+                    {
+                        "name": "Left",
+                        "value": "left"
+                    },
+                    {
+                        "name": "Right",
+                        "value": "right"
+                    }
+                ],
+                "default": "left",
+                "help_text": "Which side the image sits on at tablet and desktop widths. On mobile the image always stacks above the text."
+            },
+            {
+                "name": "image_text_image_ratio",
+                "label": "Image Ratio",
+                "type": "select",
+                "options": [
+                    {
+                        "name": "Square",
+                        "value": "square"
+                    },
+                    {
+                        "name": "Portrait",
+                        "value": "portrait"
+                    },
+                    {
+                        "name": "Landscape",
+                        "value": "landscape"
+                    },
+                    {
+                        "name": "Native",
+                        "value": "native"
+                    }
+                ],
+                "default": "square",
+                "help_text": "Crop the image to a fixed ratio, or use Native to show the image at its own proportions."
+            },
+            {
+                "name": "image_text_eyebrow",
+                "label": "Eyebrow",
+                "type": "text",
+                "help_text": "Short uppercase label above the heading.",
+                "max_length": 50
+            },
+            {
+                "name": "image_text_heading",
+                "label": "Heading",
+                "type": "text",
+                "help_text": "Section heading beside the image.",
+                "max_length": 100
+            },
+            {
+                "name": "image_text_body",
+                "label": "Body",
+                "type": "richtext",
+                "help_text": "Supporting copy below the heading.",
+                "max_length": 1000
+            },
+            {
+                "name": "image_text_cta_text",
+                "label": "Button Text",
+                "type": "text",
+                "help_text": "Optional button text. Leave blank to use the localized default.",
+                "max_length": 50
+            },
+            {
+                "name": "image_text_cta_url",
+                "label": "Button URL",
+                "type": "url",
+                "help_text": "Where the button links to (e.g. /catalogue/). Leave blank to hide the button.",
+                "max_length": 500
+            },
+            {
+                "name": "image_text_cta_style",
+                "label": "Button Style",
+                "type": "select",
+                "options": [
+                    {
+                        "name": "Primary",
+                        "value": "primary"
+                    },
+                    {
+                        "name": "Secondary",
+                        "value": "secondary"
+                    },
+                    {
+                        "name": "Outline",
+                        "value": "outline"
+                    }
+                ],
+                "default": "primary",
+                "help_text": "Primary fills with your primary color, Secondary is a quiet bordered button, Outline follows the section text color."
+            },
+            {
+                "name": "image_text_bg_color",
+                "label": "Background Color",
+                "type": "color",
+                "help_text": "Section background color. Leave blank for the page background."
+            },
+            {
+                "name": "image_text_text_color",
+                "label": "Text Color",
+                "type": "color",
+                "help_text": "Heading, body, and outline button color. Leave blank for the theme defaults."
+            }
+        ],
         "Custom CSS": [
             {
                 "name": "home_page_css",

diff --git a/docs/design-block-authoring.md b/docs/design-block-authoring.md
@@ -92,6 +92,7 @@ Supported styles:
 
 - `primary`
 - `accent`
+- `secondary` (quiet bordered button, used by Image with Text)
 
 Set `outline` to render an outline button using the selected brand color.
 

diff --git a/docs/figma-section-library-plan.md b/docs/figma-section-library-plan.md
@@ -103,8 +103,9 @@ Use snake_case for exported properties. If Figma display labels need to be short
 | Featured categories | `partials/section_featured_categories.html` | `product_categories`, overlay settings | First-pass spec in `docs/section-specs/featured-categories.md`. Needs 2-5 desktop column states, missing category image state, overlay opacity states, and long category label behavior. |
 | On Sale | `partials/section_on_sale.html` | `products`, product card sale state | First-pass spec in `docs/section-specs/on-sale.md`. Needs sale badge and compare-at price states from `partials/product_card.html`; otherwise this should share grid anatomy with Featured products. |
 | Promo banner | `partials/section_promo_banner.html` | text, CTA settings, colors | First-pass spec in `docs/section-specs/promo-banner.md`. Needs contrast states, short and long copy states, no-CTA state, and primary/accent/outline button states. |
+| Image with text | `partials/section_image_text.html` | `image_picker`, text, rich text, CTA settings, colors | First-pass spec in `docs/section-specs/image-text.md`. Needs image left/right states, four image ratio states, missing-image state, long heading state, and primary/secondary/outline button states. |
 
-These are enough for the first Figma library pass. The full roster of section partials Spark needs to ship to fully cover D2C storefronts — including image-with-text, FAQ, comparison table, process steps, press logos, testimonials, value props, and the rest of the Tier 1/2/3 catalog — lives in [`section-roster.md`](./section-roster.md). New section ideas should follow the section authoring unit pattern below.
+These are enough for the first Figma library pass. The full roster of section partials Spark needs to ship to fully cover D2C storefronts — including FAQ, comparison table, process steps, press logos, testimonials, value props, and the rest of the Tier 1/2/3 catalog — lives in [`section-roster.md`](./section-roster.md). New section ideas should follow the section authoring unit pattern below.
 
 ## Section Spec Template
 

diff --git a/docs/section-roster.md b/docs/section-roster.md
@@ -22,9 +22,9 @@ Three inputs shaped this roster:
    / Crave (free D2C-friendly), Impulse / Motion / Prestige (paid).
    Section catalogs across these are the de facto standard for what
    merchants expect to find in a theme editor.
-3. **Spark's existing partials** — 6 homepage sections shipped today
+3. **Spark's existing partials** — 7 homepage sections shipped today
    (hero, featured_product, featured_products, featured_categories,
-   on_sale, promo_banner). See `figma-section-library-plan.md` for the
+   on_sale, promo_banner, image_text). See `figma-section-library-plan.md` for the
    current "Current Homepage Section Units" table.
 
 ## Naming and conventions
@@ -39,7 +39,7 @@ Three inputs shaped this roster:
 - Each section gets a spec in `docs/section-specs/<name>.md` following
   the [Section Spec Template](./figma-section-library-plan.md#section-spec-template).
 
-## Tier 0 — already shipped (6)
+## Tier 0 — already shipped (7)
 
 | Section | Partial | Status |
 |---|---|---|
@@ -49,8 +49,9 @@ Three inputs shaped this roster:
 | Featured categories | `section_featured_categories` | First-pass spec |
 | On sale | `section_on_sale` | First-pass spec |
 | Promo banner | `section_promo_banner` | First-pass spec |
+| Image with text | `section_image_text` | First-pass spec |
 
-## Tier 1 — must-have for D2C parity (12)
+## Tier 1 — must-have for D2C parity (11 remaining)
 
 These cover the layout patterns that today require either bespoke
 partial work or static HTML in Page content. Each one shows up across
@@ -180,6 +181,8 @@ pages, mission copy between product showcases.
 - `text_bg_color`, `text_color`
 
 ### 10. `section_image_text`
+**Status:** Shipped. Spec in [`section-specs/image-text.md`](./section-specs/image-text.md);
+the settings below are the implemented names, plus `image_text_image_alt`.
 **Purpose:** 50/50 image + text split. Foundational layout for any
 story or explainer page.
 **Pattern:** Founder story chapters, ingredient deep-dives, "how it
@@ -361,9 +364,9 @@ closes the most merchant friction fastest is:
 | 7 | Tier 3 on demand | Lookbook, countdown, instagram_feed if merchants ask. |
 | 8 | Commerce primitives — sticky_atc, quick_view, stock_indicator | PDP polish. |
 
-12 Tier-1 + 8 Tier-2 = 20 sections. With variants on existing
-partials, the total Figma component library lands at roughly 28
-section components plus the 6 already-shipped — call it 34.
+11 remaining Tier-1 + 8 Tier-2 = 19 sections. With variants on
+existing partials, the total Figma component library lands at roughly
+27 section components plus the 7 already-shipped — call it 34.
 
 ## Coverage validation
 

diff --git a/docs/section-specs/README.md b/docs/section-specs/README.md
@@ -14,6 +14,7 @@ Each spec should describe one merchant-configurable section across Figma, Theme
 | [Featured categories](featured-categories.md) | First pass | `partials/section_featured_categories.html` |
 | [On Sale](on-sale.md) | First pass | `partials/section_on_sale.html` |
 | [Promo banner](promo-banner.md) | First pass | `partials/section_promo_banner.html` |
+| [Image with text](image-text.md) | First pass | `partials/section_image_text.html` |
 
 Use `docs/figma-section-library-plan.md` for the overall workflow and library structure, and [`docs/section-roster.md`](../section-roster.md) for the full Tier 1/2/3 partial roster Spark should ship to fully cover modern D2C storefronts.