@runwell/shopify-toolkit 0.1.0

package/modules/recently-viewed/sections/runwell-recently-viewed.liquid

@@ -0,0 +1,38 @@
+{%- comment -%}
+  Lushi recently-viewed products. Reads from localStorage (populated on
+  PDP visits) and renders up to 4 cards. Native replacement for the
+  recently-viewed feature in Vitals / similar apps.
+{%- endcomment -%}
+
+<section
+  class="runwell-rv"
+  data-runwell-recently-viewed
+  style="display: none; background: {{ section.settings.background_color | default: '#FFFFFF' }};">
+  <div class="runwell-rv__inner">
+    {%- if section.settings.eyebrow != blank -%}
+      <p class="runwell-rv__eyebrow">{{ section.settings.eyebrow }}</p>
+    {%- endif -%}
+    {%- if section.settings.heading != blank -%}
+      <h2 class="runwell-rv__heading">{{ section.settings.heading }}</h2>
+    {%- endif -%}
+    <div class="runwell-rv__grid" data-runwell-recently-viewed-grid></div>
+  </div>
+</section>
+
+<script src="{{ 'runwell-recently-viewed.js' | asset_url }}" defer="defer"></script>
+
+{% schema %}
+{
+  "name": "Lushi recently viewed",
+  "tag": "section",
+  "class": "section-runwell-rv",
+  "settings": [
+    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Picking up where you left off" },
+    { "type": "text", "id": "heading", "label": "Heading", "default": "Recently viewed." },
+    { "type": "color", "id": "background_color", "label": "Background", "default": "#FFFFFF" }
+  ],
+  "presets": [
+    { "name": "Lushi recently viewed" }
+  ]
+}
+{% endschema %}

package/modules/reviews/README.md

@@ -0,0 +1,17 @@
+# reviews
+
+Lushi PDP reviews. Migrated from Lushi (`sections/lushi-pdp-reviews.liquid`) into the Runwell Shopify Toolkit.
+
+Category: `social-proof`
+
+## Files
+
+- `sections/runwell-pdp-reviews.liquid`
+
+## Config
+
+See `module.json` config schema. Defaults match the original Lushi defaults; override per client in `runwell.config.json`.
+
+## Lineage
+
+This module was extracted from the Lushi build (Capital V) and generalised. The original lives at `lushi-shopify/sections/lushi-pdp-reviews.liquid`. The toolkit version uses `runwell-` class prefixes and pulls brand vars from the client config.

package/modules/reviews/module.json

@@ -0,0 +1,20 @@
+{
+  "name": "reviews",
+  "version": "0.1.0",
+  "category": "social-proof",
+  "description": "Lushi PDP reviews module migrated from Lushi.",
+  "files": {
+    "sections": [
+      "sections/runwell-pdp-reviews.liquid"
+    ]
+  },
+  "config": {
+    "schema": {
+      "heading": {
+        "type": "string",
+        "default": "What customers wrote in.",
+        "label": "Heading"
+      }
+    }
+  }
+}

package/modules/reviews/sections/runwell-pdp-reviews.liquid

