added on local at 2026-07-01 13:48:10
| 1 | <!-- ===================================================================== | |
| 2 | Storefront onboarding — shown once, when the creator has no | |
| 3 | storefront yet. After they pick a subdomain we INSERT a row plus | |
| 4 | three default pages and bounce back to the editor. | |
| 5 | ===================================================================== --> | |
| 6 | ||
| 7 | <div class="page-head"> | |
| 8 | <div> | |
| 9 | <span class="page-eyebrow"><span class="dot"></span> Storefront · Onboarding</span> | |
| 10 | <h1 class="page-title">Name your storefront</h1> | |
| 11 | <p class="page-subtitle">Pick a subdomain — this becomes the URL buyers visit. You can connect a custom domain (like <code>yourname.com</code>) later under <strong>Domain & SSL</strong>.</p> | |
| 12 | </div> | |
| 13 | </div> | |
| 14 | ||
| 15 | [if:$create_error] | |
| 16 | <div class="banner danger" style="margin-bottom:18px"> | |
| 17 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg> | |
| 18 | <div class="text-xs">$create_error</div> | |
| 19 | </div> | |
| 20 | [/if] | |
| 21 | ||
| 22 | <div class="dash-grid" style="grid-template-columns:1.4fr 1fr;align-items:start"> | |
| 23 | <div class="card card-elevated"> | |
| 24 | <form method="POST" action="/storefront.cgi"> | |
| 25 | <input type="hidden" name="action" value="create"> | |
| 26 | ||
| 27 | <div class="form-group"> | |
| 28 | <label class="form-label">Store name</label> | |
| 29 | <input class="input" type="text" | |
| 30 | name="name" | |
| 31 | value="$display_name" | |
| 32 | placeholder="e.g. Demo Studio" | |
| 33 | maxlength="120" | |
| 34 | autofocus> | |
| 35 | <div class="form-help">Shown to buyers as the friendly brand name. You can change this any time.</div> | |
| 36 | </div> | |
| 37 | ||
| 38 | <div class="form-group"> | |
| 39 | <label class="form-label">Subdomain <span class="req">*</span></label> | |
| 40 | <div class="flex items-center gap-2"> | |
| 41 | <input class="input" type="text" | |
| 42 | name="subdomain" | |
| 43 | value="$suggested_sub" | |
| 44 | placeholder="yourstore" | |
| 45 | pattern="[-a-z0-9]{3,32}" | |
| 46 | minlength="3" maxlength="32" | |
| 47 | required | |
| 48 | style="flex:1"> | |
| 49 | <span class="text-secondary">.affiliate.3dshawn.com</span> | |
| 50 | </div> | |
| 51 | <div class="form-help">3–32 characters · lowercase letters, digits, dashes only · must be unique · <strong>permanent</strong>, unlike the store name</div> | |
| 52 | </div> | |
| 53 | ||
| 54 | <div class="form-group"> | |
| 55 | <label class="form-label">What you'll get out of the box</label> | |
| 56 | <ul class="price-list" style="margin:0"> | |
| 57 | <li> | |
| 58 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> | |
| 59 | Three starter pages — <strong>Home</strong>, <strong>Catalog</strong>, <strong>About</strong> | |
| 60 | </li> | |
| 61 | <li> | |
| 62 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> | |
| 63 | Default theme · editable per page | |
| 64 | </li> | |
| 65 | <li> | |
| 66 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> | |
| 67 | Public preview at <code>affiliate.3dshawn.com/store.cgi?subdomain=<name></code> (no DNS setup needed) | |
| 68 | </li> | |
| 69 | <li> | |
| 70 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> | |
| 71 | Connect a custom domain later — <code>yourname.com</code>, free SSL via Cloudflare | |
| 72 | </li> | |
| 73 | </ul> | |
| 74 | </div> | |
| 75 | ||
| 76 | <button type="submit" class="btn btn-primary btn-lg"> | |
| 77 | Create storefront | |
| 78 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg> | |
| 79 | </button> | |
| 80 | </form> | |
| 81 | </div> | |
| 82 | ||
| 83 | <div class="card"> | |
| 84 | <div class="card-head"> | |
| 85 | <div class="card-title"> | |
| 86 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3"/></svg> | |
| 87 | Want to peek first? | |
| 88 | </div> | |
| 89 | </div> | |
| 90 | <p class="text-secondary text-sm">See what a real storefront looks like — we have a sample populated with reference images you can browse.</p> | |
| 91 | <a href="/store.cgi" target="_blank" class="btn btn-secondary btn-block mt-3"> | |
| 92 | View demo storefront | |
| 93 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg> | |
| 94 | </a> | |
| 95 | ||
| 96 | <div class="divider"></div> | |
| 97 | ||
| 98 | <div class="text-xs text-dim mb-2" style="letter-spacing:1.5px;text-transform:uppercase;font-weight:600">Heads up — naming</div> | |
| 99 | <p class="text-xs text-secondary">Pick something you can live with. Subdomains aren't yet renameable — you'd have to delete the storefront and create a new one. Custom domains, on the other hand, can be added or swapped freely once the store exists.</p> | |
| 100 | </div> | |
| 101 | </div> |