@runwell/shopify-toolkit 0.6.0 → 0.7.0

package/modules/INDEX.md

@@ -3,7 +3,7 @@
 Auto-generated by `scripts/generate-index.mjs`. Do not edit by hand.
 Skills (shopify-storefront, shopify-cro, shopify-cli-ops, shopify-admin-browser) grep this file before writing custom Liquid.
 
-Total modules: 31.
+Total modules: 34.
 
 ## By category
 
@@ -11,7 +11,7 @@ Total modules: 31.
 - **conversion**: cart-cross-sell, cart-freeship-progress, cart-usps, exit-intent, gift-with-purchase, post-purchase-upsell, quick-view, risk-reversal, shipping-bar, sticky-atc
 - **customer**: loyalty-tiers, wishlist
 - **pdp**: comparison-table, delivery-estimate, inventory-urgency, pdp-ingredients, pdp-journal-link, pdp-trust-checks, recently-viewed
-- **social-proof**: press-bar, product-badges, reviews, testimonials, trust-badges
+- **social-proof**: press-bar, product-badges, reviews, scrolling-ticker, social-proof-banner, stats-bar, testimonials, trust-badges
 - **storefront**: editorial-block, editorial-hero, faq, how-it-works
 
 ## Modules
@@ -25,7 +25,7 @@ Total modules: 31.
 | `comparison-table` | pdp | app-driven comparison widgets |  | eyebrow, heading, lede, background_color, text_color | feature-columns, feature-rows | (none) |
 | `delivery-estimate` | pdp | (native build) | snippets:1 | (none) | (none) | (none) |
 | `editorial-block` | storefront | (native build) | sections:1 | eyebrow, heading, lede, background_color, text_color | (none) | (none) |
-| `editorial-hero` | storefront | (native build) | sections:1 | eyebrow, heading, subheading, video_url, poster_image, min_height, button_label_primary, button_link_primary, button_label_secondary, button_link_secondary | (none) | (none) |
+| `editorial-hero` | storefront | Dawn's image-banner / video-banner |  | eyebrow, heading, subheading | video-bg, hero-with-card | (none) |
 | `exit-intent` | conversion | (native build) | sections:1 assets:1 | eyebrow, heading, lede | (none) | (none) |
 | `faq` | storefront | (native build) | sections:1 | eyebrow, heading, background_color, text_color | (none) | (none) |
 | `gift-with-purchase` | conversion | (native build) | snippets:1 assets:1 | threshold_cents, gift_handle, unlocked_message, locked_message_suffix | (none) | create-gift-product + create-gift-discount |
@@ -43,10 +43,13 @@ Total modules: 31.
 | `recently-viewed` | pdp | (native build) | sections:1 assets:1 | eyebrow, heading, background_color | (none) | (none) |
 | `reviews` | social-proof | (native build) | sections:1 | heading | (none) | (none) |
 | `risk-reversal` | conversion | (native build) | sections:1 | icon, heading, body, link_label, link_url, background_color, text_color | (none) | (none) |
+| `scrolling-ticker` | social-proof | announcement-bar / scrolling-text apps | sections:1 assets:1 | (none) | (none) | (none) |
 | `shipping-bar` | conversion | (native build) | sections:1 | threshold_cents, message_below, message_qualified, message_default, background_color, text_color | (none) | (none) |
+| `social-proof-banner` | social-proof | fixed-text social-proof apps | sections:1 assets:1 | (none) | (none) | (none) |
+| `stats-bar` | social-proof | app-driven stat counters | sections:1 assets:1 | (none) | (none) | (none) |
 | `sticky-atc` | conversion | Sticky Add To Cart Booster Pro and similar | sections:1 assets:1 | (none) | (none) | (none) |
 | `subscriptions` | catalog | Recharge / Bold Subscriptions / Appstle for the storefront display layer; subscription management still uses Shopify's native customer account | snippets:1 | one_time_label, subscribe_label, fineprint | (none) | install-shopify-subscriptions + create-selling-plan-group + enable-customer-account-tab |
-| `testimonials` | social-proof | (native build) | sections:1 | eyebrow, heading, background_color, text_color | (none) | (none) |
+| `testimonials` | social-proof | app-driven review widgets at the social-proof display layer |  | eyebrow, heading, background_color, text_color | grid-quotes, carousel-ugc | (none) |
 | `trust-badges` | social-proof | (native build) | sections:1 | background_color, text_color | (none) | (none) |
 | `wishlist` | customer | Wishlist Plus, Wishlist King, Globo Wishlist | sections:1 snippets:1 assets:1 templates:1 | max_items | (none) | create-wishlist-page |
 
@@ -107,9 +110,10 @@ Total modules: 31.
 ### editorial-hero
 
 - Category: storefront
-- What: Lushi video hero module migrated from Lushi.
-- Files: sections:1
-- Config: eyebrow, heading, subheading, video_url, poster_image, min_height, button_label_primary, button_link_primary, button_label_secondary, button_link_secondary
+- Replaces: Dawn's image-banner / video-banner
+- What: Editorial hero section.
+- Config: eyebrow, heading, subheading
+- Variants: video-bg, hero-with-card
 
 ### exit-intent
 
