@runwell/shopify-toolkit 0.17.4 → 0.21.0

package/modules/collection-block-medvi/module.json

@@ -0,0 +1,83 @@
+{
+  "name": "collection-block-medvi",
+  "version": "0.1.4",
+  "category": "storefront",
+  "source": "medvi",
+  "base": "collection-block",
+  "qualifier": null,
+  "description": "Duplex category section: product hero card on one side; eyebrow + split-color headline + benefits checklist + 2 lifestyle photos + CTA on the other. Sides flip per instance.",
+  "replaces": null,
+  "files": {
+    "sections": [
+      "sections/runwell-collection-block-medvi.liquid"
+    ],
+    "snippets": [],
+    "assets": [
+      "assets/runwell-collection-block-medvi.css"
+    ]
+  },
+  "config": {
+    "schema": {
+      "eyebrow": {
+        "type": "string",
+        "default": "PURPOSE-DRIVEN SUPPLEMENTATION",
+        "label": "Eyebrow (small caps tracked)"
+      },
+      "headline_pre": {
+        "type": "string",
+        "default": "Supplements with the",
+        "label": "Headline (first half)"
+      },
+      "headline_post": {
+        "type": "string",
+        "default": "power to boost real results",
+        "label": "Headline (accent half)"
+      },
+      "headline_accent_color": {
+        "type": "string",
+        "default": "{{brand.primary}}",
+        "label": "Accent color for headline_post"
+      },
+      "show_product_card": {
+        "type": "boolean",
+        "default": true,
+        "label": "Show product hero card"
+      },
+      "product_card_bg": {
+        "type": "string",
+        "default": "{{brand.celadon}}",
+        "label": "Product card background tint"
+      },
+      "benefits_heading": {
+        "type": "string",
+        "default": "What better support looks like",
+        "label": "Benefits heading"
+      },
+      "subhead": {
+        "type": "string",
+        "default": "Support that helps you feel better over time",
+        "label": "Sub-headline"
+      },
+      "cta_label": {
+        "type": "string",
+        "default": "Shop the collection",
+        "label": "CTA button label"
+      },
+      "layout": {
+        "type": "string",
+        "default": "image-left",
+        "label": "Layout: image-left or image-right"
+      },
+      "bg_band": {
+        "type": "string",
+        "default": "white",
+        "label": "Background band: white, oat, celadon-tint"
+      }
+    }
+  },
+  "lineage": {
+    "extracted_from": "https://home.medvi.org/",
+    "scrape_path": "_clients/capital-v/lushi/research/medvi-reference/site-scrape/",
+    "framer_label": "Cards & Copy"
+  }
+}

package/modules/collection-block-medvi/sections/runwell-collection-block-medvi.liquid

