@runwell/shopify-toolkit 0.6.0 → 0.8.0

package/modules/sticky-atc/sections/runwell-pdp-sticky.liquid

@@ -1,5 +1,5 @@
 {%- comment -%}
-  Lushi sticky add-to-cart for PDP. Slides up from the bottom on scroll
+  Runwell sticky add-to-cart for PDP. Slides up from the bottom on scroll
   past the main buy button, hides again when buy area returns to view.
   Mobile-first; on desktop reveals only after a meaningful scroll depth.
 {%- endcomment -%}
@@ -68,12 +68,12 @@
 
 {% schema %}
 {
-  "name": "Lushi sticky ATC",
+  "name": "Runwell sticky ATC",
   "tag": "section",
   "class": "section-runwell-sticky-atc",
   "settings": [],
   "presets": [
-    { "name": "Lushi sticky ATC" }
+    { "name": "Runwell sticky ATC" }
   ]
 }
 {% endschema %}

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/modules/testimonials/{sections → variants/grid-quotes/sections}/runwell-testimonials.liquid

@@ -1,5 +1,5 @@
 {%- comment -%}
-  Lushi testimonials / UGC strip. Three-up grid of customer quotes with
+  Runwell testimonials / UGC strip. Three-up grid of customer quotes with
   source name + product/lifestyle context. CRO tips 6, 8, 9: social proof
   scattered across the site, unique angles, customer voices.
 {%- endcomment -%}
@@ -44,7 +44,7 @@
 
 {% schema %}
 {
-  "name": "Lushi testimonials",
+  "name": "Runwell testimonials",
   "tag": "section",
   "class": "section-runwell-testimonials",
   "settings": [
@@ -75,7 +75,7 @@
   "max_blocks": 6,
   "presets": [
     {
-      "name": "Lushi testimonials",
+      "name": "Runwell testimonials",
       "blocks": [
         { "type": "quote", "settings": { "quote": "First magnesium I have actually felt working. Read the journal post twice before ordering and now I get why they only carry the glycinate form.", "author": "Margaux, Brooklyn", "context": "Daily Magnesium Glycinate", "rating": "5" } },
         { "type": "quote", "settings": { "quote": "I have tried four collagen brands. This one mixes clean in cold coffee and does not have that fishy aftertaste I gave up trying to mask.", "author": "Priya, Austin", "context": "Marine Collagen Peptides", "rating": "5" } },

package/modules/trust-badges/sections/runwell-trust-badges.liquid

@@ -1,5 +1,5 @@
 {%- comment -%}
-  Lushi trust badges row. Drops on PDP under the buy form (or on cart,
+  Runwell trust badges row. Drops on PDP under the buy form (or on cart,
   collection, or homepage). Renders 3 to 6 trust signals: secure
   checkout, returns, shipping, payment logos. Per Blueprint §3.4 and
   CRO §5.3 (foundational trust signals).
@@ -34,7 +34,7 @@
 
 {% schema %}
 {
-  "name": "Lushi trust badges",
+  "name": "Runwell trust badges",
   "tag": "section",
   "class": "section-runwell-trust-badges",
   "settings": [
@@ -80,11 +80,11 @@
   "max_blocks": 6,
   "presets": [
     {
-      "name": "Lushi trust badges",
+      "name": "Runwell trust badges",
       "blocks": [
         { "type": "badge", "settings": { "icon": "✓", "title": "Free shipping over $75", "body": "On all US orders" } },
         { "type": "badge", "settings": { "icon": "↺", "title": "30-day returns", "body": "No-hassle satisfaction promise" } },
-        { "type": "badge", "settings": { "icon": "★", "title": "Editorially curated", "body": "Every product on Lushi clears 4 checks" } },
+        { "type": "badge", "settings": { "icon": "★", "title": "Editorially curated", "body": "Every product clears 4 checks" } },
         { "type": "badge", "settings": { "icon": "⊕", "title": "Secure checkout", "body": "Encrypted at every step" } }
       ]
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runwell/shopify-toolkit",
-  "version": "0.6.0",
+  "version": "0.8.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",