@runwell/shopify-toolkit 0.1.0 → 0.3.0

package/modules/_shared/css-tokens/assets/runwell-tokens.css

@@ -0,0 +1,14 @@
+/* Runwell Shopify Toolkit: brand tokens.
+   Generated from runwell.config.json brand vars. Every other module
+   references these via var(--runwell-X). Do not hand-edit in client
+   themes; re-run runwell-shopify sync to update.
+*/
+:root {
+  --runwell-primary: {{brand.primary}};
+  --runwell-accent: {{brand.accent}};
+  --runwell-cream: {{brand.cream}};
+  --runwell-oat: {{brand.oat}};
+  --runwell-celadon: {{brand.celadon}};
+  --runwell-blue: {{brand.blue}};
+  --runwell-rain-forrest: {{brand.rain-forrest}};
+}

package/modules/_shared/css-tokens/module.json

@@ -0,0 +1,13 @@
+{
+  "name": "_shared/css-tokens",
+  "version": "0.1.0",
+  "category": "foundation",
+  "description": "CSS custom properties published as :root vars so every Runwell module pulls brand colors from one source. Always synced.",
+  "always_enabled": true,
+  "files": {
+    "assets": ["assets/runwell-tokens.css"]
+  },
+  "config": {
+    "schema": {}
+  }
+}

package/modules/bundle-builder/README.md

@@ -0,0 +1,40 @@
+# bundle-builder
+
+PDP section for build-your-own-bundle merchandising. Slideshow gallery + thumbnail nav + radio bundle picker (1x / 2x / 3x with savings, free-ship and free-gift badges) + sticky ATC + FOMO countdown + scarcity. Migrated from Lusha's bundle-selector.
+
+## Files
+
+- `sections/runwell-bundle-builder.liquid`. Section template (392 lines).
+- `assets/runwell-bundle-builder.css`. ~370 lines of styling, brand-aware via `var(--runwell-*)`.
+
+## Behaviour
+
+- **Gallery**: configurable via section blocks of type `gallery_image`. If no images set, falls back to the product's featured image, then to a brand-coloured placeholder.
+- **Thumbnails**: clickable navigation between gallery images.
+- **Bundle options**: configurable via section blocks of type `bundle_option`. Each one shows: title, price, compare-at price, savings badge, free-ship badge, "MOST POPULAR" highlight, free-gift text.
+- **FOMO mode**: `discount` (countdown to sale end), `scarcity` (low-stock count), `both`, or `none`. The deadline rotates on a configurable cycle so it never expires for a returning visitor.
+- **Trust badges**: 3 configurable promise lines below the ATC.
+- **ATC**: posts to `/cart/add.js` with quantity parsed from the title (`"3x Product"` adds qty 3).
+
+## How to use
+
+1. Sync: `runwell-shopify sync`
+2. In any product template (or a custom landing page), add the section "Runwell Bundle Builder"
+3. Inside the section, add `gallery_image` blocks for product photography
+4. Add `bundle_option` blocks for each bundle tier (typically 3 with the middle marked "popular")
+5. Configure FOMO mode if desired
+6. Style further via the brand's `--runwell-*` CSS custom properties
+
+## Lineage
+
+Migrated from `guabrasha-store/sections/bundle-selector.liquid` (Lusha gua sha brand). Class prefix renamed from `bundle-selector` to `runwell-bundle-builder`. Lusha-specific hardcoded gallery filenames replaced with a placeholder pattern. Lusha-specific copy ("Lusha Sculpting Brush", "Spring Sculpting Sale") replaced with generic defaults that the merchant overrides via section settings.
+
+## Replaces
+
+Bundle Builder, BYOB Bundles by Pickystory, Bundler. The toolkit version is display + ATC only; if you need true bundle-as-SKU pricing the merchant should pair this with a Shopify Functions discount.
+
+## Future variants
+
+- `step-by-step` (single-product, multi-step BYOB walkthrough)
+- `mix-and-match` (any 3 from a curated set)
+- `subscription-bundle` (bundle with subscription price option)

package/modules/bundle-builder/assets/runwell-bundle-builder.css

