added on WebSTLs (webstls.com) at 2026-07-01 22:27:00
| 1 | <div class="page-head"> | |
| 2 | <div> | |
| 3 | <span class="page-eyebrow"><span class="dot"></span> Help & resources</span> | |
| 4 | <h1 class="page-title">Where do I do that?</h1> | |
| 5 | <p class="page-subtitle">Quick pointers to the page that owns each thing in WebSTLs. Use the search box up top to jump straight to a model, order, or settings section.</p> | |
| 6 | </div> | |
| 7 | </div> | |
| 8 | ||
| 9 | <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px"> | |
| 10 | <div class="module"> | |
| 11 | <div class="module-head"><div class="left"><div class="module-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg></div><div><div class="module-title">Sell my first model</div></div></div></div> | |
| 12 | <div class="module-body"> | |
| 13 | <ol style="padding-left:18px;margin:0;line-height:1.7;font-size:13px;color:var(--col-text-2)"> | |
| 14 | <li><a href="/storefront.cgi" class="text-brand">Launch your storefront</a></li> | |
| 15 | <li><a href="/upload_model.cgi" class="text-brand">Upload files</a> (digital or physical)</li> | |
| 16 | <li><a href="/marketplaces.cgi" class="text-brand">Connect a marketplace</a> for cross-platform reach</li> | |
| 17 | <li><a href="/promotions.cgi" class="text-brand">Run a promo</a> to drive your first sales</li> | |
| 18 | </ol> | |
| 19 | </div> | |
| 20 | </div> | |
| 21 | ||
| 22 | <div class="module"> | |
| 23 | <div class="module-head"><div class="left"><div class="module-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg></div><div><div class="module-title">Billing & refunds</div></div></div></div> | |
| 24 | <div class="module-body"> | |
| 25 | <ul style="padding-left:18px;margin:0;line-height:1.7;font-size:13px;color:var(--col-text-2)"> | |
| 26 | <li><a href="/billing.cgi" class="text-brand">View invoices</a> + payment method</li> | |
| 27 | <li>Refunds are issued as <strong>account credit</strong> and auto-applied to your next bill</li> | |
| 28 | <li>See your <a href="/billing.cgi" class="text-brand">credit balance</a> + history on the Billing page</li> | |
| 29 | </ul> | |
| 30 | </div> | |
| 31 | </div> | |
| 32 | ||
| 33 | <div class="module"> | |
| 34 | <div class="module-head"><div class="left"><div class="module-icon"><svg 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><div><div class="module-title">Find more buyers</div></div></div></div> | |
| 35 | <div class="module-body"> | |
| 36 | <ul style="padding-left:18px;margin:0;line-height:1.7;font-size:13px;color:var(--col-text-2)"> | |
| 37 | <li><a href="/storefront_seo.cgi" class="text-brand">Tune your SEO</a> (meta tags, OG cards)</li> | |
| 38 | <li><a href="/optimization.cgi" class="text-brand">A/B test</a> your hero copy</li> | |
| 39 | <li><a href="/sales_reports.cgi" class="text-brand">Track conversion</a> across every channel</li> | |
| 40 | </ul> | |
| 41 | </div> | |
| 42 | </div> | |
| 43 | ||
| 44 | <div class="module"> | |
| 45 | <div class="module-head"><div class="left"><div class="module-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z"/></svg></div><div><div class="module-title">Comments & reviews</div></div></div></div> | |
| 46 | <div class="module-body"> | |
| 47 | <ul style="padding-left:18px;margin:0;line-height:1.7;font-size:13px;color:var(--col-text-2)"> | |
| 48 | <li><a href="/messages.cgi" class="text-brand">Open the inbox</a> — every comment from every channel</li> | |
| 49 | <li>Reply once; we post it back to the source marketplace under your handle</li> | |
| 50 | <li>Flag urgent messages with the Flag button</li> | |
| 51 | </ul> | |
| 52 | </div> | |
| 53 | </div> | |
| 54 | ||
| 55 | <div class="module"> | |
| 56 | <div class="module-head"><div class="left"><div class="module-icon"><svg 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><div><div class="module-title">Try Sample Data View</div></div></div></div> | |
| 57 | <div class="module-body"> | |
| 58 | <div style="font-size:13px;color:var(--col-text-2);line-height:1.65">Every main page has a <strong>Sample Data View</strong> button up top that fills the page with example data so you can see how it reads once you have activity. Look for it on Dashboard, Analytics, Billing, Promotions, Messages, Optimization, and Admin pages.</div> | |
| 59 | </div> | |
| 60 | </div> | |
| 61 | ||
| 62 | <style> | |
| 63 | /* Highlighted "Talk to a human" card -- this is the support | |
| 64 | lifeline for brand-new sellers, so it gets a blue accent | |
| 65 | border, a soft pulsing glow, and double width in the help | |
| 66 | grid so it's the first thing the eye lands on. */ | |
| 67 | .help-support-card { | |
| 68 | grid-column: span 2; | |
| 69 | position: relative; | |
| 70 | background: linear-gradient(135deg, rgba(59,130,246,0.10) 0%, rgba(99,102,241,0.06) 100%); | |
| 71 | border: 1px solid rgba(59,130,246,0.55) !important; | |
| 72 | box-shadow: 0 0 24px rgba(59,130,246,0.22); | |
| 73 | overflow: hidden; | |
| 74 | animation: help-support-pulse 3.2s ease-in-out infinite; | |
| 75 | } | |
| 76 | .help-support-card::before { | |
| 77 | content: ''; | |
| 78 | position: absolute; inset: 0; | |
| 79 | pointer-events: none; | |
| 80 | background: radial-gradient(ellipse 70% 60% at 0% 0%, rgba(59,130,246,0.18) 0%, transparent 60%); | |
| 81 | } | |
| 82 | .help-support-card .module-head { position: relative; } | |
| 83 | .help-support-card .module-icon { | |
| 84 | background: linear-gradient(135deg, #3b82f6, #6366f1) !important; | |
| 85 | color: #fff !important; | |
| 86 | box-shadow: 0 0 12px rgba(59,130,246,0.5); | |
| 87 | } | |
| 88 | .help-support-card .module-title { | |
| 89 | font-size: 17px !important; | |
| 90 | letter-spacing: 0.2px; | |
| 91 | } | |
| 92 | .help-support-card .help-eyebrow { | |
| 93 | display: inline-block; | |
| 94 | font-size: 10px; font-weight: 800; | |
| 95 | letter-spacing: 2px; text-transform: uppercase; | |
| 96 | color: #93c5fd; | |
| 97 | background: rgba(59,130,246,0.18); | |
| 98 | border: 1px solid rgba(59,130,246,0.45); | |
| 99 | border-radius: 999px; | |
| 100 | padding: 3px 10px; | |
| 101 | margin-bottom: 8px; | |
| 102 | } | |
| 103 | @keyframes help-support-pulse { | |
| 104 | 0%, 100% { box-shadow: 0 0 18px rgba(59,130,246,0.18); } | |
| 105 | 50% { box-shadow: 0 0 32px rgba(59,130,246,0.45); } | |
| 106 | } | |
| 107 | /* Stack on narrow viewports so the span-2 card doesn't push the | |
| 108 | grid past the viewport width. */ | |
| 109 | @media (max-width: 720px) { | |
| 110 | .help-support-card { grid-column: span 1; } | |
| 111 | } | |
| 112 | ||
| 113 | /* "Tutorials & walkthroughs" companion card -- same shape and span | |
| 114 | as the support card, themed in violet (the optimization / | |
| 115 | experiments accent color used elsewhere) so it sits as a clear | |
| 116 | second pillar next to support. */ | |
| 117 | .help-tutorials-card { | |
| 118 | grid-column: span 2; | |
| 119 | position: relative; | |
| 120 | background: linear-gradient(135deg, rgba(124,58,237,0.10) 0%, rgba(168,85,247,0.06) 100%); | |
| 121 | border: 1px solid rgba(124,58,237,0.55) !important; | |
| 122 | box-shadow: 0 0 24px rgba(124,58,237,0.22); | |
| 123 | overflow: hidden; | |
| 124 | animation: help-tutorials-pulse 3.2s ease-in-out infinite; | |
| 125 | } | |
| 126 | .help-tutorials-card::before { | |
| 127 | content: ''; | |
| 128 | position: absolute; inset: 0; | |
| 129 | pointer-events: none; | |
| 130 | background: radial-gradient(ellipse 70% 60% at 0% 0%, rgba(124,58,237,0.18) 0%, transparent 60%); | |
| 131 | } | |
| 132 | .help-tutorials-card .module-head { position: relative; } | |
| 133 | .help-tutorials-card .module-icon { | |
| 134 | background: linear-gradient(135deg, #7c3aed, #a855f7) !important; | |
| 135 | color: #fff !important; | |
| 136 | box-shadow: 0 0 12px rgba(124,58,237,0.5); | |
| 137 | } | |
| 138 | .help-tutorials-card .module-title { | |
| 139 | font-size: 17px !important; | |
| 140 | letter-spacing: 0.2px; | |
| 141 | } | |
| 142 | .help-tutorials-card .help-eyebrow { | |
| 143 | display: inline-block; | |
| 144 | font-size: 10px; font-weight: 800; | |
| 145 | letter-spacing: 2px; text-transform: uppercase; | |
| 146 | color: #c4b5fd; | |
| 147 | background: rgba(124,58,237,0.18); | |
| 148 | border: 1px solid rgba(124,58,237,0.45); | |
| 149 | border-radius: 999px; | |
| 150 | padding: 3px 10px; | |
| 151 | margin-bottom: 8px; | |
| 152 | } | |
| 153 | @keyframes help-tutorials-pulse { | |
| 154 | 0%, 100% { box-shadow: 0 0 18px rgba(124,58,237,0.18); } | |
| 155 | 50% { box-shadow: 0 0 32px rgba(124,58,237,0.45); } | |
| 156 | } | |
| 157 | @media (max-width: 720px) { | |
| 158 | .help-tutorials-card { grid-column: span 1; } | |
| 159 | } | |
| 160 | </style> | |
| 161 | ||
| 162 | <!-- Tutorials & walkthroughs -- parallel pillar to the support card. | |
| 163 | Surfaces /tutorials.cgi (full library), the A/B & MVT testing | |
| 164 | sub-section, and /tour.cgi (long-form product tour). --> | |
| 165 | <div class="module help-tutorials-card"> | |
| 166 | <div class="module-head"><div class="left"><div class="module-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg></div><div><span class="help-eyebrow">Learn the platform</span><div class="module-title">Tutorials & walkthroughs</div></div></div></div> | |
| 167 | <div class="module-body"> | |
| 168 | <div style="font-size:14px;color:var(--col-text-2);line-height:1.7;margin-bottom:16px;max-width:680px"> | |
| 169 | <strong style="color:var(--col-text)">Step-by-step guides for every feature</strong> — uploading your first model, setting up your storefront, cross-platform publishing, and the A/B + MVT testing engine. Each tutorial takes 3–5 minutes; viewed ones are marked so you can pick up where you left off. | |
| 170 | </div> | |
| 171 | <div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center"> | |
| 172 | <a href="/tutorials.cgi" class="btn btn-primary" style="display:inline-flex;align-items:center;gap:8px;padding:11px 18px;font-size:14px;font-weight:700;background:linear-gradient(135deg,#7c3aed,#a855f7);border:none;box-shadow:0 6px 18px rgba(124,58,237,0.45)"> | |
| 173 | <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg> | |
| 174 | Browse tutorials | |
| 175 | </a> | |
| 176 | <a href="/tutorials.cgi#section-optimization" class="btn btn-ghost btn-sm">A/B & MVT tutorials</a> | |
| 177 | <a href="/tour.cgi" class="btn btn-ghost btn-sm">Product tour</a> | |
| 178 | </div> | |
| 179 | </div> | |
| 180 | </div> | |
| 181 | ||
| 182 | <div class="module help-support-card"> | |
| 183 | <div class="module-head"><div class="left"><div class="module-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></div><div><span class="help-eyebrow">We've got you</span><div class="module-title">Talk to a human</div></div></div></div> | |
| 184 | <div class="module-body"> | |
| 185 | <div style="font-size:14px;color:var(--col-text-2);line-height:1.7;margin-bottom:16px;max-width:680px"> | |
| 186 | <strong style="color:var(--col-text)">The fastest way to reach us</strong> is the support inbox — open a thread, get replies in your account, and we can flip the conversation into a live chat when we're online together. New here? Don't hesitate to reach out — real people, fast answers. | |
| 187 | </div> | |
| 188 | <div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center"> | |
| 189 | <a href="/support.cgi?new=1" class="btn btn-primary" style="display:inline-flex;align-items:center;gap:8px;padding:11px 18px;font-size:14px;font-weight:700;box-shadow:0 6px 18px rgba(59,130,246,0.45)"> | |
| 190 | <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> | |
| 191 | Contact support | |
| 192 | </a> | |
| 193 | <a href="mailto:support\@webstls.com" class="btn btn-ghost btn-sm">Email instead</a> | |
| 194 | </div> | |
| 195 | </div> | |
| 196 | </div> | |
| 197 | </div> | |
| 198 | ||
| 199 | <div class="adm-foot-spacer" data-end="help"> </div> |