added on local at 2026-07-01 13:48:11
| 1 | <style> | |
| 2 | /* Tour page chrome -- gives each section a real "screenshot" feel. | |
| 3 | Frame wraps mocked UI in a fake browser chrome so the visual reads | |
| 4 | as "here is the actual product", not "here is a card". */ | |
| 5 | .tour-section { max-width:1240px; margin:0 auto; padding:60px 32px; } | |
| 6 | .tour-section + .tour-section { border-top:1px solid var(--col-border); } | |
| 7 | .tour-grid { display:grid; grid-template-columns: 1fr 1.3fr; gap:48px; align-items:center; } | |
| 8 | @media (max-width: 900px) { .tour-grid { grid-template-columns: 1fr; gap:32px; } } | |
| 9 | .tour-grid.reverse { grid-template-columns: 1.3fr 1fr; } | |
| 10 | @media (max-width: 900px) { .tour-grid.reverse { grid-template-columns: 1fr; } } | |
| 11 | .tour-step { font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:#60a5fa; margin-bottom:10px; } | |
| 12 | .tour-title { font-family: var(--font-display); font-size:32px; line-height:1.15; color:#fff; margin:0 0 14px; } | |
| 13 | .tour-lead { font-size:15px; line-height:1.7; color:var(--col-text-2); margin:0 0 18px; } | |
| 14 | .tour-lead strong { color:#fff; } | |
| 15 | .tour-bullets { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; } | |
| 16 | .tour-bullets li { display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--col-text-2); line-height:1.55; } | |
| 17 | .tour-bullets svg { width:18px; height:18px; flex-shrink:0; color:#4ade80; margin-top:2px; } | |
| 18 | /* Fake browser frame */ | |
| 19 | .tour-frame { | |
| 20 | background: linear-gradient(180deg, #0d1224 0%, #0a0e1c 100%); | |
| 21 | border:1px solid var(--col-border); | |
| 22 | border-radius:14px; | |
| 23 | overflow:hidden; | |
| 24 | box-shadow: 0 18px 50px rgba(0,0,0,0.45); | |
| 25 | } | |
| 26 | .tour-frame-bar { | |
| 27 | background: var(--col-surface-2); | |
| 28 | padding:10px 14px; | |
| 29 | border-bottom:1px solid var(--col-border); | |
| 30 | display:flex; align-items:center; gap:8px; | |
| 31 | } | |
| 32 | .tour-frame-dot { width:11px; height:11px; border-radius:50%; } | |
| 33 | .tour-frame-url { | |
| 34 | background: rgba(0,0,0,0.35); | |
| 35 | border-radius:6px; | |
| 36 | padding:4px 12px; | |
| 37 | font-size:11px; | |
| 38 | color: var(--col-text-3); | |
| 39 | font-family: var(--font-mono); | |
| 40 | flex:1; | |
| 41 | margin-left:10px; | |
| 42 | max-width:360px; | |
| 43 | } | |
| 44 | .tour-frame-body { padding:22px; } | |
| 45 | /* Section eyebrow above a wide content block (when not in the | |
| 46 | 2-column grid pattern). */ | |
| 47 | .tour-band { | |
| 48 | max-width:1240px; margin:0 auto; padding:60px 32px; | |
| 49 | border-top:1px solid var(--col-border); | |
| 50 | } | |
| 51 | .tour-band-eyebrow { | |
| 52 | font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:#60a5fa; margin-bottom:10px; | |
| 53 | } | |
| 54 | .tour-band-title { | |
| 55 | font-family:var(--font-display); font-size:30px; line-height:1.2; color:#fff; margin:0 0 12px; max-width:760px; | |
| 56 | } | |
| 57 | .tour-band-sub { | |
| 58 | font-size:15px; line-height:1.7; color:var(--col-text-2); max-width:780px; margin:0 0 26px; | |
| 59 | } | |
| 60 | /* Marketplace tile grid */ | |
| 61 | .mp-grid { | |
| 62 | display:grid; | |
| 63 | grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); | |
| 64 | gap:12px; | |
| 65 | } | |
| 66 | .mp-tile { | |
| 67 | background: var(--col-surface-1); | |
| 68 | border:1px solid var(--col-border); | |
| 69 | border-radius:12px; | |
| 70 | padding:14px 16px; | |
| 71 | display:flex; | |
| 72 | flex-direction:column; | |
| 73 | gap:6px; | |
| 74 | min-height:130px; | |
| 75 | } | |
| 76 | .mp-tile .mp-row { display:flex; align-items:center; gap:10px; } | |
| 77 | .mp-tile .mp-icon { | |
| 78 | width:36px; height:36px; border-radius:9px; | |
| 79 | background: linear-gradient(135deg, rgba(59,130,246,0.20), rgba(124,58,237,0.20)); | |
| 80 | border:1px solid rgba(99,102,241,0.40); | |
| 81 | display:grid; place-items:center; | |
| 82 | color:#c4b5fd; font-weight:800; font-size:14px; letter-spacing:0.5px; | |
| 83 | flex-shrink:0; | |
| 84 | } | |
| 85 | .mp-tile .mp-name { color:#fff; font-weight:700; font-size:14px; } | |
| 86 | .mp-tile .mp-tagline { color:var(--col-text-3); font-size:11.5px; line-height:1.5; margin-top:4px; } | |
| 87 | .mp-tile .mp-meta { display:flex; gap:6px; flex-wrap:wrap; margin-top:auto; padding-top:6px; } | |
| 88 | .mp-tile .mp-meta .pill { font-size:9px; font-weight:700; padding:2px 6px; border-radius:5px; letter-spacing:0.8px; text-transform:uppercase; } | |
| 89 | .mp-tile .mp-meta .digital { background: rgba(59,130,246,0.18); color:#93c5fd; } | |
| 90 | .mp-tile .mp-meta .physical { background: rgba(34,197,94,0.18); color:#86efac; } | |
| 91 | .mp-tile .mp-meta .fee { background: rgba(245,158,11,0.12); color:#fbbf24; } | |
| 92 | /* Sub-feature card list */ | |
| 93 | .tour-cards { | |
| 94 | display:grid; | |
| 95 | grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); | |
| 96 | gap:14px; | |
| 97 | } | |
| 98 | .tour-feat { | |
| 99 | background: var(--col-surface-1); | |
| 100 | border:1px solid var(--col-border); | |
| 101 | border-radius:12px; | |
| 102 | padding:18px 20px; | |
| 103 | } | |
| 104 | .tour-feat h4 { font-family:var(--font-display); font-size:16px; color:#fff; margin:0 0 8px; } | |
| 105 | .tour-feat p { font-size:13px; color:var(--col-text-2); line-height:1.6; margin:0; } | |
| 106 | .tour-feat .ico { | |
| 107 | width:36px; height:36px; border-radius:9px; display:grid; place-items:center; | |
| 108 | margin-bottom:12px; | |
| 109 | } | |
| 110 | </style> | |
| 111 | ||
| 112 | <header class="landing-nav"> | |
| 113 | <div class="landing-nav-inner"> | |
| 114 | <a href="index.cgi" class="flex items-center gap-3" style="text-decoration:none"> | |
| 115 | <div class="brand-mark"><span>AS</span></div> | |
| 116 | <div class="brand-text"><span class="brand-name">AffSoft</span><span class="brand-sub">Affiliate platform</span></div> | |
| 117 | </a> | |
| 118 | <nav class="links"> | |
| 119 | <a href="features.cgi">Features</a> | |
| 120 | <a href="tour.cgi" class="text-brand">Tour</a> | |
| 121 | <a href="why.cgi">Why AffSoft</a> | |
| 122 | <a href="pricing.cgi">Pricing</a> | |
| 123 | <a href="faq.cgi">FAQ</a> | |
| 124 | <a href="about.cgi">About</a> | |
| 125 | </nav> | |
| 126 | <div class="auth-actions"> | |
| 127 | <a href="login.cgi" class="btn btn-ghost btn-sm">Sign in</a> | |
| 128 | <a href="signup.cgi" class="btn btn-primary btn-sm">Start free trial</a> | |
| 129 | </div> | |
| 130 | </div> | |
| 131 | </header> | |
| 132 | ||
| 133 | <!-- ===== Hero ===== --> | |
| 134 | <section class="hero" style="padding-bottom:30px"> | |
| 135 | <div class="hero-grid-bg"></div> | |
| 136 | <div class="hero-glow-1"></div> | |
| 137 | <div class="hero-glow-2"></div> | |
| 138 | <div class="hero-inner" style="grid-template-columns:1fr;text-align:center"> | |
| 139 | <div> | |
| 140 | <span class="hero-pill"><span class="dot"></span> The 15-minute deep tour</span> | |
| 141 | <h1 class="hero-title">The complete walkthrough of <span class="grad">WebSTLs.</span></h1> | |
| 142 | <p class="hero-sub" style="max-width:720px;margin:18px auto 0"> | |
| 143 | Every screen, every feature, every marketplace. This is what your business runs on once you sign up — | |
| 144 | from upload to publish to A/B test to refund-as-credit, end to end. Grab a coffee. | |
| 145 | </p> | |
| 146 | </div> | |
| 147 | </div> | |
| 148 | </section> | |
| 149 | ||
| 150 | <!-- =================================================================== | |
| 151 | 1. OVERVIEW DASHBOARD | |
| 152 | ================================================================== --> | |
| 153 | <section class="tour-section"> | |
| 154 | <div class="tour-grid"> | |
| 155 | <div> | |
| 156 | <div class="tour-step">Step 1 · The Overview</div> | |
| 157 | <h2 class="tour-title">Your whole business on one screen.</h2> | |
| 158 | <p class="tour-lead">Open WebSTLs and the first thing you see is <strong>four big tiles</strong> that summarize how the business is doing: Revenue MTD vs same-day-last-month, Active models, Customers, and storefront Conversion %. Below them: 14-day revenue chart by channel, recent orders, cross-platform inbox preview, system health, and onboarding progress.</p> | |
| 159 | <ul class="tour-bullets"> | |
| 160 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Every tile is clickable for the methodology behind the number — no black-box stats</li> | |
| 161 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Hide modules you don't use from Settings → Available Features — the page rebuilds without them</li> | |
| 162 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> “Sample Data View” button up top fills the page with example data so you can see what it looks like before you have your own</li> | |
| 163 | </ul> | |
| 164 | </div> | |
| 165 | <div class="tour-frame"> | |
| 166 | <div class="tour-frame-bar"> | |
| 167 | <span class="tour-frame-dot" style="background:#ef4444"></span> | |
| 168 | <span class="tour-frame-dot" style="background:#fbbf24"></span> | |
| 169 | <span class="tour-frame-dot" style="background:#22c55e"></span> | |
| 170 | <span class="tour-frame-url">affiliate.3dshawn.com/dashboard.cgi</span> | |
| 171 | </div> | |
| 172 | <div class="tour-frame-body"> | |
| 173 | <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px"> | |
| 174 | <div class="card" style="padding:14px"><div class="text-xs text-dim" style="letter-spacing:1.5px;text-transform:uppercase">Revenue MTD</div><div style="font-family:var(--font-display);font-size:22px;font-weight:700;color:#fff;margin-top:4px">\$8,142.60</div><div class="text-xs" style="color:#4ade80;margin-top:4px">▲ 18.4%</div></div> | |
| 175 | <div class="card" style="padding:14px"><div class="text-xs text-dim" style="letter-spacing:1.5px;text-transform:uppercase">Active models</div><div style="font-family:var(--font-display);font-size:22px;font-weight:700;color:#fff;margin-top:4px">47</div><div class="text-xs" style="color:#4ade80;margin-top:4px">▲ 6 this week</div></div> | |
| 176 | <div class="card" style="padding:14px"><div class="text-xs text-dim" style="letter-spacing:1.5px;text-transform:uppercase">Customers</div><div style="font-family:var(--font-display);font-size:22px;font-weight:700;color:#fff;margin-top:4px">2,418</div><div class="text-xs" style="color:#4ade80;margin-top:4px">▲ 124 new (30d)</div></div> | |
| 177 | <div class="card" style="padding:14px"><div class="text-xs text-dim" style="letter-spacing:1.5px;text-transform:uppercase">Conversion</div><div style="font-family:var(--font-display);font-size:22px;font-weight:700;color:#fff;margin-top:4px">5.42%</div><div class="text-xs" style="color:#fbbf24;margin-top:4px">▼ 0.21% vs prior</div></div> | |
| 178 | </div> | |
| 179 | </div> | |
| 180 | </div> | |
| 181 | </div> | |
| 182 | </section> | |
| 183 | ||
| 184 | <!-- =================================================================== | |
| 185 | 2. MARKETPLACES -- THE FULL CONNECTABLE LIST | |
| 186 | ================================================================== --> | |
| 187 | <section class="tour-band"> | |
| 188 | <div class="tour-band-eyebrow">Step 2 · Cross-platform publishing</div> | |
| 189 | <h2 class="tour-band-title">16 marketplaces, plus your own storefront. One upload covers all of them.</h2> | |
| 190 | <p class="tour-band-sub"> | |
| 191 | Every channel below is a one-click connect from <code>/marketplaces.cgi</code>. After you connect, every model you | |
| 192 | upload can be pushed to that platform with a single button — same title, price, images, files. When you edit later, | |
| 193 | one save updates every connected platform. | |
| 194 | </p> | |
| 195 | ||
| 196 | <div class="mp-grid"> | |
| 197 | <div class="mp-tile"> | |
| 198 | <div class="mp-row"><div class="mp-icon">C</div><div class="mp-name">Cults3D</div></div> | |
| 199 | <div class="mp-tagline">Large 3D-printable marketplace. France-based, global reach.</div> | |
| 200 | <div class="mp-meta"><span class="pill digital">Digital</span><span class="pill fee">~15%</span></div> | |
| 201 | </div> | |
| 202 | <div class="mp-tile"> | |
| 203 | <div class="mp-row"><div class="mp-icon">M</div><div class="mp-name">MyMiniFactory</div></div> | |
| 204 | <div class="mp-tagline">Where the tabletop miniature community lives.</div> | |
| 205 | <div class="mp-meta"><span class="pill digital">Digital</span><span class="pill fee">~8%</span></div> | |
| 206 | </div> | |
| 207 | <div class="mp-tile"> | |
| 208 | <div class="mp-row"><div class="mp-icon">P</div><div class="mp-name">Patreon</div></div> | |
| 209 | <div class="mp-tagline">Membership tiers — subscription, not single sales.</div> | |
| 210 | <div class="mp-meta"><span class="pill digital">Digital</span><span class="pill fee">8-12%</span></div> | |
| 211 | </div> | |
| 212 | <div class="mp-tile"> | |
| 213 | <div class="mp-row"><div class="mp-icon">G</div><div class="mp-name">Gumroad</div></div> | |
| 214 | <div class="mp-tagline">Simplest digital storefront. Easiest API integration.</div> | |
| 215 | <div class="mp-meta"><span class="pill digital">Digital</span><span class="pill fee">10%</span></div> | |
| 216 | </div> | |
| 217 | <div class="mp-tile"> | |
| 218 | <div class="mp-row"><div class="mp-icon">Pa</div><div class="mp-name">Payhip</div></div> | |
| 219 | <div class="mp-tagline">Digital storefront with no monthly fees. Indie-friendly.</div> | |
| 220 | <div class="mp-meta"><span class="pill digital">Digital</span><span class="pill fee">0-5%</span></div> | |
| 221 | </div> | |
| 222 | <div class="mp-tile"> | |
| 223 | <div class="mp-row"><div class="mp-icon">K</div><div class="mp-name">Ko-fi</div></div> | |
| 224 | <div class="mp-tagline">Tips + small digital storefront for creators.</div> | |
| 225 | <div class="mp-meta"><span class="pill digital">Digital</span><span class="pill fee">0-5%</span></div> | |
| 226 | </div> | |
| 227 | <div class="mp-tile"> | |
| 228 | <div class="mp-row"><div class="mp-icon">Mw</div><div class="mp-name">MakerWorld</div></div> | |
| 229 | <div class="mp-tagline">Bambu Lab's STL marketplace. Tight Bambu printer integration.</div> | |
| 230 | <div class="mp-meta"><span class="pill digital">Digital</span><span class="pill fee">0% + Boost</span></div> | |
| 231 | </div> | |
| 232 | <div class="mp-tile"> | |
| 233 | <div class="mp-row"><div class="mp-icon">P</div><div class="mp-name">Printables</div></div> | |
| 234 | <div class="mp-tagline">Prusa-run community. Strong free-share, growing paid section.</div> | |
| 235 | <div class="mp-meta"><span class="pill digital">Digital</span><span class="pill fee">0%</span></div> | |
| 236 | </div> | |
| 237 | <div class="mp-tile"> | |
| 238 | <div class="mp-row"><div class="mp-icon">T</div><div class="mp-name">Thingiverse</div></div> | |
| 239 | <div class="mp-tagline">MakerBot-run. Mostly free, community-shared.</div> | |
| 240 | <div class="mp-meta"><span class="pill digital">Digital</span><span class="pill fee">n/a</span></div> | |
| 241 | </div> | |
| 242 | <div class="mp-tile"> | |
| 243 | <div class="mp-row"><div class="mp-icon">Tg</div><div class="mp-name">Thangs</div></div> | |
| 244 | <div class="mp-tagline">Search-first 3D marketplace, strong creator memberships.</div> | |
| 245 | <div class="mp-meta"><span class="pill digital">Digital</span><span class="pill fee">0-12%</span></div> | |
| 246 | </div> | |
| 247 | <div class="mp-tile"> | |
| 248 | <div class="mp-row"><div class="mp-icon">X</div><div class="mp-name">CGTrader</div></div> | |
| 249 | <div class="mp-tagline">Pro 3D models — game/film/render assets + some printables.</div> | |
| 250 | <div class="mp-meta"><span class="pill digital">Digital</span><span class="pill fee">~30%</span></div> | |
| 251 | </div> | |
| 252 | <div class="mp-tile"> | |
| 253 | <div class="mp-row"><div class="mp-icon">E</div><div class="mp-name">Etsy</div></div> | |
| 254 | <div class="mp-tagline">Huge marketplace — digital STL downloads OR physical handmade.</div> | |
| 255 | <div class="mp-meta"><span class="pill digital">Digital</span><span class="pill physical">Physical</span><span class="pill fee">~6.5%</span></div> | |
| 256 | </div> | |
| 257 | <div class="mp-tile"> | |
| 258 | <div class="mp-row"><div class="mp-icon">A</div><div class="mp-name">Amazon Handmade</div></div> | |
| 259 | <div class="mp-tagline">Massive reach for physical 3D-printed products.</div> | |
| 260 | <div class="mp-meta"><span class="pill physical">Physical</span><span class="pill fee">15%</span></div> | |
| 261 | </div> | |
| 262 | <div class="mp-tile"> | |
| 263 | <div class="mp-row"><div class="mp-icon">eB</div><div class="mp-name">eBay</div></div> | |
| 264 | <div class="mp-tagline">Global physical-goods marketplace. Great for printed props.</div> | |
| 265 | <div class="mp-meta"><span class="pill physical">Physical</span><span class="pill fee">~12.55%</span></div> | |
| 266 | </div> | |
| 267 | <div class="mp-tile"> | |
| 268 | <div class="mp-row"><div class="mp-icon">S</div><div class="mp-name">Shopify</div></div> | |
| 269 | <div class="mp-tagline">Push physical products to your own Shopify storefront too.</div> | |
| 270 | <div class="mp-meta"><span class="pill physical">Physical</span><span class="pill fee">Plan + 2.9%</span></div> | |
| 271 | </div> | |
| 272 | <div class="mp-tile"> | |
| 273 | <div class="mp-row"><div class="mp-icon">W</div><div class="mp-name">Walmart</div></div> | |
| 274 | <div class="mp-tagline">US-only physical-goods marketplace. Big audience.</div> | |
| 275 | <div class="mp-meta"><span class="pill physical">Physical</span><span class="pill fee">6-15%</span></div> | |
| 276 | </div> | |
| 277 | <div class="mp-tile" style="border-color:rgba(99,102,241,0.55);background:linear-gradient(135deg, rgba(59,130,246,0.10), rgba(124,58,237,0.10))"> | |
| 278 | <div class="mp-row"><div class="mp-icon" style="background:linear-gradient(135deg,#3b82f6,#6366f1);color:#fff">W<span style="color:#c4b5fd">S</span></div><div class="mp-name">Your WebSTLs storefront</div></div> | |
| 279 | <div class="mp-tagline">Your own branded store, custom domain, Stripe checkout, full audience CRM.</div> | |
| 280 | <div class="mp-meta"><span class="pill digital">Digital</span><span class="pill physical">Physical</span><span class="pill" style="background:rgba(34,197,94,0.20);color:#86efac">As low as 0%</span></div> | |
| 281 | </div> | |
| 282 | </div> | |
| 283 | ||
| 284 | <p class="text-xs text-dim" style="margin-top:18px;font-style:italic"> | |
| 285 | Connection methods: OAuth for the modern platforms (Cults3D, MyMiniFactory, Patreon, Etsy, eBay, Amazon, Gumroad, | |
| 286 | Shopify, MakerWorld, Thangs), API key for the rest. We never see or store the buyer's payment details — that | |
| 287 | stays on the marketplace. | |
| 288 | </p> | |
| 289 | </section> | |
| 290 | ||
| 291 | <!-- =================================================================== | |
| 292 | 3. STOREFRONT BUILDER -- WYSIWYG + LAYOUTS + THEMES | |
| 293 | ================================================================== --> | |
| 294 | <section class="tour-band"> | |
| 295 | <div class="tour-band-eyebrow">Step 3 · The storefront builder</div> | |
| 296 | <h2 class="tour-band-title">Drag-and-drop, real WYSIWYG, 36 layouts × 36 themes.</h2> | |
| 297 | <p class="tour-band-sub"> | |
| 298 | Your storefront isn't a templated listing — it's a real website. The page builder is fully visual: click-to-edit | |
| 299 | text, drag-to-reorder blocks, drag-and-drop image uploads with a focal-point picker. No code required. Custom CSS | |
| 300 | available on Pro+ if you want to deep-customize. | |
| 301 | </p> | |
| 302 | ||
| 303 | <div class="tour-cards"> | |
| 304 | <div class="tour-feat"> | |
| 305 | <div class="ico" style="background:rgba(59,130,246,0.18);color:#60a5fa"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg></div> | |
| 306 | <h4>Click-to-edit text</h4> | |
| 307 | <p>Hover any headline or paragraph on the live storefront, click, type. Saves on blur. No "edit mode" toggling.</p> | |
| 308 | </div> | |
| 309 | <div class="tour-feat"> | |
| 310 | <div class="ico" style="background:rgba(124,58,237,0.18);color:#a78bfa"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 9 12 2 21 9 21 20 3 20 3 9"/><polyline points="9 22 9 12 15 12 15 22"/></svg></div> | |
| 311 | <h4>36 page layouts</h4> | |
| 312 | <p>Gallery, Marketplace, Magazine, Spotlight, Bento, Cinema, Festival, Lookbook, Comic, TCG, Vinyl, Periodic Table, Receipt, Forum, and 22 more. Pick any one as a starting point.</p> | |
| 313 | </div> | |
| 314 | <div class="tour-feat"> | |
| 315 | <div class="ico" style="background:rgba(34,197,94,0.18);color:#4ade80"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="13.5" cy="6.5" r="1.5" /><circle cx="17.5" cy="10.5" r="1.5" /><circle cx="8.5" cy="7.5" r="1.5" /><circle cx="6.5" cy="12.5" r="1.5" /><path d="M12 2a10 10 0 0 0 0 20 4 4 0 0 0 0-8 2 2 0 0 1-2-2c0-2.5 4.5-3 4.5-3"/></svg></div> | |
| 316 | <h4>36 themes (color palettes)</h4> | |
| 317 | <p>Dungeon Forge, Workshop, Atelier, Mecha, Tabletop, Cottage, Midnight, Ember, Ink, Nebula, Parchment, Reef, Stone, Pine, Obsidian, Linen, Sunset, Bubblegum, Volt, Inferno, Vapor, Royale, Aurora, Slate, Wheat, Granite, Mist, Mango, Coral, Iris, Magma, Dragon, Frost, Phantom, Toxic, plus your own custom.</p> | |
| 318 | </div> | |
| 319 | <div class="tour-feat"> | |
| 320 | <div class="ico" style="background:rgba(245,158,11,0.18);color:#fbbf24"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg></div> | |
| 321 | <h4>Focal-point picker</h4> | |
| 322 | <p>Drag a crosshair on each hero image to set where the crop centers when the layout responds. No more "head got cut off on mobile."</p> | |
| 323 | </div> | |
| 324 | <div class="tour-feat"> | |
| 325 | <div class="ico" style="background:rgba(236,72,153,0.18);color:#f472b6"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="9" x2="9" y2="21"/></svg></div> | |
| 326 | <h4>Drag-and-drop blocks</h4> | |
| 327 | <p>Move sections around the page by dragging. Reorder hero / featured product / catalog grid / about / reviews / newsletter signup to taste.</p> | |
| 328 | </div> | |
| 329 | <div class="tour-feat"> | |
| 330 | <div class="ico" style="background:rgba(6,182,212,0.18);color:#22d3ee"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10Z"/></svg></div> | |
| 331 | <h4>Custom domain + SSL</h4> | |
| 332 | <p>Point a CNAME at us, hit save, we provision a free Let's Encrypt certificate. Pro+ plans. Free + Starter use a subdomain on affiliate.3dshawn.com.</p> | |
| 333 | </div> | |
| 334 | <div class="tour-feat"> | |
| 335 | <div class="ico" style="background:rgba(168,85,247,0.18);color:#c084fc"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21V3"/><path d="M9 3v18"/><path d="M21 6h-6"/><path d="M21 12h-6"/><path d="M21 18h-6"/></svg></div> | |
| 336 | <h4>Brand chrome controls</h4> | |
| 337 | <p>Edit hero title, eyebrow text, CTA labels, section headings, footer trust line, badge labels, sign-in label, cart label — all without touching code. Per-storefront overrides for everything.</p> | |
| 338 | </div> | |
| 339 | <div class="tour-feat"> | |
| 340 | <div class="ico" style="background:rgba(132,204,22,0.18);color:#a3e635"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg></div> | |
| 341 | <h4>Live preview</h4> | |
| 342 | <p>You're editing what buyers see — not a separate preview mode. Saves are instant. Roll back any field with one click.</p> | |
| 343 | </div> | |
| 344 | </div> | |
| 345 | </section> | |
| 346 | ||
| 347 | <!-- =================================================================== | |
| 348 | 4. LISTING & FILE MANAGEMENT | |
| 349 | ================================================================== --> | |
| 350 | <section class="tour-section"> | |
| 351 | <div class="tour-grid"> | |
| 352 | <div> | |
| 353 | <div class="tour-step">Step 4 · Upload & listing manager</div> | |
| 354 | <h2 class="tour-title">Upload once, package everything in one form.</h2> | |
| 355 | <p class="tour-lead">Drag your STLs into the upload page. Add title, tagline, description, highlights, included items, video links, specs (parts, weight, print time), print settings, printer compatibility, materials, license type, and hero image. The form is built to capture <strong>everything you'd put in a Cults3D / MMF / Etsy listing</strong> — once.</p> | |
| 356 | <ul class="tour-bullets"> | |
| 357 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Multi-file upload — STL, 3MF, OBJ, ZIPs of supports, slicer profiles, license PDFs</li> | |
| 358 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Per-model variants for physical: color options, materials (PLA / PETG / Resin), inventory qty, weight, dimensions, ship-from country, production time</li> | |
| 359 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Bulk operations from Models list: bulk publish, bulk archive, bulk move to bundle, bulk price adjust</li> | |
| 360 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Scheduled publish: pick a future date/time, worker promotes draft → published at the anchor</li> | |
| 361 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Bundle support — group N models, sell at one bundle price, retain individual sale as well</li> | |
| 362 | </ul> | |
| 363 | </div> | |
| 364 | <div class="tour-frame"> | |
| 365 | <div class="tour-frame-bar"> | |
| 366 | <span class="tour-frame-dot" style="background:#ef4444"></span> | |
| 367 | <span class="tour-frame-dot" style="background:#fbbf24"></span> | |
| 368 | <span class="tour-frame-dot" style="background:#22c55e"></span> | |
| 369 | <span class="tour-frame-url">affiliate.3dshawn.com/upload_model.cgi</span> | |
| 370 | </div> | |
| 371 | <div class="tour-frame-body"> | |
| 372 | <div style="font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--col-accent-bright);font-weight:700;margin-bottom:10px">01 · Files</div> | |
| 373 | <div style="border:2px dashed rgba(99,102,241,0.40);border-radius:10px;padding:24px;text-align:center;background:rgba(99,102,241,0.05)"> | |
| 374 | <div style="font-size:13px;color:var(--col-text-2);margin-bottom:6px"><strong style="color:#fff">Drop STL, 3MF, OBJ files here</strong></div> | |
| 375 | <div class="text-xs text-dim">or click to browse · max 500 MB per file</div> | |
| 376 | </div> | |
| 377 | <div style="margin-top:14px;display:flex;flex-direction:column;gap:6px"> | |
| 378 | <div style="padding:8px 12px;background:var(--col-surface-2);border-radius:6px;display:flex;justify-content:space-between;align-items:center;font-size:12px"><span style="color:#fff">dragon-lord-mkii-body.stl</span><span class="text-xs text-dim">42 MB</span></div> | |
| 379 | <div style="padding:8px 12px;background:var(--col-surface-2);border-radius:6px;display:flex;justify-content:space-between;align-items:center;font-size:12px"><span style="color:#fff">dragon-lord-mkii-wings.stl</span><span class="text-xs text-dim">18 MB</span></div> | |
| 380 | <div style="padding:8px 12px;background:var(--col-surface-2);border-radius:6px;display:flex;justify-content:space-between;align-items:center;font-size:12px"><span style="color:#fff">supports-resin.3mf</span><span class="text-xs text-dim">7 MB</span></div> | |
| 381 | </div> | |
| 382 | </div> | |
| 383 | </div> | |
| 384 | </div> | |
| 385 | </section> | |
| 386 | ||
| 387 | <!-- =================================================================== | |
| 388 | 5. A/B TESTING (DEEP) | |
| 389 | ================================================================== --> | |
| 390 | <section class="tour-section"> | |
| 391 | <div class="tour-grid reverse"> | |
| 392 | <div class="tour-frame"> | |
| 393 | <div class="tour-frame-bar"> | |
| 394 | <span class="tour-frame-dot" style="background:#ef4444"></span> | |
| 395 | <span class="tour-frame-dot" style="background:#fbbf24"></span> | |
| 396 | <span class="tour-frame-dot" style="background:#22c55e"></span> | |
| 397 | <span class="tour-frame-url">affiliate.3dshawn.com/optimization.cgi</span> | |
| 398 | </div> | |
| 399 | <div class="tour-frame-body"> | |
| 400 | <div style="background:var(--col-surface-2);border:1px solid var(--col-border);border-radius:10px;padding:14px"> | |
| 401 | <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px"> | |
| 402 | <div> | |
| 403 | <div style="font-size:13px;font-weight:600;color:#fff">Hero variant · Storefront home</div> | |
| 404 | <div class="text-xs text-dim">2,841 visitors · 7 days running · A/B</div> | |
| 405 | </div> | |
| 406 | <span class="pill success">Call winner</span> | |
| 407 | </div> | |
| 408 | <div style="margin-top:10px"><div style="display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px"><span class="text-dim">A · Control</span><span style="color:var(--col-text-2);font-family:var(--font-mono)">3.42%</span></div><div style="height:6px;background:var(--col-surface-3);border-radius:999px;overflow:hidden"><div style="width:55%;height:100%;background:linear-gradient(90deg,#3b82f6,#6366f1)"></div></div></div> | |
| 409 | <div style="margin-top:10px"><div style="display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px"><span class="text-dim">B · “Print fast, sell faster”</span><span style="color:#4ade80;font-family:var(--font-mono);font-weight:700">5.18%</span></div><div style="height:6px;background:var(--col-surface-3);border-radius:999px;overflow:hidden"><div style="width:90%;height:100%;background:linear-gradient(90deg,#22c55e,#4ade80)"></div></div></div> | |
| 410 | <div class="text-xs text-dim" style="margin-top:8px">P(B beats A) = 96.4% · lift 51.5%</div> | |
| 411 | </div> | |
| 412 | </div> | |
| 413 | </div> | |
| 414 | <div> | |
| 415 | <div class="tour-step">Step 5 · A/B testing</div> | |
| 416 | <h2 class="tour-title">Find what converts. With real Bayesian stats.</h2> | |
| 417 | <p class="tour-lead">Visitors are bucketed by a sticky <code>webstls_visitor</code> cookie at first page load, 50/50 by default. The Bayesian model uses a Beta(1,1) prior on each variant's conversion rate — we compute <strong>P(B beats A)</strong> directly from <code>conversions / exposures</code> per bucket. When the probability crosses your threshold (default 95%) the card flips to <em>Call winner</em>, and you promote the winning variant in one click.</p> | |
| 418 | <p class="tour-lead" style="margin-top:14px"><strong style="color:#fff">A/B between whole pages.</strong> In <em>My Storefront → Pages</em>, every page row has an <em>A/B test</em> button. One click duplicates the page (hidden-slug clone, draft, kept out of your nav), wires the two as variants of an experiment, and drops you in the page editor for the challenger. Visitors get bucketed to either the original or the clone — full, fully-editable variant pages, not just inline copy tweaks.</p> | |
| 419 | <ul class="tour-bullets"> | |
| 420 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> <strong>Page-level A/B</strong>: whole storefront pages competing against each other (Home, Catalog, About, custom)</li> | |
| 421 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Element surfaces: hero title, hero subtitle, hero image, CTA label, product tile, section heading, custom HTML</li> | |
| 422 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Design surfaces: full layout swap (1 of 36), color theme swap, or layout AND theme together</li> | |
| 423 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Primary metrics: conversion rate, add-to-cart, click-through, sign-up, custom event</li> | |
| 424 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Lifecycle controls inline: <strong>Start · Pause · Continue · Stop · Re-run · Archive</strong></li> | |
| 425 | </ul> | |
| 426 | </div> | |
| 427 | </div> | |
| 428 | </section> | |
| 429 | ||
| 430 | <!-- =================================================================== | |
| 431 | 6. MVT (MULTIVARIATE TESTING) | |
| 432 | ================================================================== --> | |
| 433 | <section class="tour-section"> | |
| 434 | <div class="tour-grid"> | |
| 435 | <div> | |
| 436 | <div class="tour-step">Step 6 · MVT (multivariate)</div> | |
| 437 | <h2 class="tour-title">Test combinations of sections, not just one tweak.</h2> | |
| 438 | <p class="tour-lead">A/B is fine for 2-way contests. <strong>MVT lets you test combinations</strong> — e.g. 3 hero headlines plus 3 CTAs plus 3 taglines, coordinated so every visitor sees one consistent set. The Bayesian model picks the cell with the highest expected conversion. Use MVT when you have several things to vary in lockstep; use A/B when you have a strong hypothesis about one change.</p> | |
| 439 | <p class="tour-lead" style="margin-top:14px"><strong style="color:#fff">Block-level MVT in one form.</strong> From <em>My Storefront → Tests</em>, fill the <em>New MVT block test</em> panel: pick a page, name your slots (e.g. <code>hero, cta, tagline</code>), and pick 2–6 variants. We land you in a dedicated slot editor with one textarea per (variant × slot) pair. Paste <code>{{slot:hero}}</code> tokens into your page body via the regular page editor, and the storefront substitutes them per visitor at render time.</p> | |
| 440 | <ul class="tour-bullets"> | |
| 441 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> 1–8 slots per page, 2–6 variants per test</li> | |
| 442 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Each visitor sees ALL slots from the same variant — no flicker between sections</li> | |
| 443 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Even traffic split by default (3 variants = 33/33/34, 4 variants = 25/25/25/25, etc.)</li> | |
| 444 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Best for high-traffic stores (1,000+ daily visitors). Below that, A/B converges faster.</li> | |
| 445 | </ul> | |
| 446 | </div> | |
| 447 | <div class="tour-frame"> | |
| 448 | <div class="tour-frame-bar"> | |
| 449 | <span class="tour-frame-dot" style="background:#ef4444"></span> | |
| 450 | <span class="tour-frame-dot" style="background:#fbbf24"></span> | |
| 451 | <span class="tour-frame-dot" style="background:#22c55e"></span> | |
| 452 | <span class="tour-frame-url">affiliate.3dshawn.com/optimization.cgi?id=12</span> | |
| 453 | </div> | |
| 454 | <div class="tour-frame-body"> | |
| 455 | <div style="background:var(--col-surface-2);border:1px solid var(--col-border);border-radius:10px;padding:14px"> | |
| 456 | <div style="font-size:13px;font-weight:600;color:#fff;margin-bottom:8px">Catalog grid layout · MVT</div> | |
| 457 | <div class="text-xs text-dim" style="margin-bottom:10px">4 cells · 4,120 visitors</div> | |
| 458 | <div style="display:flex;flex-direction:column;gap:6px;font-size:11px"> | |
| 459 | <div style="display:flex;justify-content:space-between;padding:6px 10px;background:rgba(255,255,255,0.03);border-radius:6px"><span style="color:var(--col-text-2)">A1 · 3-col / square tiles</span><span style="color:var(--col-text-3);font-family:var(--font-mono)">3.10%</span></div> | |
| 460 | <div style="display:flex;justify-content:space-between;padding:6px 10px;background:rgba(255,255,255,0.03);border-radius:6px"><span style="color:var(--col-text-2)">A2 · 3-col / portrait tiles</span><span style="color:var(--col-text-3);font-family:var(--font-mono)">3.55%</span></div> | |
| 461 | <div style="display:flex;justify-content:space-between;padding:6px 10px;background:rgba(255,255,255,0.03);border-radius:6px"><span style="color:var(--col-text-2)">B1 · 4-col / square tiles</span><span style="color:var(--col-text-3);font-family:var(--font-mono)">3.92%</span></div> | |
| 462 | <div style="display:flex;justify-content:space-between;padding:8px 10px;background:rgba(34,197,94,0.10);border:1px solid rgba(34,197,94,0.30);border-radius:6px"><span style="color:#fff;font-weight:600">B2 · 4-col / portrait tiles — winner</span><span style="color:#4ade80;font-family:var(--font-mono);font-weight:700">4.40%</span></div> | |
| 463 | </div> | |
| 464 | <div class="text-xs text-dim" style="margin-top:10px">Confidence 98.1% · lift +12.0% over best A-cell</div> | |
| 465 | </div> | |
| 466 | </div> | |
| 467 | </div> | |
| 468 | </div> | |
| 469 | </section> | |
| 470 | ||
| 471 | <!-- =================================================================== | |
| 472 | 7. PRICE EXPERIMENTS (BANDIT) | |
| 473 | ================================================================== --> | |
| 474 | <section class="tour-section"> | |
| 475 | <div class="tour-grid reverse"> | |
| 476 | <div class="tour-frame"> | |
| 477 | <div class="tour-frame-bar"> | |
| 478 | <span class="tour-frame-dot" style="background:#ef4444"></span> | |
| 479 | <span class="tour-frame-dot" style="background:#fbbf24"></span> | |
| 480 | <span class="tour-frame-dot" style="background:#22c55e"></span> | |
| 481 | <span class="tour-frame-url">affiliate.3dshawn.com/optimization.cgi#price</span> | |
| 482 | </div> | |
| 483 | <div class="tour-frame-body"> | |
| 484 | <div style="background:var(--col-surface-2);border:1px solid var(--col-border);border-radius:10px;padding:14px"> | |
| 485 | <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px"><div><div style="font-size:13px;font-weight:600;color:#fff">Price test · Dragon Lord MK-II</div><div class="text-xs text-dim">Auto-adjusting · range \$9–\$15</div></div><span class="pill brand">Running</span></div> | |
| 486 | <div style="height:6px;background:var(--col-surface-3);border-radius:999px;position:relative;overflow:hidden;margin-top:14px"><div style="position:absolute;top:0;left:30%;right:25%;bottom:0;background:linear-gradient(90deg,#22c55e,#4ade80);border-radius:999px"></div></div> | |
| 487 | <div style="display:flex;justify-content:space-between;font-size:11px;color:var(--col-text-3);margin-top:6px"><span>\$9</span><span style="color:#60a5fa;font-weight:700">Current \$12</span><span>\$15</span></div> | |
| 488 | <div class="text-xs text-dim" style="margin-top:10px">Thompson-sampling bandit converged on \$12 after 8 days (5,210 visitors). Revenue-per-visitor is 14% higher than the original \$10.</div> | |
| 489 | </div> | |
| 490 | </div> | |
| 491 | </div> | |
| 492 | <div> | |
| 493 | <div class="tour-step">Step 7 · Price experiments</div> | |
| 494 | <h2 class="tour-title">A bandit that finds your revenue peak.</h2> | |
| 495 | <p class="tour-lead">Set a range (e.g. \$9–\$15) and a step (\$1). Visitors hitting the product page get one of N price tiers. We use <strong>Thompson sampling</strong> — bias future traffic toward tiers with the highest revenue-per-visitor, but keep sampling all tiers occasionally to detect drift. After a couple weeks the bandit converges on the price that earns you the most.</p> | |
| 496 | <ul class="tour-bullets"> | |
| 497 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Optimizes for <strong>revenue-per-visitor</strong>, not raw conversion — the right number for a creator</li> | |
| 498 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Global per-product test — we don't show different prices to different individual buyers</li> | |
| 499 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Cooldown windows so a buyer doesn't see whiplash pricing if they refresh</li> | |
| 500 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Auto-pause if revenue tanks below a configurable floor</li> | |
| 501 | </ul> | |
| 502 | </div> | |
| 503 | </div> | |
| 504 | </section> | |
| 505 | ||
| 506 | <!-- =================================================================== | |
| 507 | 8. PRICING SURVEYS | |
| 508 | ================================================================== --> | |
| 509 | <section class="tour-section"> | |
| 510 | <div class="tour-grid"> | |
| 511 | <div> | |
| 512 | <div class="tour-step">Step 8 · Pricing surveys</div> | |
| 513 | <h2 class="tour-title">Ask your buyers what they'd pay.</h2> | |
| 514 | <p class="tour-lead">Two classic methodologies built in: <strong>Van Westendorp PSM</strong> (4 questions yielding a "price-sensitivity range") and <strong>Gabor-Granger</strong> (purchase-intent at sequential price points). Send the survey to your email list, your storefront visitors, or both. Results compute automatically into recommended price bands.</p> | |
| 515 | <ul class="tour-bullets"> | |
| 516 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Pre-built question templates you can customize</li> | |
| 517 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Cohort filtering: only repeat buyers, only buyers of a specific category, etc.</li> | |
| 518 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> One-click "Apply optimum price" pushes the result into a price experiment to validate</li> | |
| 519 | </ul> | |
| 520 | </div> | |
| 521 | <div class="tour-frame"> | |
| 522 | <div class="tour-frame-bar"> | |
| 523 | <span class="tour-frame-dot" style="background:#ef4444"></span> | |
| 524 | <span class="tour-frame-dot" style="background:#fbbf24"></span> | |
| 525 | <span class="tour-frame-dot" style="background:#22c55e"></span> | |
| 526 | <span class="tour-frame-url">affiliate.3dshawn.com/optimization.cgi#surveys</span> | |
| 527 | </div> | |
| 528 | <div class="tour-frame-body"> | |
| 529 | <div style="background:var(--col-surface-2);border:1px solid var(--col-border);border-radius:10px;padding:14px"> | |
| 530 | <div style="font-size:13px;font-weight:600;color:#fff;margin-bottom:4px">Survey results · Dragon Lord MK-II</div> | |
| 531 | <div class="text-xs text-dim" style="margin-bottom:12px">847 responses · Van Westendorp PSM</div> | |
| 532 | <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:11px"> | |
| 533 | <div style="padding:8px;background:rgba(255,255,255,0.03);border-radius:6px"><div class="text-xs text-dim">Too cheap</div><div style="color:#fff;font-family:var(--font-mono);font-weight:700">\$6</div></div> | |
| 534 | <div style="padding:8px;background:rgba(255,255,255,0.03);border-radius:6px"><div class="text-xs text-dim">Bargain</div><div style="color:#fff;font-family:var(--font-mono);font-weight:700">\$10</div></div> | |
| 535 | <div style="padding:8px;background:rgba(34,197,94,0.10);border:1px solid rgba(34,197,94,0.30);border-radius:6px"><div class="text-xs text-dim">Optimum</div><div style="color:#4ade80;font-family:var(--font-mono);font-weight:700">\$13</div></div> | |
| 536 | <div style="padding:8px;background:rgba(255,255,255,0.03);border-radius:6px"><div class="text-xs text-dim">Too expensive</div><div style="color:#fff;font-family:var(--font-mono);font-weight:700">\$18</div></div> | |
| 537 | </div> | |
| 538 | </div> | |
| 539 | </div> | |
| 540 | </div> | |
| 541 | </div> | |
| 542 | </section> | |
| 543 | ||
| 544 | <!-- =================================================================== | |
| 545 | 10. AUDIENCE / CRM | |
| 546 | ================================================================== --> | |
| 547 | <section class="tour-section"> | |
| 548 | <div class="tour-grid"> | |
| 549 | <div> | |
| 550 | <div class="tour-step">Step 10 · Audience & CRM</div> | |
| 551 | <h2 class="tour-title">Your customer list, your data.</h2> | |
| 552 | <p class="tour-lead">Every buyer who checks out on your storefront becomes a row in your audience. View total buyers, new in the last 30 days, repeat-buyer cohort (3+ orders), AOV, lapsed buyers (90+ days quiet), and lifetime-value per customer.</p> | |
| 553 | <ul class="tour-bullets"> | |
| 554 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Per-buyer view: every order, every download, every comment they left — one timeline</li> | |
| 555 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Segment exports: top 50 buyers, repeat-cohort, lapsed-3-months — CSV-ready</li> | |
| 556 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Newsletter subscribers list with opt-in stamp + IP for compliance</li> | |
| 557 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Mailchimp / ConvertKit / Beehiiv export pipelines for broadcast campaigns</li> | |
| 558 | </ul> | |
| 559 | </div> | |
| 560 | <div class="tour-frame"> | |
| 561 | <div class="tour-frame-bar"> | |
| 562 | <span class="tour-frame-dot" style="background:#ef4444"></span> | |
| 563 | <span class="tour-frame-dot" style="background:#fbbf24"></span> | |
| 564 | <span class="tour-frame-dot" style="background:#22c55e"></span> | |
| 565 | <span class="tour-frame-url">affiliate.3dshawn.com/audience.cgi</span> | |
| 566 | </div> | |
| 567 | <div class="tour-frame-body"> | |
| 568 | <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px"> | |
| 569 | <div class="card" style="padding:10px;text-align:center"><div class="text-xs text-dim" style="letter-spacing:1.5px;text-transform:uppercase">Buyers</div><div style="font-family:var(--font-display);font-size:18px;color:#fff;font-weight:700">2,418</div></div> | |
| 570 | <div class="card" style="padding:10px;text-align:center"><div class="text-xs text-dim" style="letter-spacing:1.5px;text-transform:uppercase">Repeat (3+)</div><div style="font-family:var(--font-display);font-size:18px;color:#4ade80;font-weight:700">312</div></div> | |
| 571 | <div class="card" style="padding:10px;text-align:center"><div class="text-xs text-dim" style="letter-spacing:1.5px;text-transform:uppercase">AOV</div><div style="font-family:var(--font-display);font-size:18px;color:#fff;font-weight:700">\$18.40</div></div> | |
| 572 | <div class="card" style="padding:10px;text-align:center"><div class="text-xs text-dim" style="letter-spacing:1.5px;text-transform:uppercase">Lapsed (90d)</div><div style="font-family:var(--font-display);font-size:18px;color:#fbbf24;font-weight:700">486</div></div> | |
| 573 | </div> | |
| 574 | <div style="display:flex;flex-direction:column;gap:6px;font-size:12px"> | |
| 575 | <div style="display:flex;justify-content:space-between;padding:8px 10px;background:rgba(255,255,255,0.03);border-radius:6px"><span style="color:#fff;font-weight:600">Sasha K.</span><span style="color:#4ade80;font-family:var(--font-mono)">\$172.40 LTV</span></div> | |
| 576 | <div style="display:flex;justify-content:space-between;padding:8px 10px;background:rgba(255,255,255,0.03);border-radius:6px"><span style="color:#fff;font-weight:600">Maya R.</span><span style="color:#4ade80;font-family:var(--font-mono)">\$96.00 LTV</span></div> | |
| 577 | <div style="display:flex;justify-content:space-between;padding:8px 10px;background:rgba(255,255,255,0.03);border-radius:6px"><span style="color:#fff;font-weight:600">Jordan C.</span><span style="color:#4ade80;font-family:var(--font-mono)">\$84.00 LTV</span></div> | |
| 578 | </div> | |
| 579 | </div> | |
| 580 | </div> | |
| 581 | </div> | |
| 582 | </section> | |
| 583 | ||
| 584 | <!-- =================================================================== | |
| 585 | 11. PROMOTIONS / COUPONS / BUNDLES | |
| 586 | ================================================================== --> | |
| 587 | <section class="tour-section"> | |
| 588 | <div class="tour-grid reverse"> | |
| 589 | <div class="tour-frame"> | |
| 590 | <div class="tour-frame-bar"> | |
| 591 | <span class="tour-frame-dot" style="background:#ef4444"></span> | |
| 592 | <span class="tour-frame-dot" style="background:#fbbf24"></span> | |
| 593 | <span class="tour-frame-dot" style="background:#22c55e"></span> | |
| 594 | <span class="tour-frame-url">affiliate.3dshawn.com/promotions.cgi</span> | |
| 595 | </div> | |
| 596 | <div class="tour-frame-body"> | |
| 597 | <div style="display:flex;flex-direction:column;gap:8px"> | |
| 598 | <div style="padding:12px;background:var(--col-surface-2);border:1px solid var(--col-border);border-radius:8px;display:flex;align-items:center;justify-content:space-between"><div><div style="font-size:13px;font-weight:600;color:#fff">Spring 20 percent off</div><div class="text-xs text-dim">Code: SPRING20 · /promo/spring20 · 87 of 500</div></div><span class="pill success">Active</span></div> | |
| 599 | <div style="padding:12px;background:var(--col-surface-2);border:1px solid var(--col-border);border-radius:8px;display:flex;align-items:center;justify-content:space-between"><div><div style="font-size:13px;font-weight:600;color:#fff">Skirmisher bundle special</div><div class="text-xs text-dim">Bundle for \$39.00 · 34 used</div></div><span class="pill success">Active</span></div> | |
| 600 | <div style="padding:12px;background:var(--col-surface-2);border:1px solid var(--col-border);border-radius:8px;display:flex;align-items:center;justify-content:space-between"><div><div style="font-size:13px;font-weight:600;color:#fff">Memorial Day flash sale</div><div class="text-xs text-dim">30% off · starts 2026-05-23</div></div><span class="pill" style="background:rgba(59,130,246,0.18);color:#60a5fa">Scheduled</span></div> | |
| 601 | <div style="padding:12px;background:var(--col-surface-2);border:1px solid var(--col-border);border-radius:8px;display:flex;align-items:center;justify-content:space-between"><div><div style="font-size:13px;font-weight:600;color:#fff">First-time buyer 10 off</div><div class="text-xs text-dim">\$10 off · 142 used · new customers only</div></div><span class="pill success">Active</span></div> | |
| 602 | </div> | |
| 603 | </div> | |
| 604 | </div> | |
| 605 | <div> | |
| 606 | <div class="tour-step">Step 11 · Promotions suite</div> | |
| 607 | <h2 class="tour-title">Coupons, sales, bundles, flash sales — everything.</h2> | |
| 608 | <p class="tour-lead">Four promo kinds: <strong>Coupon</strong> (requires code at checkout), <strong>Sale</strong> (auto-applies during the window), <strong>Bundle</strong> (specific products together for a bundle price), and <strong>Flash sale</strong> (urgency-priced, prominent banner). Each can be platform-wide (admin-issued) or storefront-only (your own promo).</p> | |
| 609 | <ul class="tour-bullets"> | |
| 610 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Cap by redemption count (first 500 buyers), by date window, or by per-buyer limit (1 per email)</li> | |
| 611 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Custom shareable URL slugs: <code>/promo/spring20</code>, <code>/promo/black-friday</code></li> | |
| 612 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> "New customers only" toggle for acquisition campaigns — only buyers with zero prior orders qualify</li> | |
| 613 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Pause/resume any promo — including scheduled ones — without losing redemption history</li> | |
| 614 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Live "discount given" total per promo — track what each campaign actually cost</li> | |
| 615 | </ul> | |
| 616 | </div> | |
| 617 | </div> | |
| 618 | </section> | |
| 619 | ||
| 620 | <!-- =================================================================== | |
| 621 | 12. SEO & SOCIAL CARDS | |
| 622 | ================================================================== --> | |
| 623 | <section class="tour-section"> | |
| 624 | <div class="tour-grid"> | |
| 625 | <div> | |
| 626 | <div class="tour-step">Step 12 · SEO & social cards</div> | |
| 627 | <h2 class="tour-title">Every page editable down to the meta tag.</h2> | |
| 628 | <p class="tour-lead">Title, meta description, keywords, canonical URL, Open Graph image, Twitter Card type, Twitter handle, robots policy — all editable per storefront from one screen. A live SERP preview shows you exactly how Google renders the snippet as you type.</p> | |
| 629 | <ul class="tour-bullets"> | |
| 630 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Live SERP preview — title truncated at ~60 chars, description at ~160</li> | |
| 631 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> OG image preview for Facebook / Discord / Slack / iMessage / X share unfurling</li> | |
| 632 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Per-storefront override of every platform default (admin sets defaults, you override)</li> | |
| 633 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> One-click "noindex" toggle while you're still building — emit <code>noindex, nofollow</code> across the storefront</li> | |
| 634 | </ul> | |
| 635 | </div> | |
| 636 | <div class="tour-frame"> | |
| 637 | <div class="tour-frame-bar"> | |
| 638 | <span class="tour-frame-dot" style="background:#ef4444"></span> | |
| 639 | <span class="tour-frame-dot" style="background:#fbbf24"></span> | |
| 640 | <span class="tour-frame-dot" style="background:#22c55e"></span> | |
| 641 | <span class="tour-frame-url">affiliate.3dshawn.com/storefront_seo.cgi</span> | |
| 642 | </div> | |
| 643 | <div class="tour-frame-body"> | |
| 644 | <div class="text-xs text-dim" style="letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px">Search preview</div> | |
| 645 | <div style="background:var(--col-surface-2);border:1px solid var(--col-border);border-radius:8px;padding:14px 16px"> | |
| 646 | <div style="font-size:12px;color:#94a3b8;margin-bottom:4px">https://affiliate.3dshawn.com/store/demo_studio</div> | |
| 647 | <div style="font-size:18px;color:#60a5fa;font-weight:600;line-height:1.3;margin-bottom:4px">Demo Studio — Premium 3D printable miniatures</div> | |
| 648 | <div style="font-size:13px;color:#cbd5e1;line-height:1.45">Hand-crafted STL files for tabletop fantasy, sci-fi, and historical miniatures. Pre-supported, slicer-ready, ships with print profiles.</div> | |
| 649 | </div> | |
| 650 | </div> | |
| 651 | </div> | |
| 652 | </div> | |
| 653 | </section> | |
| 654 | ||
| 655 | <!-- =================================================================== | |
| 656 | 13. ANALYTICS (DEEP) | |
| 657 | ================================================================== --> | |
| 658 | <section class="tour-section"> | |
| 659 | <div class="tour-grid reverse"> | |
| 660 | <div class="tour-frame"> | |
| 661 | <div class="tour-frame-bar"> | |
| 662 | <span class="tour-frame-dot" style="background:#ef4444"></span> | |
| 663 | <span class="tour-frame-dot" style="background:#fbbf24"></span> | |
| 664 | <span class="tour-frame-dot" style="background:#22c55e"></span> | |
| 665 | <span class="tour-frame-url">affiliate.3dshawn.com/analytics.cgi</span> | |
| 666 | </div> | |
| 667 | <div class="tour-frame-body"> | |
| 668 | <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px"> | |
| 669 | <div class="card" style="padding:14px;text-align:center"><div class="text-xs text-dim" style="letter-spacing:1.5px;text-transform:uppercase">Storefront</div><div style="font-family:var(--font-display);font-size:20px;font-weight:700;color:#fff;margin-top:4px">\$3,480</div><div class="text-xs" style="color:#4ade80;margin-top:2px">42.7%</div></div> | |
| 670 | <div class="card" style="padding:14px;text-align:center"><div class="text-xs text-dim" style="letter-spacing:1.5px;text-transform:uppercase">Cults3D</div><div style="font-family:var(--font-display);font-size:20px;font-weight:700;color:#fff;margin-top:4px">\$1,840</div><div class="text-xs" style="color:#4ade80;margin-top:2px">22.6%</div></div> | |
| 671 | <div class="card" style="padding:14px;text-align:center"><div class="text-xs text-dim" style="letter-spacing:1.5px;text-transform:uppercase">Patreon</div><div style="font-family:var(--font-display);font-size:20px;font-weight:700;color:#fff;margin-top:4px">\$1,560</div><div class="text-xs" style="color:#4ade80;margin-top:2px">19.2%</div></div> | |
| 672 | <div class="card" style="padding:14px;text-align:center"><div class="text-xs text-dim" style="letter-spacing:1.5px;text-transform:uppercase">MyMiniFactory</div><div style="font-family:var(--font-display);font-size:20px;font-weight:700;color:#fff;margin-top:4px">\$1,262</div><div class="text-xs" style="color:#4ade80;margin-top:2px">15.5%</div></div> | |
| 673 | </div> | |
| 674 | <div class="text-xs text-dim" style="margin-top:14px;text-align:center">14-day total: \$8,142 · net payout after fees: \$6,514 (80%)</div> | |
| 675 | </div> | |
| 676 | </div> | |
| 677 | <div> | |
| 678 | <div class="tour-step">Step 13 · Analytics that don't lie</div> | |
| 679 | <h2 class="tour-title">Sales, by channel, net of fees.</h2> | |
| 680 | <p class="tour-lead">Most marketplaces report <em>gross</em> sales. We always show you the <strong>net payout</strong> after their fees, our fees, and Stripe fees — the actual money that lands in your bank. Stacked daily revenue, channel share, per-product conversion, traffic source, AOV trends, refund-rate by channel.</p> | |
| 681 | <ul class="tour-bullets"> | |
| 682 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Daily revenue stacked by channel for 7d / 14d / 30d / 90d windows</li> | |
| 683 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Channel donut + per-channel cards with platform-fee subtraction baked in</li> | |
| 684 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Conversion funnel: visit → product page → cart → checkout → paid</li> | |
| 685 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Engagement: views, downloads, follows, newsletter subs — per-product and per-channel</li> | |
| 686 | </ul> | |
| 687 | </div> | |
| 688 | </div> | |
| 689 | </section> | |
| 690 | ||
| 691 | <!-- =================================================================== | |
| 692 | 14. POOLED-DATA RECOMMENDATIONS | |
| 693 | ================================================================== --> | |
| 694 | <section class="tour-section"> | |
| 695 | <div class="tour-grid"> | |
| 696 | <div> | |
| 697 | <div class="tour-step">Step 14 · Pooled-data recommendations</div> | |
| 698 | <h2 class="tour-title">Anonymized peer benchmarks. Real signal.</h2> | |
| 699 | <p class="tour-lead">We aggregate metrics across stores in your category and price band. You see the pattern — "Miniatures stores in the \$5-15 band see +12.4% conversion when products have 3+ images. You currently average 2.1." That's a concrete change you can make this afternoon.</p> | |
| 700 | <ul class="tour-bullets"> | |
| 701 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Your individual data is <strong>never</strong> shared — only percentile bands</li> | |
| 702 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Sample sizes <50 stores are excluded so noise can't masquerade as signal</li> | |
| 703 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Recommendations cover: image count, description length, price ladder slope, hero-image style, category tagging, A/B test cadence</li> | |
| 704 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Opt out any time from Settings → Available Features (you also stop receiving recommendations)</li> | |
| 705 | </ul> | |
| 706 | </div> | |
| 707 | <div class="tour-frame"> | |
| 708 | <div class="tour-frame-bar"> | |
| 709 | <span class="tour-frame-dot" style="background:#ef4444"></span> | |
| 710 | <span class="tour-frame-dot" style="background:#fbbf24"></span> | |
| 711 | <span class="tour-frame-dot" style="background:#22c55e"></span> | |
| 712 | <span class="tour-frame-url">affiliate.3dshawn.com/dashboard.cgi</span> | |
| 713 | </div> | |
| 714 | <div class="tour-frame-body"> | |
| 715 | <div style="padding:16px;background:linear-gradient(135deg,rgba(124,58,237,0.10),rgba(59,130,246,0.10));border:1px solid rgba(124,58,237,0.35);border-radius:10px"> | |
| 716 | <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px"><span style="font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#a78bfa">Pooled-data tip</span><span class="pill" style="background:rgba(124,58,237,0.25);color:#c4b5fd">+12.4%</span></div> | |
| 717 | <div style="font-size:14px;color:#fff;line-height:1.55;margin-bottom:8px">Stores in <strong>Miniatures · \$5–15</strong> see <strong style="color:#c4b5fd">+12.4% conversion</strong> when products have <strong>3+ images</strong>. You currently average 2.1.</div> | |
| 718 | <div class="text-xs text-dim">Sample: 218 stores · 14,029 sessions · last 30d</div> | |
| 719 | </div> | |
| 720 | </div> | |
| 721 | </div> | |
| 722 | </div> | |
| 723 | </section> | |
| 724 | ||
| 725 | <!-- =================================================================== | |
| 726 | 15. BILLING & CREDIT SYSTEM | |
| 727 | ================================================================== --> | |
| 728 | <section class="tour-section"> | |
| 729 | <div class="tour-grid reverse"> | |
| 730 | <div class="tour-frame"> | |
| 731 | <div class="tour-frame-bar"> | |
| 732 | <span class="tour-frame-dot" style="background:#ef4444"></span> | |
| 733 | <span class="tour-frame-dot" style="background:#fbbf24"></span> | |
| 734 | <span class="tour-frame-dot" style="background:#22c55e"></span> | |
| 735 | <span class="tour-frame-url">affiliate.3dshawn.com/billing.cgi</span> | |
| 736 | </div> | |
| 737 | <div class="tour-frame-body"> | |
| 738 | <div style="background:linear-gradient(135deg, rgba(99,102,241,0.10), rgba(59,130,246,0.06));border:1px solid rgba(99,102,241,0.35);border-radius:10px;padding:16px"> | |
| 739 | <div class="text-xs" style="letter-spacing:1.5px;text-transform:uppercase;color:#c4b5fd;font-weight:700;margin-bottom:6px">Available credit</div> | |
| 740 | <div style="font-family:var(--font-display);font-size:30px;color:#fff;font-weight:700">\$12.00</div> | |
| 741 | <div class="text-xs text-dim" style="margin-top:6px">Applied automatically to next invoice before card is charged.</div> | |
| 742 | <div style="margin-top:14px;padding-top:14px;border-top:1px dashed var(--col-border);font-size:12px"> | |
| 743 | <div style="display:flex;justify-content:space-between;margin-bottom:4px"><span class="text-dim">Plan charge</span><span class="text-dim">\$29.00</span></div> | |
| 744 | <div style="display:flex;justify-content:space-between;margin-bottom:4px"><span style="color:#a78bfa">Credit applied</span><span style="color:#a78bfa">-\$12.00</span></div> | |
| 745 | <div style="display:flex;justify-content:space-between;padding-top:4px;border-top:1px dashed var(--col-border);font-weight:700;color:#fff"><span>Cash to card</span><span>\$17.00</span></div> | |
| 746 | </div> | |
| 747 | </div> | |
| 748 | </div> | |
| 749 | </div> | |
| 750 | <div> | |
| 751 | <div class="tour-step">Step 15 · Billing & the credit system</div> | |
| 752 | <h2 class="tour-title">Refunds become credit. Auto-applied to your next bill.</h2> | |
| 753 | <p class="tour-lead">When something goes wrong, we credit your account and apply it to your next invoice <strong>before</strong> charging your card. Cleaner books than card-refund-roulette, faster than waiting 5-10 business days for a card refund, and your card stays untouched whenever credit covers the bill.</p> | |
| 754 | <ul class="tour-bullets"> | |
| 755 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Current plan card with next-invoice preview showing the cash/credit split</li> | |
| 756 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Plan picker with one-click upgrade/downgrade (proration on upgrade, period-end on downgrade)</li> | |
| 757 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Full invoice history with status pills: Paid / Open / Failed / Refunded as credit / Void</li> | |
| 758 | <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> Live credit-ledger feed — every grant, every consumption, with reasons</li> | |
| 759 | </ul> | |
| 760 | </div> | |
| 761 | </div> | |
| 762 | </section> | |
| 763 | ||
| 764 | <!-- =================================================================== | |
| 765 | 16. PLATFORM FOUNDATIONS | |
| 766 | ================================================================== --> | |
| 767 | <section class="tour-band"> | |
| 768 | <div class="tour-band-eyebrow">Step 16 · The platform underneath</div> | |
| 769 | <h2 class="tour-band-title">The plumbing you don't think about — until you need it.</h2> | |
| 770 | <p class="tour-band-sub">Every feature above sits on top of these. They're the things that make the difference between “a side project that scaled” and “a business you can run.”</p> | |
| 771 | ||
| 772 | <div class="tour-cards"> | |
| 773 | <div class="tour-feat"> | |
| 774 | <div class="ico" style="background:rgba(59,130,246,0.18);color:#60a5fa"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg></div> | |
| 775 | <h4>Global search</h4> | |
| 776 | <p>Topbar search box hits models, orders, buyer emails, settings, and feature pages. Tokenized + punctuation-agnostic — <code>cop-tur</code> finds <em>Cop-Tur</em>, <em>Cop Tur</em>, or slug <code>cop_tur</code>.</p> | |
| 777 | </div> | |
| 778 | <div class="tour-feat"> | |
| 779 | <div class="ico" style="background:rgba(124,58,237,0.18);color:#a78bfa"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3"/><path d="M12 17h0"/></svg></div> | |
| 780 | <h4>Sample Data View & Help</h4> | |
| 781 | <p>Every main page has a "Sample Data View" button that fills the page with example data so you see how it looks before you have your own. Help icon up top opens a curated “where do I do that” guide.</p> | |
| 782 | </div> | |
| 783 | <div class="tour-feat"> | |
| 784 | <div class="ico" style="background:rgba(34,197,94,0.18);color:#4ade80"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/></svg></div> | |
| 785 | <h4>2FA, audit log, sessions</h4> | |
| 786 | <p>TOTP-based 2FA, full audit log on every admin action, list-and-revoke active sessions from Settings. Role-based access on Studio team accounts.</p> | |
| 787 | </div> | |
| 788 | <div class="tour-feat"> | |
| 789 | <div class="ico" style="background:rgba(245,158,11,0.18);color:#fbbf24"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg></div> | |
| 790 | <h4>Stripe Connect Express</h4> | |
| 791 | <p>You're the merchant of record. Daily payouts to your bank. We never touch your money. Stripe Tax handles sales tax / VAT / GST automatically.</p> | |
| 792 | </div> | |
| 793 | <div class="tour-feat"> | |
| 794 | <div class="ico" style="background:rgba(6,182,212,0.18);color:#22d3ee"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg></div> | |
| 795 | <h4>Status page + system health</h4> | |
| 796 | <p>Live uptime per subsystem on the Overview dashboard. Public status page at status.affiliate.3dshawn.com. Studio plans include a 99.95% SLA with service credits.</p> | |
| 797 | </div> | |
| 798 | <div class="tour-feat"> | |
| 799 | <div class="ico" style="background:rgba(236,72,153,0.18);color:#f472b6"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/></svg></div> | |
| 800 | <h4>Cloudflare R2 file storage</h4> | |
| 801 | <p>Every STL, image, and bundle archive lives on R2 with edge caching globally. No egress fees, fast downloads anywhere.</p> | |
| 802 | </div> | |
| 803 | <div class="tour-feat"> | |
| 804 | <div class="ico" style="background:rgba(168,85,247,0.18);color:#c084fc"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20"/><path d="M2 12h20"/></svg></div> | |
| 805 | <h4>Three-layer feature flags</h4> | |
| 806 | <p>Platform-wide flags, account-level overrides, storefront-level overrides. Roll out a new feature to 10% of stores first, then to all of Pro, then to everyone.</p> | |
| 807 | </div> | |
| 808 | <div class="tour-feat"> | |
| 809 | <div class="ico" style="background:rgba(132,204,22,0.18);color:#a3e635"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div> | |
| 810 | <h4>Job queue + background workers</h4> | |
| 811 | <p>Cross-platform pushes, marketplace polling, email delivery, scheduled-publish promotions, billing-invoice generation — all run on a Minion-style job queue with retries and dead-letter inspection.</p> | |
| 812 | </div> | |
| 813 | </div> | |
| 814 | </section> | |
| 815 | ||
| 816 | <!-- =================================================================== | |
| 817 | CTA | |
| 818 | ================================================================== --> | |
| 819 | <section class="section" style="text-align:center;padding:60px 32px 90px;border-top:1px solid var(--col-border)"> | |
| 820 | <span class="hero-pill"><span class="dot"></span> You've seen all 16 sections</span> | |
| 821 | <h2 class="section-title" style="font-size:36px;margin:14px 0 10px">Now run it on your own data.</h2> | |
| 822 | <p class="section-sub" style="margin-bottom:26px;max-width:580px;margin-left:auto;margin-right:auto">14-day free trial of any paid plan. No card required for the Free plan. Setup takes less than 5 minutes — we'll wire up a sample storefront so you can see what you're getting into.</p> | |
| 823 | <a href="signup.cgi" class="btn btn-primary btn-lg">Start your free trial</a> | |
| 824 | | |
| 825 | <a href="pricing.cgi" class="btn btn-secondary btn-lg">See pricing</a> | |
| 826 | <p class="text-xs text-dim" style="margin-top:22px">Or <a href="contact.cgi" class="text-brand">book a 20-minute walkthrough</a> if you want a real human to give you a live demo.</p> | |
| 827 | </section> | |
| 828 | ||
| 829 | <footer class="site-foot"> | |
| 830 | <div class="foot-grid"> | |
| 831 | <div class="foot-col"> | |
| 832 | <div class="flex items-center gap-3 mb-2"><div class="brand-mark" style="width:32px;height:32px;font-size:15px">W<span style="color:#a78bfa">S</span></div><div class="brand-text"><span class="brand-name">AffSoft</span></div></div> | |
| 833 | <p class="text-sm text-secondary" style="max-width:340px">The operating system for growth teams.</p> | |
| 834 | </div> | |
| 835 | <div class="foot-col"><h5>Platform</h5><ul><li><a href="features.cgi">Features</a></li><li><a href="tour.cgi">Tour</a></li><li><a href="why.cgi">Why AffSoft</a></li><li><a href="pricing.cgi">Pricing</a></li><li><a href="faq.cgi">FAQ</a></li></ul></div> | |
| 836 | <div class="foot-col"><h5>Company</h5><ul><li><a href="about.cgi">About</a></li><li><a href="contact.cgi">Contact</a></li></ul></div> | |
| 837 | <div class="foot-col"><h5>Legal & Trust</h5><ul><li><a href="privacy.cgi">Privacy</a></li><li><a href="terms.cgi">Terms of Service</a></li></ul></div> | |
| 838 | </div> | |
| 839 | <div class="foot-bottom"><span>© 2026 AffSoft All rights reserved.</span><span>Made for creators who treat this like a business.</span></div> | |
| 840 | </footer> |