@@ -233,6 +237,13 @@ Total modules: 31.
 - Files: sections:1
 - Config: icon, heading, body, link_label, link_url, background_color, text_color
 
+### scrolling-ticker
+
+- Category: social-proof
+- Replaces: announcement-bar / scrolling-text apps
+- What: Top-of-page horizontally-scrolling promotional ticker (free shipping, sale messaging, FOMO copy).
+- Files: sections:1 assets:1
+
 ### shipping-bar
 
 - Category: conversion
@@ -240,6 +251,20 @@ Total modules: 31.
 - Files: sections:1
 - Config: threshold_cents, message_below, message_qualified, message_default, background_color, text_color
 
+### social-proof-banner
+
+- Category: social-proof
+- Replaces: fixed-text social-proof apps
+- What: Single-line social-proof banner (e.g.
+- Files: sections:1 assets:1
+
+### stats-bar
+
+- Category: social-proof
+- Replaces: app-driven stat counters
+- What: Three-up (or N-up) stats row with big number + supporting label per block.
+- Files: sections:1 assets:1
+
 ### sticky-atc
 
 - Category: conversion
@@ -259,9 +284,10 @@ Total modules: 31.
 ### testimonials
 
 - Category: social-proof
-- What: Lushi testimonials module migrated from Lushi.
-- Files: sections:1
+- Replaces: app-driven review widgets at the social-proof display layer
+- What: Customer testimonials section.
 - Config: eyebrow, heading, background_color, text_color
+- Variants: grid-quotes, carousel-ugc
 
 ### trust-badges
 

package/modules/editorial-hero/module.json

@@ -1,61 +1,44 @@
 {
   "name": "editorial-hero",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "category": "storefront",
-  "description": "Lushi video hero module migrated from Lushi.",
-  "files": {
-    "sections": [
-      "sections/runwell-video-hero.liquid"
-    ]
-  },
+  "description": "Editorial hero section. Two variants: video-bg (default) renders a full-bleed background video with eyebrow + heading + subhead + dual CTA, ideal for Lushi-style editorial brands; hero-with-card renders a background image with a centered text card (Hero with Card pattern), ideal for product-led brands. Replaces Dawn's image-banner / video-banner.",
+  "default_variant": "video-bg",
   "config": {
     "schema": {
-      "eyebrow": {
-        "type": "string",
-        "default": "Wellness, curated",
-        "label": "Eyebrow text"
-      },
-      "heading": {
-        "type": "string",
-        "default": "Glow from within.",
-        "label": "Headline"
-      },
-      "subheading": {
-        "type": "string",
-        "default": "Lushi is a modern wellness brand offering curated supplements, skincare, and rituals for everyday health.",
-        "label": "Subheading"
-      },
-      "video_url": {
-        "type": "string",
-        "label": "Background video URL (mp4)"
-      },
-      "poster_image": {
-        "type": "string",
-        "label": "Poster image (and fallback)"
-      },
-      "min_height": {
-        "type": "number",
-        "default": 100,
-        "label": "Hero min-height (vh)"
-      },
-      "button_label_primary": {
-        "type": "string",
-        "default": "Shop wellness",
-        "label": "Primary button label"
-      },
-      "button_link_primary": {
-        "type": "string",
-        "label": "Primary button link"
-      },
-      "button_label_secondary": {
-        "type": "string",
-        "default": "Read the journal",
-        "label": "Secondary button label"
-      },
-      "button_link_secondary": {
-        "type": "string",
-        "label": "Secondary button link"
+      "eyebrow": { "type": "string", "default": "Wellness, curated", "label": "Eyebrow text" },
+      "heading": { "type": "string", "default": "Glow from within.", "label": "Headline" },
+      "subheading": { "type": "string", "default": "Lushi is a modern wellness brand offering curated supplements, skincare, and rituals for everyday health.", "label": "Subheading" }
+    }
+  },
+  "variants": {
+    "video-bg": {
+      "description": "Full-bleed background video (mp4) with poster fallback, eyebrow + heading + subhead + primary/secondary CTAs. Section type: runwell-video-hero.",
+      "files": {
+        "sections": ["variants/video-bg/sections/runwell-video-hero.liquid"]
+      },
+      "config_extra": {
+        "video_url": { "type": "string", "label": "Background video URL (mp4)" },
+        "poster_image": { "type": "string", "label": "Poster image (and fallback)" },
+        "fallback_asset": { "type": "string", "label": "Bundled fallback asset filename (e.g. lushi-hero-bg.jpg)" },
+        "min_height": { "type": "number", "default": 100, "label": "Hero min-height (vh)" },
+        "button_label_primary": { "type": "string", "default": "Shop wellness", "label": "Primary button label" },
+        "button_link_primary": { "type": "string", "label": "Primary button link" },
+        "button_label_secondary": { "type": "string", "default": "Read the journal", "label": "Secondary button label" },
+        "button_link_secondary": { "type": "string", "label": "Secondary button link" }
+      }
+    },
+    "hero-with-card": {
+      "description": "Background image (image_picker) with a centered text card overlay. Single CTA. Image overlay opacity is configurable. Section type: runwell-editorial-hero. Ported from Lusha bespoke (guabrasha-store/sections/hero-with-card.liquid).",
+      "files": {
+        "sections": ["variants/hero-with-card/sections/runwell-editorial-hero.liquid"],
+        "assets": ["variants/hero-with-card/assets/runwell-editorial-hero.css"]
+      },
+      "config_extra": {
+        "overlay_opacity": { "type": "number", "default": 20, "label": "Image overlay opacity (%)" },
+        "button_label": { "type": "string", "default": "Shop now", "label": "Button label" },
+        "button_link": { "type": "string", "label": "Button link" }
       }
     }
   }
-}
+}

package/modules/editorial-hero/variants/hero-with-card/assets/runwell-editorial-hero.css

@@ -0,0 +1,108 @@
+.runwell-editorial-hero--card {
+  position: relative;
+  min-height: 85vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.runwell-editorial-hero__media {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+}
+
+.runwell-editorial-hero__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.runwell-editorial-hero__placeholder {
+  width: 100%;
+  height: 100%;
+  background: #E8D5C4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.runwell-editorial-hero__placeholder svg {
+  width: 60%;
+  max-width: 600px;
+  opacity: 0.3;
+}
+
+.runwell-editorial-hero__overlay {
+  position: absolute;
+  inset: 0;
+  background: #000;
+}
+
+.runwell-editorial-hero__content-wrapper {
+  position: relative;
+  z-index: 1;
+  padding: 2rem;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.runwell-editorial-hero__card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(12px);
+  border-radius: 20px;
+  padding: 3.6rem 4rem;
+  max-width: 560px;
+  text-align: center;
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
+}
+
+.runwell-editorial-hero__heading {
+  margin-bottom: 1.2rem;
+  color: #2A2622;
+}
+
+.runwell-editorial-hero__subheading {
+  font-size: 1.5rem;
+  color: #6B6259;
+  line-height: 1.6;
+  margin-bottom: 2rem;
+}
+
+.runwell-editorial-hero__button {
+  min-width: 200px;
+  font-size: 1.5rem;
+  padding: 1.4rem 3.2rem;
+  background: #2A2622;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-block;
+  transition: background 0.2s;
+}
+
+.runwell-editorial-hero__button:hover {
+  background: #3F5B4C;
+}
+
+@media screen and (max-width: 749px) {
+  .runwell-editorial-hero--card {
+    min-height: 70vh;
+  }
+
+  .runwell-editorial-hero__card {
+    padding: 2.4rem 2rem;
+    margin: 0 1rem;
+    border-radius: 16px;
+  }
+
+  .runwell-editorial-hero__button {
+    width: 100%;
+  }
+}

package/modules/editorial-hero/variants/hero-with-card/sections/runwell-editorial-hero.liquid

@@ -0,0 +1,91 @@
+{{ 'runwell-editorial-hero.css' | asset_url | stylesheet_tag }}
+
+<div class="runwell-editorial-hero runwell-editorial-hero--card color-{{ section.settings.color_scheme }}">
+  <div class="runwell-editorial-hero__media">
+    {% if section.settings.image != blank %}
+      {{ section.settings.image | image_url: width: 1920 | image_tag: loading: 'eager', class: 'runwell-editorial-hero__image', sizes: '100vw' }}
+    {% else %}
+      <div class="runwell-editorial-hero__placeholder">{{ 'lifestyle-1' | placeholder_svg_tag }}</div>
+    {% endif %}
+    <div class="runwell-editorial-hero__overlay" style="opacity: {{ section.settings.overlay_opacity | divided_by: 100.0 }};"></div>
+  </div>
+
+  <div class="runwell-editorial-hero__content-wrapper">
+    <div class="runwell-editorial-hero__card color-scheme-1">
+      {% if section.settings.heading != blank %}
+        <h1 class="runwell-editorial-hero__heading {{ section.settings.heading_size }}">{{ section.settings.heading }}</h1>
+      {% endif %}
+      {% if section.settings.subheading != blank %}
+        <p class="runwell-editorial-hero__subheading">{{ section.settings.subheading }}</p>
+      {% endif %}
+      {% if section.settings.button_label != blank %}
+        <a href="{{ section.settings.button_link }}" class="button runwell-editorial-hero__button">{{ section.settings.button_label }}</a>
+      {% endif %}
+    </div>
+  </div>
+</div>
+
+{% schema %}
+{
+  "name": "Editorial hero (card)",
+  "tag": "section",
+  "class": "section-runwell-editorial-hero",
+  "settings": [
+    {
+      "type": "image_picker",
+      "id": "image",
+      "label": "Background image"
+    },
+    {
+      "type": "range",
+      "id": "overlay_opacity",
+      "label": "Image overlay opacity",
+      "min": 0, "max": 80, "step": 5, "default": 20, "unit": "%"
+    },
+    {
+      "type": "text",
+      "id": "heading",
+      "label": "Heading",
+      "default": "A Moment of Care, Every Day"
+    },
+    {
+      "type": "select",
+      "id": "heading_size",
+      "label": "Heading size",
+      "options": [
+        { "value": "h1", "label": "Large" },
+        { "value": "h0", "label": "Extra large" }
+      ],
+      "default": "h1"
+    },
+    {
+      "type": "text",
+      "id": "subheading",
+      "label": "Subheading",
+      "default": "Discover gentle sculpting tools designed for everyday comfort; a thoughtful addition to your morning ritual."
+    },
+    {
+      "type": "text",
+      "id": "button_label",
+      "label": "Button label",
+      "default": "Shop Now"
+    },
+    {
+      "type": "url",
+      "id": "button_link",
+      "label": "Button link"
+    },
+    {
+      "type": "color_scheme",
+      "id": "color_scheme",
+      "label": "Color scheme",
+      "default": "scheme-1"
+    }
+  ],
+  "presets": [
+    {
+      "name": "Editorial hero (card)"
+    }
+  ]
+}
+{% endschema %}

package/modules/scrolling-ticker/assets/runwell-scrolling-ticker.css

@@ -0,0 +1,51 @@
+.runwell-scrolling-ticker {
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 12px 0;
+  font-size: 1.4rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.scrolling-ticker__inner {
+  display: flex;
+  width: max-content;
+  animation: ticker-scroll var(--ticker-speed, 25s) linear infinite;
+}
+
+.scrolling-ticker__content {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.scrolling-ticker__item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.scrolling-ticker__separator {
+  opacity: 0.6;
+}
+
+.scrolling-ticker__icon {
+  font-size: 1.2em;
+}
+
+@keyframes ticker-scroll {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-25%); }
+}
+
+.scrolling-ticker:hover .scrolling-ticker__inner {
+  animation-play-state: paused;
+}
+
+@media screen and (max-width: 749px) {
+  .runwell-scrolling-ticker {
+    font-size: 1.2rem;
+    padding: 10px 0;
+  }
+}

package/modules/scrolling-ticker/module.json

@@ -0,0 +1,13 @@
+{
+  "name": "scrolling-ticker",
+  "version": "0.1.0",
+  "category": "social-proof",
+  "description": "Top-of-page horizontally-scrolling promotional ticker (free shipping, sale messaging, FOMO copy). One block per text item. Replaces announcement-bar / scrolling-text apps. Promoted from Lusha bespoke (guabrasha-store/sections/scrolling-ticker.liquid).",
+  "files": {
+    "sections": ["sections/runwell-scrolling-ticker.liquid"],
+    "assets": ["assets/runwell-scrolling-ticker.css"]
+  },
+  "config": {
+    "schema": {}
+  }
+}

package/modules/scrolling-ticker/sections/runwell-scrolling-ticker.liquid

@@ -0,0 +1,82 @@
+{{ 'runwell-scrolling-ticker.css' | asset_url | stylesheet_tag }}
+
+<div class="runwell-scrolling-ticker color-{{ section.settings.color_scheme }}" role="marquee">
+  <div class="scrolling-ticker__inner">
+    {% for i in (1..4) %}
+      <div class="scrolling-ticker__content" {% if forloop.index > 1 %}aria-hidden="true"{% endif %}>
+        {% for block in section.blocks %}
+          <span class="scrolling-ticker__item">
+            {% if block.settings.icon != 'none' %}
+              <span class="scrolling-ticker__icon">{{ block.settings.icon }}</span>
+            {% endif %}
+            {{ block.settings.text }}
+          </span>
+          <span class="scrolling-ticker__separator">&nbsp;&nbsp;{{ section.settings.separator }}&nbsp;&nbsp;</span>
+        {% endfor %}
+      </div>
+    {% endfor %}
+  </div>
+</div>
+
+{% schema %}
+{
+  "name": "Scrolling Ticker",
+  "tag": "section",
+  "class": "section-runwell-scrolling-ticker",
+  "settings": [
+    {
+      "type": "color_scheme",
+      "id": "color_scheme",
+      "label": "Color scheme",
+      "default": "scheme-3"
+    },
+    {
+      "type": "text",
+      "id": "separator",
+      "label": "Separator",
+      "default": "\u2728"
+    },
+    {
+      "type": "range",
+      "id": "speed",
+      "label": "Scroll speed (seconds)",
+      "min": 10,
+      "max": 60,
+      "step": 5,
+      "default": 25,
+      "unit": "s"
+    }
+  ],
+  "blocks": [
+    {
+      "type": "text",
+      "name": "Text item",
+      "settings": [
+        {
+          "type": "text",
+          "id": "text",
+          "label": "Text",
+          "default": "Free shipping on orders over $50"
+        },
+        {
+          "type": "text",
+          "id": "icon",
+          "label": "Icon (emoji)",
+          "default": "none"
+        }
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Scrolling Ticker",
+      "blocks": [
+        { "type": "text", "settings": { "text": "FREE SHIPPING on orders over $50", "icon": "\u2728" } },
+        { "type": "text", "settings": { "text": "Your 2-minute morning sculpting ritual", "icon": "\u2728" } },
+        { "type": "text", "settings": { "text": "Inspired by centuries of facial sculpting wisdom", "icon": "\u2728" } },
+        { "type": "text", "settings": { "text": "90-Day Satisfaction Guarantee", "icon": "\u2728" } }
+      ]
+    }
+  ]
+}
+{% endschema %}

package/modules/social-proof-banner/assets/runwell-social-proof-banner.css

@@ -0,0 +1,30 @@
+.social-proof-banner__content {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 0.6rem;
+  text-align: center;
+}
+
+.social-proof-banner__count {
+  font-family: var(--font-heading-family);
+  font-size: 3.6rem;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.social-proof-banner__text {
+  font-size: 1.6rem;
+  opacity: 0.8;
+}
+
+@media screen and (max-width: 749px) {
+  .social-proof-banner__content {
+    flex-direction: column;
+    gap: 0.2rem;
+  }
+
+  .social-proof-banner__count {
+    font-size: 2.8rem;
+  }
+}

package/modules/social-proof-banner/module.json

@@ -0,0 +1,13 @@
+{
+  "name": "social-proof-banner",
+  "version": "0.1.0",
+  "category": "social-proof",
+  "description": "Single-line social-proof banner (e.g. 'Loved by 12,400+ customers'). Compact form for tucking under hero or above CTA. Replaces fixed-text social-proof apps. Promoted from Lusha bespoke (guabrasha-store/sections/social-proof-banner.liquid).",
+  "files": {
+    "sections": ["sections/runwell-social-proof-banner.liquid"],
+    "assets": ["assets/runwell-social-proof-banner.css"]
+  },
+  "config": {
+    "schema": {}
+  }
+}

package/modules/social-proof-banner/sections/runwell-social-proof-banner.liquid

@@ -0,0 +1,66 @@
+{{ 'runwell-social-proof-banner.css' | asset_url | stylesheet_tag }}
+
+<div class="runwell-social-proof-banner color-{{ section.settings.color_scheme }} section-{{ section.id }}-padding">
+  <div class="page-width">
+    <div class="social-proof-banner__content">
+      {% if section.settings.count != blank %}
+        <span class="social-proof-banner__count">{{ section.settings.count }}</span>
+      {% endif %}
+      {% if section.settings.text != blank %}
+        <span class="social-proof-banner__text">{{ section.settings.text }}</span>
+      {% endif %}
+    </div>
+  </div>
+</div>
+
+{% schema %}
+{
+  "name": "Social Proof Banner",
+  "tag": "section",
+  "class": "section-runwell-social-proof-banner",
+  "settings": [
+    {
+      "type": "text",
+      "id": "count",
+      "label": "Count",
+      "default": "2,400+"
+    },
+    {
+      "type": "text",
+      "id": "text",
+      "label": "Text",
+      "default": "Happy Customers and Counting"
+    },
+    {
+      "type": "color_scheme",
+      "id": "color_scheme",
+      "label": "Color scheme",
+      "default": "scheme-2"
+    },
+    {
+      "type": "range",
+      "id": "padding_top",
+      "label": "Top padding",
+      "min": 0, "max": 60, "step": 4, "default": 24, "unit": "px"
+    },
+    {
+      "type": "range",
+      "id": "padding_bottom",
+      "label": "Bottom padding",
+      "min": 0, "max": 60, "step": 4, "default": 24, "unit": "px"
+    }
+  ],
+  "presets": [
+    {
+      "name": "Social Proof Banner"
+    }
+  ]
+}
+{% endschema %}
+
+<style>
+  .section-{{ section.id }}-padding {
+    padding-top: {{ section.settings.padding_top }}px;
+    padding-bottom: {{ section.settings.padding_bottom }}px;
+  }
+</style>

package/modules/stats-bar/assets/runwell-stats-bar.css

@@ -0,0 +1,49 @@
+.stats-bar__grid {
+  display: grid;
+  gap: 2rem;
+  text-align: center;
+}
+
+.stats-bar__grid--3-col {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.stats-bar__grid--2-col {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.stats-bar__grid--4-col {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.stats-bar__item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.8rem;
+  padding: 2rem 1rem;
+}
+
+.stats-bar__number {
+  font-size: 4.8rem;
+  line-height: 1;
+  font-weight: 600;
+}
+
+.stats-bar__label {
+  font-size: 1.4rem;
+  opacity: 0.85;
+  max-width: 24ch;
+  line-height: 1.4;
+}
+
+@media screen and (max-width: 749px) {
+  .stats-bar__grid--3-col,
+  .stats-bar__grid--4-col {
+    grid-template-columns: 1fr;
+  }
+
+  .stats-bar__number {
+    font-size: 3.6rem;
+  }
+}

package/modules/stats-bar/module.json

@@ -0,0 +1,13 @@
+{
+  "name": "stats-bar",
+  "version": "0.1.0",
+  "category": "social-proof",
+  "description": "Three-up (or N-up) stats row with big number + supporting label per block. Editorial social proof: clinical results, customer surveys, NPS, etc. Replaces app-driven stat counters. Promoted from Lusha bespoke (guabrasha-store/sections/stats-bar.liquid).",
+  "files": {
+    "sections": ["sections/runwell-stats-bar.liquid"],
+    "assets": ["assets/runwell-stats-bar.css"]
+  },
+  "config": {
+    "schema": {}
+  }
+}

package/modules/stats-bar/sections/runwell-stats-bar.liquid

@@ -0,0 +1,87 @@
+{{ 'runwell-stats-bar.css' | asset_url | stylesheet_tag }}
+
+<div class="runwell-stats-bar color-{{ section.settings.color_scheme }} section-{{ section.id }}-padding">
+  <div class="page-width">
+    <div class="stats-bar__grid stats-bar__grid--{{ section.blocks.size }}-col">
+      {% for block in section.blocks %}
+        <div class="stats-bar__item" {{ block.shopify_attributes }}>
+          <span class="stats-bar__number h0">{{ block.settings.number }}</span>
+          <span class="stats-bar__label">{{ block.settings.label }}</span>
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+</div>
+
+{% schema %}
+{
+  "name": "Stats Bar",
+  "tag": "section",
+  "class": "section-runwell-stats-bar",
+  "settings": [
+    {
+      "type": "color_scheme",
+      "id": "color_scheme",
+      "label": "Color scheme",
+      "default": "scheme-3"
+    },
+    {
+      "type": "range",
+      "id": "padding_top",
+      "label": "Top padding",
+      "min": 0,
+      "max": 100,
+      "step": 4,
+      "default": 40,
+      "unit": "px"
+    },
+    {
+      "type": "range",
+      "id": "padding_bottom",
+      "label": "Bottom padding",
+      "min": 0,
+      "max": 100,
+      "step": 4,
+      "default": 40,
+      "unit": "px"
+    }
+  ],
+  "blocks": [
+    {
+      "type": "stat",
+      "name": "Statistic",
+      "settings": [
+        {
+          "type": "text",
+          "id": "number",
+          "label": "Number",
+          "default": "89%"
+        },
+        {
+          "type": "text",
+          "id": "label",
+          "label": "Label",
+          "default": "saw reduced puffiness in 7 days"
+        }
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Stats Bar",
+      "blocks": [
+        { "type": "stat", "settings": { "number": "89%", "label": "saw reduced puffiness in 7 days" } },
+        { "type": "stat", "settings": { "number": "94%", "label": "noticed a more sculpted jawline in 4 weeks" } },
+        { "type": "stat", "settings": { "number": "91%", "label": "said their skin felt softer after first use" } }
+      ]
+    }
+  ]
+}
+{% endschema %}
+
+<style>
+  .section-{{ section.id }}-padding {
+    padding-top: {{ section.settings.padding_top }}px;
+    padding-bottom: {{ section.settings.padding_bottom }}px;
+  }
+</style>

package/modules/testimonials/module.json

@@ -1,35 +1,33 @@
 {
   "name": "testimonials",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "category": "social-proof",
-  "description": "Lushi testimonials module migrated from Lushi.",
-  "files": {
-    "sections": [
-      "sections/runwell-testimonials.liquid"
-    ]
-  },
+  "description": "Customer testimonials section. Two visual treatments: grid-quotes (default) renders 3 to 6 quote cards in a responsive grid, ideal for editorial brands; carousel-ugc renders a coverflow-style image carousel of UGC photos with arrows + click-to-jump, ideal for lifestyle/social-led brands. Replaces app-driven review widgets at the social-proof display layer.",
+  "default_variant": "grid-quotes",
   "config": {
     "schema": {
-      "eyebrow": {
-        "type": "string",
-        "default": "From the inbox",
-        "label": "Eyebrow"
-      },
-      "heading": {
-        "type": "string",
-        "default": "What customers are writing in.",
-        "label": "Heading"
-      },
-      "background_color": {
-        "type": "string",
-        "default": "#F5F0EE",
-        "label": "Background"
+      "eyebrow": { "type": "string", "default": "From the inbox", "label": "Eyebrow" },
+      "heading": { "type": "string", "default": "What customers are writing in.", "label": "Heading" },
+      "background_color": { "type": "string", "default": "#F5F0EE", "label": "Background" },
+      "text_color": { "type": "string", "default": "#0B3D38", "label": "Text" }
+    }
+  },
+  "variants": {
+    "grid-quotes": {
+      "description": "3 to 6 customer quote cards in a responsive grid. Each block is a quote with author + context + 0-5 star rating. Best for editorial / wellness brands.",
+      "files": {
+        "sections": ["variants/grid-quotes/sections/runwell-testimonials.liquid"]
+      }
+    },
+    "carousel-ugc": {
+      "description": "Coverflow-style UGC image carousel with arrows + click-to-jump. Each block is an image (image_picker or asset filename fallback) with alt text. Best for lifestyle / social-led brands. Ported from Lusha bespoke (guabrasha-store/sections/ugc-carousel.liquid).",
+      "files": {
+        "sections": ["variants/carousel-ugc/sections/runwell-testimonials.liquid"],
+        "assets": ["variants/carousel-ugc/assets/runwell-testimonials.css"]
       },
-      "text_color": {
-        "type": "string",
-        "default": "#0B3D38",
-        "label": "Text"
+      "config_extra": {
+        "subheading": { "type": "string", "default": "See how they sculpt", "label": "Subheading" }
       }
     }
   }
-}
+}

package/modules/testimonials/variants/carousel-ugc/assets/runwell-testimonials.css

@@ -0,0 +1,169 @@
+/* UGC Carousel: Coverflow-style image showcase */
+.runwell-testimonials--carousel {
+  padding: 40px 0;
+  background: var(--gradient-background);
+}
+
+.runwell-testimonials__heading {
+  font-family: var(--font-heading-family);
+  font-size: 2.4rem;
+  text-align: center;
+  margin-bottom: 8px;
+  color: rgba(var(--color-foreground), 1);
+}
+
+.runwell-testimonials__subheading {
+  font-size: 1.4rem;
+  text-align: center;
+  color: rgba(var(--color-foreground), 0.65);
+  margin-bottom: 32px;
+}
+
+.runwell-testimonials__viewport {
+  position: relative;
+  width: 100%;
+  max-width: 900px;
+  height: 420px;
+  margin: 0 auto;
+  overflow: hidden;
+}
+
+.runwell-testimonials__track {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.runwell-testimonials__item {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 240px;
+  height: 340px;
+  border-radius: 12px;
+  overflow: hidden;
+  transition: transform 0.5s ease, filter 0.5s ease, opacity 0.5s ease, box-shadow 0.5s ease;
+  cursor: pointer;
+}
+
+.runwell-testimonials__item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* Position states */
+.runwell-testimonials__item[data-pos="0"] {
+  transform: translate(-50%, -50%) scale(1.15);
+  filter: blur(0) brightness(1);
+  opacity: 1;
+  z-index: 5;
+  box-shadow: 0 20px 60px rgba(42, 38, 34, 0.25);
+}
+
+.runwell-testimonials__item[data-pos="1"] {
+  transform: translate(calc(-50% + 260px), -50%) scale(0.85);
+  filter: blur(1.5px) brightness(0.75);
+  opacity: 0.8;
+  z-index: 3;
+}
+
+.runwell-testimonials__item[data-pos="-1"] {
+  transform: translate(calc(-50% - 260px), -50%) scale(0.85);
+  filter: blur(1.5px) brightness(0.75);
+  opacity: 0.8;
+  z-index: 3;
+}
+
+.runwell-testimonials__item[data-pos="2"] {
+  transform: translate(calc(-50% + 440px), -50%) scale(0.65);
+  filter: blur(3px) brightness(0.6);
+  opacity: 0.5;
+  z-index: 1;
+}
+
+.runwell-testimonials__item[data-pos="-2"] {
+  transform: translate(calc(-50% - 440px), -50%) scale(0.65);
+  filter: blur(3px) brightness(0.6);
+  opacity: 0.5;
+  z-index: 1;
+}
+
+.runwell-testimonials__item[data-pos="hidden"] {
+  transform: translate(-50%, -50%) scale(0.4);
+  filter: blur(6px);
+  opacity: 0;
+  z-index: 0;
+  pointer-events: none;
+}
+
+/* Navigation arrows */
+.runwell-testimonials__arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  border: 2px solid rgba(var(--color-foreground), 0.12);
+  background: rgba(var(--color-background), 0.85);
+  backdrop-filter: blur(8px);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  color: rgba(var(--color-foreground), 0.8);
+  transition: border-color 0.2s, background 0.2s;
+}
+
+.runwell-testimonials__arrow:hover {
+  border-color: rgba(var(--color-foreground), 0.3);
+  background: rgba(var(--color-background), 1);
+}
+
+.runwell-testimonials__arrow--left {
+  left: 12px;
+}
+
+.runwell-testimonials__arrow--right {
+  right: 12px;
+}
+
+/* Mobile responsive */
+@media screen and (max-width: 749px) {
+  .runwell-testimonials__viewport {
+    height: 300px;
+  }
+
+  .runwell-testimonials__item {
+    width: 160px;
+    height: 230px;
+  }
+
+  .runwell-testimonials__item[data-pos="1"] {
+    transform: translate(calc(-50% + 150px), -50%) scale(0.8);
+  }
+
+  .runwell-testimonials__item[data-pos="-1"] {
+    transform: translate(calc(-50% - 150px), -50%) scale(0.8);
+  }
+
+  .runwell-testimonials__item[data-pos="2"],
+  .runwell-testimonials__item[data-pos="-2"] {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .runwell-testimonials__arrow {
+    width: 36px;
+    height: 36px;
+    font-size: 16px;
+  }
+
+  .runwell-testimonials__heading {
+    font-size: 2rem;
+  }
+}

package/modules/testimonials/variants/carousel-ugc/sections/runwell-testimonials.liquid

@@ -0,0 +1,148 @@
+{{ 'runwell-testimonials.css' | asset_url | stylesheet_tag }}
+
+<div class="runwell-testimonials runwell-testimonials--carousel color-{{ section.settings.color_scheme }}">
+  <div class="page-width">
+    {%- if section.settings.heading != blank -%}
+      <h2 class="runwell-testimonials__heading">{{ section.settings.heading }}</h2>
+    {%- endif -%}
+    {%- if section.settings.subheading != blank -%}
+      <p class="runwell-testimonials__subheading">{{ section.settings.subheading }}</p>
+    {%- endif -%}
+  </div>
+
+  <div class="runwell-testimonials__viewport" id="runwell-testimonials-{{ section.id }}">
+    <div class="runwell-testimonials__track">
+      {%- assign idx = 0 -%}
+      {%- for block in section.blocks -%}
+        {%- if block.type == 'image' -%}
+          <div class="runwell-testimonials__item" data-idx="{{ idx }}" data-pos="{{ idx }}" {{ block.shopify_attributes }}>
+            {%- if block.settings.image != blank -%}
+              {{ block.settings.image | image_url: width: 600 | image_tag:
+                loading: 'lazy',
+                widths: '300, 400, 600',
+                sizes: '240px',
+                alt: block.settings.alt
+              }}
+            {%- elsif block.settings.asset_filename != blank -%}
+              <img src="{{ block.settings.asset_filename | asset_url }}"
+                   alt="{{ block.settings.alt }}"
+                   loading="lazy"
+                   width="240"
+                   height="340">
+            {%- endif -%}
+          </div>
+          {%- assign idx = idx | plus: 1 -%}
+        {%- endif -%}
+      {%- endfor -%}
+    </div>
+    <button class="runwell-testimonials__arrow runwell-testimonials__arrow--left" aria-label="Previous image">&#8249;</button>
+    <button class="runwell-testimonials__arrow runwell-testimonials__arrow--right" aria-label="Next image">&#8250;</button>
+  </div>
+</div>
+
+<script>
+  (function() {
+    var container = document.getElementById('runwell-testimonials-{{ section.id }}');
+    if (!container) return;
+    var items = container.querySelectorAll('.runwell-testimonials__item');
+    var total = items.length;
+    if (total === 0) return;
+    var active = 0;
+
+    function setPositions() {
+      items.forEach(function(item, i) {
+        var offset = i - active;
+        if (offset > total / 2) offset -= total;
+        if (offset < -total / 2) offset += total;
+        if (offset >= -2 && offset <= 2) {
+          item.setAttribute('data-pos', String(offset));
+        } else {
+          item.setAttribute('data-pos', 'hidden');
+        }
+      });
+    }
+
+    function navigate(direction) {
+      active = (active + direction + total) % total;
+      setPositions();
+    }
+
+    container.querySelector('.runwell-testimonials__arrow--right').addEventListener('click', function() { navigate(1); });
+    container.querySelector('.runwell-testimonials__arrow--left').addEventListener('click', function() { navigate(-1); });
+
+    items.forEach(function(item, i) {
+      item.addEventListener('click', function() {
+        if (i === active) return;
+        active = i;
+        setPositions();
+      });
+    });
+
+    setPositions();
+  })();
+</script>
+
+{% schema %}
+{
+  "name": "Testimonials (UGC)",
+  "tag": "section",
+  "class": "section",
+  "settings": [
+    {
+      "type": "text",
+      "id": "heading",
+      "label": "Heading",
+      "default": "Real Women, Real Results"
+    },
+    {
+      "type": "text",
+      "id": "subheading",
+      "label": "Subheading",
+      "default": "See how they sculpt"
+    },
+    {
+      "type": "color_scheme",
+      "id": "color_scheme",
+      "label": "Color scheme",
+      "default": "scheme-1"
+    }
+  ],
+  "blocks": [
+    {
+      "type": "image",
+      "name": "Image",
+      "settings": [
+        {
+          "type": "image_picker",
+          "id": "image",
+          "label": "Image"
+        },
+        {
+          "type": "text",
+          "id": "asset_filename",
+          "label": "Asset filename (fallback)",
+          "info": "Use if image picker is empty. Enter the filename from assets/ directory."
+        },
+        {
+          "type": "text",
+          "id": "alt",
+          "label": "Alt text"
+        }
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Testimonials (UGC)",
+      "blocks": [
+        { "type": "image", "settings": { "asset_filename": "ugc-mediterranean-cheekbone.png", "alt": "Woman sculpting cheekbone" } },
+        { "type": "image", "settings": { "asset_filename": "ugc-black-woman-cheek.png", "alt": "Woman using brush on cheek" } },
+        { "type": "image", "settings": { "asset_filename": "ugc-east-asian-jawline.png", "alt": "Jawline sculpting technique" } },
+        { "type": "image", "settings": { "asset_filename": "ugc-latina-presenting.png", "alt": "Presenting brush with case" } },
+        { "type": "image", "settings": { "asset_filename": "ugc-south-asian-playful.png", "alt": "Playful pose with brush" } },
+        { "type": "image", "settings": { "asset_filename": "ugc-blonde-presenting.png", "alt": "Blonde woman presenting Lusha brush" } }
+      ]
+    }
+  ]
+}
+{% endschema %}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runwell/shopify-toolkit",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Reusable Shopify theme modules from Runwell. Replaces typically app-driven features (reviews, wishlist, urgency, FAQ, post-purchase upsell, exit popups, free-ship progress, sticky ATC, testimonials, badges, bundles) with native Liquid + JS + CSS that ship across multiple client themes via a config-driven sync CLI.",
   "type": "module",
   "main": "lib/index.js",