@@ -0,0 +1,93 @@
+{%- comment -%}
+  Lushi native PDP reviews. Replaces Stamped / Loox display layer.
+  Reads from product metafield `lushi.reviews` (json type) where each
+  entry is { name, location, rating, body, date, verified }.
+  Falls back to a "no reviews yet" state with a CTA to email a review.
+{%- endcomment -%}
+
+{%- if product != blank -%}
+  {%- assign reviews_json = product.metafields.lushi.reviews.value -%}
+  <section class="runwell-reviews" data-runwell-reviews>
+    <div class="runwell-reviews__inner">
+      <header class="runwell-reviews__header">
+        <h2 class="runwell-reviews__heading">{{ section.settings.heading | default: 'What customers wrote in.' }}</h2>
+        {%- if reviews_json != blank and reviews_json.size > 0 -%}
+          {%- assign sum = 0 -%}
+          {%- for r in reviews_json -%}
+            {%- assign sum = sum | plus: r.rating -%}
+          {%- endfor -%}
+          {%- assign avg = sum | divided_by: reviews_json.size | times: 1.0 -%}
+          {%- assign avg_int = sum | divided_by: reviews_json.size -%}
+          <div class="runwell-reviews__summary">
+            <span class="runwell-reviews__stars" aria-label="{{ avg_int }} out of 5">
+              {%- for i in (1..5) -%}{%- if i <= avg_int -%}★{%- else -%}☆{%- endif -%}{%- endfor -%}
+            </span>
+            <span class="runwell-reviews__count">{{ reviews_json.size }} review{% if reviews_json.size > 1 %}s{% endif %}</span>
+          </div>
+        {%- endif -%}
+      </header>
+
+      {%- if reviews_json != blank and reviews_json.size > 0 -%}
+        <ul class="runwell-reviews__list">
+          {%- for r in reviews_json -%}
+            <li class="runwell-reviews__item">
+              <div class="runwell-reviews__row">
+                <span class="runwell-reviews__stars" aria-label="{{ r.rating }} out of 5">
+                  {%- for i in (1..5) -%}{%- if i <= r.rating -%}★{%- else -%}☆{%- endif -%}{%- endfor -%}
+                </span>
+                {%- if r.verified -%}<span class="runwell-reviews__verified">Verified buyer</span>{%- endif -%}
+              </div>
+              {%- if r.body -%}<p class="runwell-reviews__body">{{ r.body }}</p>{%- endif -%}
+              <p class="runwell-reviews__meta">
+                <strong>{{ r.name }}</strong>{% if r.location %}, {{ r.location }}{% endif %}{% if r.date %} &middot; {{ r.date }}{% endif %}
+              </p>
+            </li>
+          {%- endfor -%}
+        </ul>
+      {%- else -%}
+        <div class="runwell-reviews__empty">
+          <p>No reviews on this one yet. If you have tried it, write us at <a href="mailto:hello@lushi.co?subject=Review for {{ product.title | escape }}">hello@lushi.co</a> and we will publish thoughtful reviews on the page.</p>
+        </div>
+      {%- endif -%}
+
+      <details class="runwell-reviews__write">
+        <summary>Write a review</summary>
+        {%- form 'contact', class: 'runwell-reviews__form' -%}
+          <input type="hidden" name="contact[product]" value="{{ product.title }}">
+          <input type="hidden" name="contact[product_handle]" value="{{ product.handle }}">
+          <input type="hidden" name="contact[type]" value="review">
+          <label>Your name<input type="text" name="contact[name]" required></label>
+          <label>Email<input type="email" name="contact[email]" required></label>
+          <label>Rating
+            <select name="contact[rating]" required>
+              <option value="5">5 stars</option>
+              <option value="4">4 stars</option>
+              <option value="3">3 stars</option>
+              <option value="2">2 stars</option>
+              <option value="1">1 star</option>
+            </select>
+          </label>
+          <label>Your review<textarea name="contact[body]" rows="4" required></textarea></label>
+          <button type="submit">Submit</button>
+          {%- if form.posted_successfully? -%}
+            <p class="runwell-reviews__success">Thanks. We read every review before publishing.</p>
+          {%- endif -%}
+        {%- endform -%}
+      </details>
+    </div>
+  </section>
+{%- endif -%}
+
+{% schema %}
+{
+  "name": "Lushi PDP reviews",
+  "tag": "section",
+  "class": "section-runwell-pdp-reviews",
+  "settings": [
+    { "type": "text", "id": "heading", "label": "Heading", "default": "What customers wrote in." }
+  ],
+  "presets": [
+    { "name": "Lushi PDP reviews" }
+  ]
+}
+{% endschema %}

package/modules/risk-reversal/README.md

@@ -0,0 +1,17 @@
+# risk-reversal
+
+Lushi risk reversal. Migrated from Lushi (`sections/lushi-risk-reversal.liquid`) into the Runwell Shopify Toolkit.
+
+Category: `conversion`
+
+## Files
+
+- `sections/runwell-risk-reversal.liquid`
+
+## Config
+
+See `module.json` config schema. Defaults match the original Lushi defaults; override per client in `runwell.config.json`.
+
+## Lineage
+
+This module was extracted from the Lushi build (Capital V) and generalised. The original lives at `lushi-shopify/sections/lushi-risk-reversal.liquid`. The toolkit version uses `runwell-` class prefixes and pulls brand vars from the client config.

package/modules/risk-reversal/module.json

@@ -0,0 +1,49 @@
+{
+  "name": "risk-reversal",
+  "version": "0.1.0",
+  "category": "conversion",
+  "description": "Lushi risk reversal module migrated from Lushi.",
+  "files": {
+    "sections": [
+      "sections/runwell-risk-reversal.liquid"
+    ]
+  },
+  "config": {
+    "schema": {
+      "icon": {
+        "type": "string",
+        "default": "↺",
+        "label": "Icon (emoji or single char)"
+      },
+      "heading": {
+        "type": "string",
+        "default": "30-day satisfaction promise.",
+        "label": "Heading"
+      },
+      "body": {
+        "type": "string",
+        "default": "Try it. If it does not earn a place on your counter, write us within 30 days for a full refund. We do not make returns hard.",
+        "label": "Body"
+      },
+      "link_label": {
+        "type": "string",
+        "default": "Read our return policy",
+        "label": "Link label"
+      },
+      "link_url": {
+        "type": "string",
+        "label": "Link URL"
+      },
+      "background_color": {
+        "type": "string",
+        "default": "#EDE6D8",
+        "label": "Background color"
+      },
+      "text_color": {
+        "type": "string",
+        "default": "#0B3D38",
+        "label": "Text color"
+      }
+    }
+  }
+}