@@ -0,0 +1,383 @@
+.runwell-bundle-builder__grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2.4rem;
+  align-items: start;
+}
+
+/* Slideshow Gallery */
+.runwell-bundle-builder__slideshow {
+  position: relative;
+  border-radius: 12px;
+  overflow: hidden;
+  background: #E8D5C4;
+}
+
+.runwell-bundle-builder__slide {
+  display: none;
+}
+
+.runwell-bundle-builder__slide--active {
+  display: block;
+}
+
+.runwell-bundle-builder__img {
+  width: 100%;
+  height: auto;
+  display: block;
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
+  max-height: calc(100vh - 260px);
+}
+
+/* Thumbnail Strip - ALWAYS visible including mobile */
+.runwell-bundle-builder__thumbnails {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #EADFD4 transparent;
+  padding-bottom: 4px;
+  -webkit-overflow-scrolling: touch;
+}
+
+.runwell-bundle-builder__thumbnails::-webkit-scrollbar {
+  height: 4px;
+}
+
+.runwell-bundle-builder__thumbnails::-webkit-scrollbar-thumb {
+  background: #EADFD4;
+  border-radius: 2px;
+}
+
+.runwell-bundle-builder__thumb {
+  flex: 0 0 72px;
+  height: 72px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 2px solid transparent;
+  cursor: pointer;
+  padding: 0;
+  background: #E8D5C4;
+  transition: border-color 0.2s, opacity 0.2s;
+  opacity: 0.7;
+}
+
+.runwell-bundle-builder__thumb--active {
+  border-color: #3F5B4C;
+  opacity: 1;
+}
+
+.runwell-bundle-builder__thumb:hover {
+  opacity: 1;
+}
+
+.runwell-bundle-builder__thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Rating */
+.runwell-bundle-builder__rating {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 0;
+}
+
+.runwell-bundle-builder__stars {
+  color: #E8B931;
+  font-size: 1.6rem;
+  letter-spacing: 1px;
+}
+
+.runwell-bundle-builder__rating-text {
+  font-size: 1.4rem;
+  font-weight: 600;
+  font-style: italic;
+}
+
+/* Title */
+.runwell-bundle-builder__title {
+  margin-top: 0.4rem;
+  margin-bottom: 1rem;
+}
+
+/* Sale heading */
+.runwell-bundle-builder__sale-heading {
+  display: flex;
+  align-items: center;
+  gap: 1.2rem;
+  margin-bottom: 1.2rem;
+}
+
+.runwell-bundle-builder__sale-line {
+  flex: 1;
+  height: 1px;
+  background: #2A2622;
+}
+
+.runwell-bundle-builder__sale-text {
+  font-weight: 700;
+  font-size: 1.5rem;
+  white-space: nowrap;
+}
+
+/* Scarcity indicator */
+.runwell-bundle-builder__scarcity {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font-size: 1.3rem;
+  font-weight: 500;
+  color: #b45309;
+  margin-bottom: 1rem;
+}
+
+.runwell-bundle-builder__scarcity-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #b45309;
+  animation: scarcity-pulse 2s ease-in-out infinite;
+}
+
+@keyframes scarcity-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+/* Options */
+.runwell-bundle-builder__options {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 1.2rem;
+}
+
+.runwell-bundle-builder__option {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 18px;
+  border: 2px solid #EADFD4;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  position: relative;
+}
+
+.runwell-bundle-builder__option:hover {
+  border-color: #3F5B4C;
+}
+
+.runwell-bundle-builder__option--selected {
+  border-color: #2A2622;
+  box-shadow: 0 0 0 1px #2A2622;
+}
+
+.runwell-bundle-builder__option--popular {
+  border-color: #3F5B4C;
+  position: relative;
+}
+
+.runwell-bundle-builder__popular-badge {
+  position: absolute;
+  top: -10px;
+  right: 16px;
+  background: #3F5B4C;
+  color: #fff;
+  font-size: 1.0rem;
+  font-weight: 700;
+  padding: 2px 10px;
+  border-radius: 4px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.runwell-bundle-builder__option input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.runwell-bundle-builder__option-radio {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  border: 2px solid #EADFD4;
+  flex-shrink: 0;
+  margin-top: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 0.2s;
+}
+
+.runwell-bundle-builder__option--selected .runwell-bundle-builder__option-radio {
+  border-color: #2A2622;
+}
+
+.runwell-bundle-builder__option--selected .runwell-bundle-builder__option-radio::after {
+  content: '';
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #2A2622;
+}
+
+.runwell-bundle-builder__option-content {
+  flex: 1;
+}
+
+.runwell-bundle-builder__option-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 12px;
+}
+
+.runwell-bundle-builder__option-title {
+  font-weight: 700;
+  font-size: 1.5rem;
+}
+
+.runwell-bundle-builder__option-pricing {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.runwell-bundle-builder__option-price {
+  font-weight: 700;
+  font-size: 1.8rem;
+}
+
+.runwell-bundle-builder__option-compare {
+  font-size: 1.3rem;
+  text-decoration: line-through;
+  opacity: 0.5;
+}
+
+.runwell-bundle-builder__option-badges {
+  display: flex;
+  gap: 6px;
+  margin-top: 6px;
+  flex-wrap: wrap;
+}
+
+.runwell-bundle-builder__badge {
+  font-size: 1.1rem;
+  font-weight: 700;
+  padding: 2px 8px;
+  border-radius: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.runwell-bundle-builder__badge--save {
+  background: #3F5B4C;
+  color: #fff;
+}
+
+.runwell-bundle-builder__badge--shipping {
+  color: #3F5B4C;
+  font-weight: 600;
+}
+
+.runwell-bundle-builder__free-gift {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 8px;
+  padding: 8px 12px;
+  background: rgba(63, 91, 76, 0.06);
+  border-radius: 6px;
+  font-size: 1.3rem;
+  font-weight: 600;
+}
+
+.runwell-bundle-builder__gift-icon {
+  font-size: 1.6rem;
+}
+
+/* ATC Button */
+.runwell-bundle-builder__atc {
+  width: 100%;
+  padding: 1.6rem;
+  font-size: 1.6rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  background: #2A2622;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.2s;
+  margin-bottom: 1.2rem;
+}
+
+.runwell-bundle-builder__atc:hover {
+  background: #3F5B4C;
+}
+
+/* Trust badges */
+.runwell-bundle-builder__trust {
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
+  font-size: 1.3rem;
+  opacity: 0.7;
+  flex-wrap: wrap;
+}
+
+/* Sticky ATC on mobile */
+@media screen and (max-width: 989px) {
+  .runwell-bundle-builder__grid {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+
+  .runwell-bundle-builder__atc-wrap {
+    position: sticky;
+    bottom: 0;
+    z-index: 10;
+    background: #fff;
+    padding: 12px 0 max(12px, env(safe-area-inset-bottom));
+    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
+    margin: 0 -1.5rem;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+}
+
+@media screen and (max-width: 749px) {
+  .runwell-bundle-builder__option-header {
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .runwell-bundle-builder__trust {
+    flex-direction: column;
+    align-items: center;
+    gap: 0.6rem;
+  }
+}
+
+/* Runwell additions: placeholder states when gallery is empty */
+.runwell-bundle-builder__img--placeholder,
+.runwell-bundle-builder__thumb-img--placeholder {
+  width: 100%;
+  height: 100%;
+  min-height: 320px;
+  background: linear-gradient(135deg, var(--runwell-oat, #F5F0EE), var(--runwell-cream, #EDE6D8));
+  display: block;
+}
+.runwell-bundle-builder__thumb-img--placeholder {
+  min-height: 0;
+}

package/modules/bundle-builder/module.json

@@ -0,0 +1,26 @@
+{
+  "name": "bundle-builder",
+  "version": "0.1.0",
+  "category": "catalog",
+  "description": "Build-your-own-bundle PDP section. Slideshow gallery + thumbnail nav + radio bundle picker (1x / 2x / 3x with savings, free-ship and free-gift badges) + sticky ATC + FOMO countdown + scarcity. Migrated from Lusha (guabrasha-store/sections/bundle-selector.liquid). Replaces BYOB-style bundle apps.",
+  "files": {
+    "sections": ["sections/runwell-bundle-builder.liquid"],
+    "assets": ["assets/runwell-bundle-builder.css"]
+  },
+  "config": {
+    "schema": {
+      "heading": { "type": "string", "default": "Build your bundle" },
+      "sale_prefix": { "type": "string", "default": "Limited time offer" },
+      "show_rating": { "type": "boolean", "default": true },
+      "rating_score": { "type": "string", "default": "4.8/5" },
+      "rating_count": { "type": "string", "default": "2,400+" },
+      "show_trust_badges": { "type": "boolean", "default": true },
+      "trust_1": { "type": "string", "default": "90-Day Guarantee" },
+      "trust_2": { "type": "string", "default": "Easy Returns" },
+      "trust_3": { "type": "string", "default": "Free Shipping" },
+      "fomo_mode": { "type": "string", "default": "both", "enum": ["discount", "scarcity", "both", "none"] },
+      "fomo_cycle_days": { "type": "number", "default": 30 },
+      "fomo_stock_count": { "type": "number", "default": 47 }
+    }
+  }
+}