@@ -0,0 +1,355 @@
+{%- comment -%}
+  Runwell collection-block-medvi.
+
+  Duplex category section adapted from medvi.org. One side: product hero
+  card on a tinted background, with a benefits checklist below. Other side:
+  eyebrow + split-color headline + 2 lifestyle photos + sub + body + CTA.
+  Sides flip per instance via the `layout` setting.
+
+  Lineage: extracted from home.medvi.org (Framer label "Cards & Copy"),
+  generalised to Runwell brand tokens. See module README for details.
+{%- endcomment -%}
+
+{{ 'runwell-collection-block-medvi.css' | asset_url | stylesheet_tag }}
+
+{%- liquid
+  assign layout = section.settings.layout | default: 'image-left'
+  assign bg_band = section.settings.bg_band | default: 'white'
+  assign accent_color = section.settings.headline_accent_color | default: 'var(--runwell-primary)'
+  assign product_card_bg = section.settings.product_card_bg | default: 'var(--runwell-celadon)'
+-%}
+
+<section
+  class="runwell-collection-block-medvi runwell-collection-block-medvi--{{ layout }} runwell-collection-block-medvi--bg-{{ bg_band }}"
+>
+  <div class="runwell-collection-block-medvi__inner">
+
+    <div class="runwell-collection-block-medvi__product-side">
+      {%- if section.settings.show_product_card -%}
+        <div
+          class="runwell-collection-block-medvi__product-card"
+          style="background: {{ product_card_bg }};"
+        >
+          {%- if section.settings.product_image != blank -%}
+            <img
+              src="{{ section.settings.product_image | image_url: width: 800 }}"
+              alt="{{ section.settings.product_image.alt | default: section.settings.headline_pre | escape }}"
+              width="{{ section.settings.product_image.width }}"
+              height="{{ section.settings.product_image.height }}"
+              loading="lazy"
+              class="runwell-collection-block-medvi__product-image"
+            >
+          {%- elsif section.settings.product_image_asset != blank -%}
+            <img
+              src="{{ section.settings.product_image_asset | asset_url }}"
+              alt="{{ section.settings.headline_pre | escape }}"
+              width="800"
+              height="600"
+              loading="lazy"
+              class="runwell-collection-block-medvi__product-image"
+            >
+          {%- endif -%}
+        </div>
+      {%- endif -%}
+
+      {%- assign benefits_blocks = section.blocks | where: 'type', 'benefit' -%}
+      {%- if benefits_blocks.size > 0 -%}
+        <div class="runwell-collection-block-medvi__benefits">
+          {%- if section.settings.benefits_heading != blank -%}
+            <p class="runwell-collection-block-medvi__benefits-heading">
+              {{ section.settings.benefits_heading }}
+            </p>
+          {%- endif -%}
+          <ul class="runwell-collection-block-medvi__benefits-list">
+            {%- for block in benefits_blocks -%}
+              <li class="runwell-collection-block-medvi__benefit" {{ block.shopify_attributes }}>
+                <span class="runwell-collection-block-medvi__check" aria-hidden="true">
+                  <svg viewBox="0 0 24 24" width="14" height="14" fill="none">
+                    <path d="M5 12.5l4.5 4.5L19 7" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+                  </svg>
+                </span>
+                <span class="runwell-collection-block-medvi__benefit-text">{{ block.settings.text }}</span>
+              </li>
+            {%- endfor -%}
+          </ul>
+        </div>
+      {%- endif -%}
+    </div>
+
+    <div class="runwell-collection-block-medvi__copy-side">
+      {%- if section.settings.eyebrow != blank -%}
+        <p class="runwell-collection-block-medvi__eyebrow">{{ section.settings.eyebrow }}</p>
+      {%- endif -%}
+
+      {%- liquid
+        assign h_pre  = section.settings.headline_pre
+        assign h_mid  = section.settings.headline_mid
+        assign h_post = section.settings.headline_post
+        assign has_mid = false
+        if h_mid != blank
+          assign has_mid = true
+        endif
+      -%}
+      {%- if h_pre != blank or h_mid != blank or h_post != blank -%}
+        <h2 class="runwell-collection-block-medvi__headline">
+          {%- if h_pre != blank -%}
+            <span class="runwell-collection-block-medvi__headline-part runwell-collection-block-medvi__headline-pre">{{ h_pre }}</span>
+            {%- if h_mid != blank or h_post != blank -%}{{ ' ' }}{%- endif -%}
+          {%- endif -%}
+          {%- if has_mid -%}
+            <span class="runwell-collection-block-medvi__headline-part runwell-collection-block-medvi__headline-accent" style="color: {{ accent_color }};">{{ h_mid }}</span>
+            {%- if h_post != blank -%}{{ ' ' }}<span class="runwell-collection-block-medvi__headline-part runwell-collection-block-medvi__headline-post">{{ h_post }}</span>{%- endif -%}
+          {%- elsif h_post != blank -%}
+            <span class="runwell-collection-block-medvi__headline-part runwell-collection-block-medvi__headline-accent" style="color: {{ accent_color }};">{{ h_post }}</span>
+          {%- endif -%}
+        </h2>
+      {%- endif -%}
+
+      <div class="runwell-collection-block-medvi__photos">
+        {%- if section.settings.lifestyle_image_1 != blank -%}
+          <figure class="runwell-collection-block-medvi__photo">
+            <img
+              src="{{ section.settings.lifestyle_image_1 | image_url: width: 800 }}"
+              alt="{{ section.settings.lifestyle_image_1.alt | default: '' | escape }}"
+              width="{{ section.settings.lifestyle_image_1.width }}"
+              height="{{ section.settings.lifestyle_image_1.height }}"
+              loading="lazy"
+            >
+          </figure>
+        {%- elsif section.settings.lifestyle_image_1_asset != blank -%}
+          <figure class="runwell-collection-block-medvi__photo">
+            <img
+              src="{{ section.settings.lifestyle_image_1_asset | asset_url }}"
+              alt=""
+              width="800"
+              height="1000"
+              loading="lazy"
+            >
+          </figure>
+        {%- endif -%}
+        {%- if section.settings.lifestyle_image_2 != blank -%}
+          <figure class="runwell-collection-block-medvi__photo">
+            <img
+              src="{{ section.settings.lifestyle_image_2 | image_url: width: 800 }}"
+              alt="{{ section.settings.lifestyle_image_2.alt | default: '' | escape }}"
+              width="{{ section.settings.lifestyle_image_2.width }}"
+              height="{{ section.settings.lifestyle_image_2.height }}"
+              loading="lazy"
+            >
+          </figure>
+        {%- elsif section.settings.lifestyle_image_2_asset != blank -%}
+          <figure class="runwell-collection-block-medvi__photo">
+            <img
+              src="{{ section.settings.lifestyle_image_2_asset | asset_url }}"
+              alt=""
+              width="800"
+              height="1000"
+              loading="lazy"
+            >
+          </figure>
+        {%- endif -%}
+      </div>
+
+      {%- if section.settings.subhead != blank -%}
+        <p class="runwell-collection-block-medvi__subhead">{{ section.settings.subhead }}</p>
+      {%- endif -%}
+
+      {%- if section.settings.body != blank -%}
+        <div class="runwell-collection-block-medvi__body">{{ section.settings.body }}</div>
+      {%- endif -%}
+
+      {%- if section.settings.cta_label != blank -%}
+        <a
+          href="{{ section.settings.cta_link | default: '#' }}"
+          class="runwell-collection-block-medvi__cta"
+        >
+          {{ section.settings.cta_label }}
+        </a>
+      {%- endif -%}
+    </div>
+
+  </div>
+</section>
+
+{% schema %}
+{
+  "name": "Collection block (medvi)",
+  "tag": "section",
+  "class": "section-runwell-collection-block-medvi",
+  "settings": [
+    {
+      "type": "header",
+      "content": "Headline"
+    },
+    {
+      "type": "text",
+      "id": "eyebrow",
+      "label": "Eyebrow (tracked small caps)",
+      "default": "PURPOSE-DRIVEN SUPPLEMENTATION"
+    },
+    {
+      "type": "text",
+      "id": "headline_pre",
+      "label": "Headline (first part, plain)",
+      "default": "Supplements with the"
+    },
+    {
+      "type": "text",
+      "id": "headline_mid",
+      "label": "Headline (middle part, accent)",
+      "info": "Optional. When set, this is the accent-colored part and `headline_post` renders plain after it. Leave blank for a 2-part split (pre + post-accent)."
+    },
+    {
+      "type": "text",
+      "id": "headline_post",
+      "label": "Headline (third part)",
+      "info": "Plain when middle is set; accent when middle is blank.",
+      "default": "real results"
+    },
+    {
+      "type": "color",
+      "id": "headline_accent_color",
+      "label": "Headline accent color",
+      "default": "#0B3D38"
+    },
+    {
+      "type": "header",
+      "content": "Product hero card"
+    },
+    {
+      "type": "checkbox",
+      "id": "show_product_card",
+      "label": "Show product hero card",
+      "default": true
+    },
+    {
+      "type": "image_picker",
+      "id": "product_image",
+      "label": "Product image (uploaded)",
+      "info": "PNG with transparent background recommended. Falls through to bundled asset filename below."
+    },
+    {
+      "type": "text",
+      "id": "product_image_asset",
+      "label": "Product image (bundled asset filename)",
+      "info": "e.g. runwell-jar-hero.png"
+    },
+    {
+      "type": "color",
+      "id": "product_card_bg",
+      "label": "Product card background",
+      "default": "#ADDDBD"
+    },
+    {
+      "type": "text",
+      "id": "benefits_heading",
+      "label": "Benefits heading",
+      "default": "What better support looks like"
+    },
+    {
+      "type": "header",
+      "content": "Lifestyle photos"
+    },
+    {
+      "type": "image_picker",
+      "id": "lifestyle_image_1",
+      "label": "Lifestyle photo 1",
+      "info": "3:4 portrait crop recommended. Falls through to bundled asset filename below."
+    },
+    {
+      "type": "text",
+      "id": "lifestyle_image_1_asset",
+      "label": "Lifestyle photo 1 (asset filename fallback)"
+    },
+    {
+      "type": "image_picker",
+      "id": "lifestyle_image_2",
+      "label": "Lifestyle photo 2"
+    },
+    {
+      "type": "text",
+      "id": "lifestyle_image_2_asset",
+      "label": "Lifestyle photo 2 (asset filename fallback)"
+    },
+    {
+      "type": "header",
+      "content": "Body copy"
+    },
+    {
+      "type": "text",
+      "id": "subhead",
+      "label": "Sub-headline",
+      "default": "Support that helps you feel better over time"
+    },
+    {
+      "type": "richtext",
+      "id": "body",
+      "label": "Body",
+      "default": "<p>Doctor-designed formulas made with quality ingredients and evidence-based dosing to support your body day after day.</p>"
+    },
+    {
+      "type": "text",
+      "id": "cta_label",
+      "label": "CTA label",
+      "default": "Shop the collection"
+    },
+    {
+      "type": "url",
+      "id": "cta_link",
+      "label": "CTA link"
+    },
+    {
+      "type": "header",
+      "content": "Layout"
+    },
+    {
+      "type": "select",
+      "id": "layout",
+      "label": "Layout",
+      "options": [
+        { "value": "image-left", "label": "Product side on left" },
+        { "value": "image-right", "label": "Product side on right" }
+      ],
+      "default": "image-left"
+    },
+    {
+      "type": "select",
+      "id": "bg_band",
+      "label": "Background band",
+      "options": [
+        { "value": "white", "label": "White" },
+        { "value": "oat", "label": "Oat" },
+        { "value": "celadon-tint", "label": "Celadon tint" }
+      ],
+      "default": "white"
+    }
+  ],
+  "blocks": [
+    {
+      "type": "benefit",
+      "name": "Benefit",
+      "limit": 5,
+      "settings": [
+        {
+          "type": "text",
+          "id": "text",
+          "label": "Benefit text",
+          "default": "Clean, transparent ingredients"
+        }
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Runwell collection-block-medvi",
+      "blocks": [
+        { "type": "benefit", "settings": { "text": "Clean, transparent ingredients" } },
+        { "type": "benefit", "settings": { "text": "Built to support daily health" } },
+        { "type": "benefit", "settings": { "text": "Evidence-based dosing" } },
+        { "type": "benefit", "settings": { "text": "Doctor-formulated blends" } },
+        { "type": "benefit", "settings": { "text": "High-quality sourcing" } }
+      ]
+    }
+  ]
+}
+{% endschema %}

package/modules/product-trio-medvi/README.md

@@ -0,0 +1,35 @@
+# product-trio-medvi
+
+3-product fan-layout showcase with a single soft-corner copy panel beside. Hero anchor for a product line. Reveals the actual product lineup that a `collection-block-medvi` introduces.
+
+Category: `branding`
+
+## Files
+
+- `sections/runwell-product-trio-medvi.liquid`
+- `assets/runwell-product-trio-medvi.css`
+
+## Layout
+
+Three products arranged in a fan: center product foregrounded (z-index above, slightly larger, vertically anchored at bottom), left and right products partially behind it. The composition is asymmetric on purpose; medvi's reference shot has the center product offset.
+
+The copy panel sits beside the products holding a single short headline (no body, no CTA). That's intentional: this component reveals products and anchors them with a one-line promise. Ad copy or extended CTA belong in adjacent components (`collection-block-medvi`, `editorial-block`, etc.).
+
+## Tokens consumed
+
+Brand: `--runwell-oat`, `--runwell-tertiary`, `--runwell-celadon`. Design system: `--runwell-radius-xl`. Typography: `--runwell-h3-size`.
+
+## Tenant overrides
+
+- Brand-block (`runwell.config.json`) flips global tokens. Panel background follows `--runwell-oat` by default.
+- Per-instance (Theme Editor): 6 image fields (3 products with uploaded image plus bundled-asset fallback for each), panel headline, panel background color, layout (products-left vs products-right), bg band.
+
+## Lineage
+
+Extracted from `https://home.medvi.org/` on 2026-05-06. Framer label: `3 Cards / Pill Image Group`. Scrape path: `_clients/capital-v/lushi/research/medvi-reference/site-scrape/`. The medvi reference shot uses 3 supplement jars (Colonix+ / BrainBloom / Colonix+) with a soft-cream panel saying "Doctor-formulated blends designed to support how your body works best."
+
+## Notes
+
+- Recommended product images are PNG with transparent background so the products float on top of the section's bg band. Document this in tenant onboarding.
+- Mobile: products row keeps horizontal arrangement but shrinks; panel stacks below.
+- This module pairs naturally with `collection-block-medvi`. Typical sequence: `collection-block-medvi` (introduces the category with benefits + lifestyle) then `product-trio-medvi` (reveals the products) then onward.

package/modules/product-trio-medvi/assets/runwell-product-trio-medvi.css

@@ -0,0 +1,119 @@
+/* Runwell product-trio-medvi.
+
+   3-product fan layout with center product foregrounded. Single
+   soft-corner copy panel beside.
+
+   Tokens: --runwell-oat, --runwell-tertiary, --runwell-radius-xl,
+   --runwell-h3-size.
+   Mobile-first: products row stays horizontal but shrinks; panel
+   stacks below at <768px.
+*/
+
+.runwell-product-trio-medvi {
+  padding: clamp(3rem, 8vw, 7rem) clamp(1.5rem, 4vw, 4rem);
+  font-family: var(--font-body-family, inherit);
+  color: var(--runwell-tertiary, #0B3D38);
+}
+
+.runwell-product-trio-medvi--bg-white {
+  background: #ffffff;
+}
+
+.runwell-product-trio-medvi--bg-oat {
+  background: var(--runwell-oat, #F5F0EE);
+}
+
+.runwell-product-trio-medvi--bg-celadon-tint {
+  background: color-mix(in srgb, var(--runwell-celadon, #ADDDBD) 18%, white);
+}
+
+.runwell-product-trio-medvi__inner {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: clamp(2rem, 4vw, 4rem);
+  max-width: 1280px;
+  margin: 0 auto;
+  align-items: center;
+}
+
+@media (min-width: 768px) {
+  .runwell-product-trio-medvi__inner {
+    grid-template-columns: 1.2fr 1fr;
+  }
+
+  .runwell-product-trio-medvi--products-right .runwell-product-trio-medvi__inner {
+    direction: rtl;
+  }
+
+  .runwell-product-trio-medvi--products-right .runwell-product-trio-medvi__inner > * {
+    direction: ltr;
+  }
+}
+
+/* ----- Products fan ----- */
+
+.runwell-product-trio-medvi__products {
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  gap: clamp(0.25rem, 1vw, 0.75rem);
+  min-height: clamp(280px, 35vw, 480px);
+}
+
+.runwell-product-trio-medvi__product {
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.runwell-product-trio-medvi__product img {
+  display: block;
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+}
+
+.runwell-product-trio-medvi__product--left,
+.runwell-product-trio-medvi__product--right {
+  flex: 0 1 28%;
+  max-width: 220px;
+  z-index: 1;
+}
+
+.runwell-product-trio-medvi__product--left {
+  margin-right: -3%;
+  transform: translateY(8%);
+}
+
+.runwell-product-trio-medvi__product--right {
+  margin-left: -3%;
+  transform: translateY(8%);
+}
+
+.runwell-product-trio-medvi__product--center {
+  flex: 0 1 36%;
+  max-width: 320px;
+  z-index: 2;
+}
+
+/* ----- Copy panel ----- */
+
+.runwell-product-trio-medvi__panel {
+  border-radius: var(--runwell-radius-xl, 32px);
+  padding: clamp(2rem, 4vw, 3.5rem);
+  display: flex;
+  align-items: center;
+  min-height: clamp(180px, 20vw, 280px);
+}
+
+.runwell-product-trio-medvi__panel-heading {
+  font-family: var(--font-heading-family, inherit);
+  font-size: var(--runwell-h3-size, clamp(2rem, 3vw, 2.8rem));
+  font-weight: 600;
+  line-height: 1.25;
+  margin: 0;
+  text-align: center;
+  width: 100%;
+}

package/modules/product-trio-medvi/module.json

@@ -0,0 +1,48 @@
+{
+  "name": "product-trio-medvi",
+  "version": "0.1.0",
+  "category": "branding",
+  "source": "medvi",
+  "base": "product-trio",
+  "qualifier": null,
+  "description": "3-product showcase, fan layout with center product foregrounded, soft-corner copy panel beside. Hero anchor for a product line.",
+  "replaces": null,
+  "files": {
+    "sections": [
+      "sections/runwell-product-trio-medvi.liquid"
+    ],
+    "snippets": [],
+    "assets": [
+      "assets/runwell-product-trio-medvi.css"
+    ]
+  },
+  "config": {
+    "schema": {
+      "panel_heading": {
+        "type": "string",
+        "default": "Doctor-formulated blends designed to support how your body works best.",
+        "label": "Panel headline"
+      },
+      "panel_bg": {
+        "type": "string",
+        "default": "{{brand.oat}}",
+        "label": "Panel background tint"
+      },
+      "layout": {
+        "type": "string",
+        "default": "products-left",
+        "label": "Layout: products-left or products-right"
+      },
+      "bg_band": {
+        "type": "string",
+        "default": "white",
+        "label": "Background band: white, oat, celadon-tint"
+      }
+    }
+  },
+  "lineage": {
+    "extracted_from": "https://home.medvi.org/",
+    "scrape_path": "_clients/capital-v/lushi/research/medvi-reference/site-scrape/",
+    "framer_label": "3 Cards / Pill Image Group"
+  }
+}