package/modules/risk-reversal/sections/runwell-risk-reversal.liquid

@@ -0,0 +1,94 @@
+{%- comment -%}
+  Lushi risk-reversal block. Small, calm reassurance that drops directly
+  under the PDP buy form (or anywhere the editor wants reassurance).
+  Per CRO §5.3 (foundational trust signal under add-to-cart).
+{%- endcomment -%}
+
+<section
+  class="runwell-risk-reversal"
+  style="background: {{ section.settings.background_color }}; color: {{ section.settings.text_color }};"
+>
+  <div style="max-width: 1200px; margin: 0 auto; padding: clamp(1.4rem, 3vw, 2.2rem) 6vw;">
+    <div style="display: flex; align-items: flex-start; gap: 1rem;">
+      {%- if section.settings.icon != blank -%}
+        <div style="flex: 0 0 auto; font-size: 1.6rem; line-height: 1; opacity: 0.7;">
+          {{ section.settings.icon }}
+        </div>
+      {%- endif -%}
+      <div style="flex: 1 1 auto;">
+        {%- if section.settings.heading != blank -%}
+          <h3 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: 1.15rem; line-height: 1.2; margin: 0 0 0.3rem 0;">
+            {{ section.settings.heading }}
+          </h3>
+        {%- endif -%}
+        {%- if section.settings.body != blank -%}
+          <p style="font-family: var(--font-body-family); font-size: 0.92rem; line-height: 1.55; margin: 0; opacity: 0.85;">
+            {{ section.settings.body }}
+          </p>
+        {%- endif -%}
+        {%- if section.settings.link_label != blank -%}
+          <a href="{{ section.settings.link_url | default: '/policies/refund-policy' }}"
+             style="display: inline-block; margin-top: 0.5rem; font-family: var(--font-body-family); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.04em; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--runwell-blue);">
+            {{ section.settings.link_label }} &rarr;
+          </a>
+        {%- endif -%}
+      </div>
+    </div>
+  </div>
+</section>
+
+{% schema %}
+{
+  "name": "Lushi risk reversal",
+  "tag": "section",
+  "class": "section-runwell-risk-reversal",
+  "settings": [
+    {
+      "type": "text",
+      "id": "icon",
+      "label": "Icon (emoji or single char)",
+      "default": "↺"
+    },
+    {
+      "type": "text",
+      "id": "heading",
+      "label": "Heading",
+      "default": "30-day satisfaction promise."
+    },
+    {
+      "type": "textarea",
+      "id": "body",
+      "label": "Body",
+      "default": "Try it. If it does not earn a place on your counter, write us within 30 days for a full refund. We do not make returns hard."
+    },
+    {
+      "type": "text",
+      "id": "link_label",
+      "label": "Link label",
+      "default": "Read our return policy"
+    },
+    {
+      "type": "url",
+      "id": "link_url",
+      "label": "Link URL"
+    },
+    {
+      "type": "color",
+      "id": "background_color",
+      "label": "Background color",
+      "default": "#EDE6D8"
+    },
+    {
+      "type": "color",
+      "id": "text_color",
+      "label": "Text color",
+      "default": "#0B3D38"
+    }
+  ],
+  "presets": [
+    {
+      "name": "Lushi risk reversal"
+    }
+  ]
+}
+{% endschema %}

package/modules/shipping-bar/README.md

@@ -0,0 +1,17 @@
+# shipping-bar
+
+Lushi shipping bar. Migrated from Lushi (`sections/lushi-shipping-bar.liquid`) into the Runwell Shopify Toolkit.
+
+Category: `conversion`
+
+## Files
+
+- `sections/runwell-shipping-bar.liquid`
+
+## Config
+
+See `module.json` config schema. Defaults match the original Lushi defaults; override per client in `runwell.config.json`.
+
+## Lineage
+
+This module was extracted from the Lushi build (Capital V) and generalised. The original lives at `lushi-shopify/sections/lushi-shipping-bar.liquid`. The toolkit version uses `runwell-` class prefixes and pulls brand vars from the client config.

package/modules/shipping-bar/module.json

@@ -0,0 +1,45 @@
+{
+  "name": "shipping-bar",
+  "version": "0.1.0",
+  "category": "conversion",
+  "description": "Lushi shipping bar module migrated from Lushi.",
+  "files": {
+    "sections": [
+      "sections/runwell-shipping-bar.liquid"
+    ]
+  },
+  "config": {
+    "schema": {
+      "threshold_cents": {
+        "type": "number",
+        "default": 7500,
+        "label": "Free shipping threshold (in cents)"
+      },
+      "message_below": {
+        "type": "string",
+        "default": "Add [remaining] more for free shipping.",
+        "label": "Message when below threshold"
+      },
+      "message_qualified": {
+        "type": "string",
+        "default": "You qualified for free shipping. Glow on.",
+        "label": "Message when qualified"
+      },
+      "message_default": {
+        "type": "string",
+        "default": "Free shipping on US orders over $75.",
+        "label": "Default message (no threshold set)"
+      },
+      "background_color": {
+        "type": "string",
+        "default": "#0B3D38",
+        "label": "Background color"
+      },
+      "text_color": {
+        "type": "string",
+        "default": "#EDE6D8",
+        "label": "Text color"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,95 @@
+{%- comment -%}
+  Lushi free-shipping announcement bar. Sits at the very top of every
+  page. Reads cart total and shows a progress message + bar.
+{%- endcomment -%}
+
+{%- liquid
+  assign threshold = section.settings.threshold_cents | times: 1
+  assign current = cart.total_price | times: 1
+  if threshold > 0
+    assign remaining = threshold | minus: current
+    assign progress = current | times: 100.0 | divided_by: threshold
+    if progress > 100
+      assign progress = 100
+    endif
+  endif
+-%}
+
+<aside
+  class="runwell-shipping-bar"
+  data-section-id="{{ section.id }}"
+  style="background: {{ section.settings.background_color }}; color: {{ section.settings.text_color }}; padding: 0.55rem 1.5rem; font-family: var(--font-body-family); font-size: 0.82rem; letter-spacing: 0.04em; text-align: center;"
+>
+  <div style="max-width: 1400px; margin: 0 auto;">
+    {%- if threshold > 0 and remaining > 0 -%}
+      {%- assign remaining_money = remaining | money_without_trailing_zeros -%}
+      <span>
+        {{ section.settings.message_below
+          | replace: '[remaining]', remaining_money }}
+      </span>
+      <div style="margin-top: 0.4rem; height: 2px; background: rgba(255,255,255,0.18); border-radius: 1px; overflow: hidden;">
+        <div style="height: 100%; width: {{ progress | round }}%; background: currentColor; transition: width 0.3s ease;"></div>
+      </div>
+    {%- elsif threshold > 0 -%}
+      <span>{{ section.settings.message_qualified }}</span>
+    {%- else -%}
+      <span>{{ section.settings.message_default }}</span>
+    {%- endif -%}
+  </div>
+</aside>
+
+{% schema %}
+{
+  "name": "Lushi shipping bar",
+  "tag": "aside",
+  "class": "section-runwell-shipping-bar",
+  "enabled_on": {
+    "groups": ["header"]
+  },
+  "settings": [
+    {
+      "type": "number",
+      "id": "threshold_cents",
+      "label": "Free shipping threshold (in cents)",
+      "info": "Set to 7500 for $75. Set to 0 to always show the default message.",
+      "default": 7500
+    },
+    {
+      "type": "text",
+      "id": "message_below",
+      "label": "Message when below threshold",
+      "info": "Use [remaining] as a placeholder for the amount left to qualify.",
+      "default": "Add [remaining] more for free shipping."
+    },
+    {
+      "type": "text",
+      "id": "message_qualified",
+      "label": "Message when qualified",
+      "default": "You qualified for free shipping. Glow on."
+    },
+    {
+      "type": "text",
+      "id": "message_default",
+      "label": "Default message (no threshold set)",
+      "default": "Free shipping on US orders over $75."
+    },
+    {
+      "type": "color",
+      "id": "background_color",
+      "label": "Background color",
+      "default": "#0B3D38"
+    },
+    {
+      "type": "color",
+      "id": "text_color",
+      "label": "Text color",
+      "default": "#EDE6D8"
+    }
+  ],
+  "presets": [
+    {
+      "name": "Lushi shipping bar"
+    }
+  ]
+}
+{% endschema %}

package/modules/sticky-atc/README.md

@@ -0,0 +1,17 @@
+# sticky-atc
+
+Lushi sticky ATC. Migrated from Lushi (`sections/lushi-pdp-sticky.liquid`) into the Runwell Shopify Toolkit.
+
+Category: `conversion`
+
+## Files
+
+- `sections/runwell-pdp-sticky.liquid`
+
+## Config
+
+See `module.json` config schema. Defaults match the original Lushi defaults; override per client in `runwell.config.json`.
+
+## Lineage
+
+This module was extracted from the Lushi build (Capital V) and generalised. The original lives at `lushi-shopify/sections/lushi-pdp-sticky.liquid`. The toolkit version uses `runwell-` class prefixes and pulls brand vars from the client config.

package/modules/sticky-atc/module.json

@@ -0,0 +1,14 @@
+{
+  "name": "sticky-atc",
+  "version": "0.1.0",
+  "category": "conversion",
+  "description": "Lushi sticky ATC module migrated from Lushi.",
+  "files": {
+    "sections": [
+      "sections/runwell-pdp-sticky.liquid"
+    ]
+  },
+  "config": {
+    "schema": {}
+  }
+}

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

@@ -0,0 +1,78 @@
+{%- comment -%}
+  Lushi 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 -%}
+
+{%- if template == 'product' and product != blank -%}
+<div class="runwell-sticky-atc" data-runwell-sticky aria-hidden="true">
+  <div class="runwell-sticky-atc__inner">
+    <div class="runwell-sticky-atc__product">
+      {%- if product.featured_image -%}
+        <img
+          src="{{ product.featured_image | image_url: width: 80 }}"
+          alt="{{ product.title | escape }}"
+          width="40"
+          height="40"
+          loading="lazy"
+          class="runwell-sticky-atc__thumb">
+      {%- endif -%}
+      <div class="runwell-sticky-atc__meta">
+        <span class="runwell-sticky-atc__title">{{ product.title }}</span>
+        <span class="runwell-sticky-atc__price">{{ product.price | money }}</span>
+      </div>
+    </div>
+    <form
+      action="{{ routes.cart_add_url }}"
+      method="post"
+      enctype="multipart/form-data"
+      class="runwell-sticky-atc__form">
+      <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
+      <input type="hidden" name="quantity" value="1">
+      <button
+        type="submit"
+        class="runwell-sticky-atc__cta"
+        {% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}>
+        {%- if product.selected_or_first_available_variant.available -%}
+          Add to cart
+        {%- else -%}
+          Sold out
+        {%- endif -%}
+      </button>
+    </form>
+  </div>
+</div>
+
+<script>
+  (function () {
+    var bar = document.querySelector('[data-runwell-sticky]');
+    if (!bar) return;
+    var trigger = document.querySelector('product-form, .product-form, [name="add"]') ||
+                  document.querySelector('.product__info-container');
+    if (!trigger) return;
+
+    var observer = new IntersectionObserver(function (entries) {
+      entries.forEach(function (e) {
+        if (e.isIntersecting) {
+          bar.setAttribute('aria-hidden', 'true');
+        } else if (e.boundingClientRect.top < 0) {
+          bar.setAttribute('aria-hidden', 'false');
+        }
+      });
+    }, { threshold: 0 });
+    observer.observe(trigger);
+  })();
+</script>
+{%- endif -%}
+
+{% schema %}
+{
+  "name": "Lushi sticky ATC",
+  "tag": "section",
+  "class": "section-runwell-sticky-atc",
+  "settings": [],
+  "presets": [
+    { "name": "Lushi sticky ATC" }
+  ]
+}
+{% endschema %}

package/modules/testimonials/README.md

@@ -0,0 +1,17 @@
+# testimonials
+
+Lushi testimonials. Migrated from Lushi (`sections/lushi-testimonials.liquid`) into the Runwell Shopify Toolkit.
+
+Category: `social-proof`
+
+## Files
+
+- `sections/runwell-testimonials.liquid`
+
+## Config
+
+See `module.json` config schema. Defaults match the original Lushi defaults; override per client in `runwell.config.json`.
+
+## Lineage
+
+This module was extracted from the Lushi build (Capital V) and generalised. The original lives at `lushi-shopify/sections/lushi-testimonials.liquid`. The toolkit version uses `runwell-` class prefixes and pulls brand vars from the client config.

package/modules/testimonials/module.json

@@ -0,0 +1,35 @@
+{
+  "name": "testimonials",
+  "version": "0.1.0",
+  "category": "social-proof",
+  "description": "Lushi testimonials module migrated from Lushi.",
+  "files": {
+    "sections": [
+      "sections/runwell-testimonials.liquid"
+    ]
+  },
+  "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"
+      },
+      "text_color": {
+        "type": "string",
+        "default": "#0B3D38",
+        "label": "Text"
+      }
+    }
+  }
+}