npm - @gemboss/website-ui - Versions diffs - 0.4.0 → 0.6.0 - Mend

@gemboss/website-ui 0.4.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (39) hide show

package/AGENTS.md +43 -5
package/CHANGELOG.md +117 -0
package/README.md +9 -8
package/bin/lib/check.mjs +77 -0
package/css/article.css +237 -0
package/css/components.css +23 -0
package/css/footer.css +3 -0
package/css/forms.css +154 -0
package/css/prose.css +29 -16
package/css/ratings.css +78 -0
package/css/tokens.css +25 -0
package/demo/article.html +359 -0
package/demo/assets/article-hero.svg +1 -0
package/demo/assets/avatar-gemboss.svg +1 -0
package/demo/assets/avatar-sample.svg +1 -0
package/demo/assets/post-headless.svg +1 -0
package/demo/assets/post-motion.svg +1 -0
package/demo/assets/post-output.svg +1 -0
package/demo/assets/post-speed.svg +1 -0
package/demo/assets/post-theme.svg +1 -0
package/demo/assets/post-voice.svg +1 -0
package/demo/blog.html +314 -0
package/demo/forms.html +505 -0
package/demo/index.html +2 -0
package/docs/components.md +334 -12
package/docs/markup-contract.md +123 -7
package/docs/theming.md +4 -3
package/js/website.js +68 -8
package/js/website.mjs +80 -7
package/package.json +1 -1
package/skill/SKILL.md +8 -0
package/system.json +12 -1
package/templates/footer.html +15 -0
package/templates/sections/article.html +93 -0
package/templates/sections/form.html +42 -0
package/templates/sections/post-list.html +65 -0
package/templates/sections/testimonials.html +58 -0
package/website.css +553 -17
package/website.min.css +1 -1

package/css/tokens.css CHANGED Viewed

@@ -89,6 +89,7 @@
   --gw-muted: #686b71;
   --gw-line: #e5e7ea;
   --gw-line-strong: #d5d8dd;
+  --gw-line-control: #85888e;
   --gw-action: #1b1c1e;
   --gw-action-hover: #000000;
   --gw-on-action: #ffffff;
@@ -99,6 +100,10 @@
   --gw-success: #007f5f;
   --gw-success-soft: #e3f1df;
   --gw-warning: #9a6700;
+  --gw-warning-soft: #fbf1dc;
+  --gw-danger: #b42318;
+  --gw-danger-soft: #fff0e9;
+  --gw-on-danger: #ffffff;
   --gw-night: #0c0e14;
   --gw-night-2: #141722;
   --gw-on-night: #e3e4e8;
@@ -115,6 +120,7 @@
     --gw-muted: #9a9ca6;
     --gw-line: #2a2b33;
     --gw-line-strong: #383944;
+    --gw-line-control: #6a6d78;
     --gw-action: #f2f3f5;
     --gw-action-hover: #ffffff;
     --gw-on-action: #0d0d12;
@@ -125,6 +131,10 @@
     --gw-success: #34c38f;
     --gw-success-soft: #132a22;
     --gw-warning: #e0b341;
+    --gw-warning-soft: #2b2410;
+    --gw-danger: #ff6b5a;
+    --gw-danger-soft: #2e1714;
+    --gw-on-danger: #0d0d12;
     --gw-night: #0a0b10;
     --gw-night-2: #12141c;
     --gw-on-night: #e3e4e8;
@@ -141,6 +151,7 @@
   --gw-muted: #9a9ca6;
   --gw-line: #2a2b33;
   --gw-line-strong: #383944;
+  --gw-line-control: #6a6d78;
   --gw-action: #f2f3f5;
   --gw-action-hover: #ffffff;
   --gw-on-action: #0d0d12;
@@ -151,6 +162,10 @@
   --gw-success: #34c38f;
   --gw-success-soft: #132a22;
   --gw-warning: #e0b341;
+  --gw-warning-soft: #2b2410;
+  --gw-danger: #ff6b5a;
+  --gw-danger-soft: #2e1714;
+  --gw-on-danger: #0d0d12;
   --gw-night: #0a0b10;
   --gw-night-2: #12141c;
   --gw-on-night: #e3e4e8;
@@ -166,6 +181,7 @@
   --gw-muted: #686b71;
   --gw-line: #e5e7ea;
   --gw-line-strong: #d5d8dd;
+  --gw-line-control: #85888e;
   --gw-action: #1b1c1e;
   --gw-action-hover: #000000;
   --gw-on-action: #ffffff;
@@ -176,6 +192,10 @@
   --gw-success: #007f5f;
   --gw-success-soft: #e3f1df;
   --gw-warning: #9a6700;
+  --gw-warning-soft: #fbf1dc;
+  --gw-danger: #b42318;
+  --gw-danger-soft: #fff0e9;
+  --gw-on-danger: #ffffff;
   --gw-night: #0c0e14;
   --gw-night-2: #141722;
   --gw-on-night: #e3e4e8;
@@ -192,6 +212,7 @@
   --gw-muted: #9a9ca6;
   --gw-line: #2a2b33;
   --gw-line-strong: #383944;
+  --gw-line-control: #6a6d78;
   --gw-action: #f2f3f5;
   --gw-action-hover: #ffffff;
   --gw-on-action: #0d0d12;
@@ -202,6 +223,10 @@
   --gw-success: #34c38f;
   --gw-success-soft: #132a22;
   --gw-warning: #e0b341;
+  --gw-warning-soft: #2b2410;
+  --gw-danger: #ff6b5a;
+  --gw-danger-soft: #2e1714;
+  --gw-on-danger: #0d0d12;
 }
 /* action profile "accent": data-gw-action="accent" on <html>. In night bands too, where the dark palette applies. */
 :root[data-gw-action="accent"],

package/demo/article.html ADDED Viewed

@@ -0,0 +1,359 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>How to plan a product page around the shopper's questions · GemBoss Blog</title>
+  <meta name="description" content="Plan a product page around the questions a shopper asks, in the order they ask them. The kit's article page: breadcrumbs, meta row, contents, prose, callouts and FAQ.">
+  <script>try{var t=localStorage.getItem('gw-theme');if(t==='light'||t==='dark')document.documentElement.setAttribute('data-theme',t)}catch(e){}</script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;650;700&display=swap">
+  <link rel="stylesheet" href="../website.css">
+</head>
+<body class="gw-page">
+  <a class="gw-skip" href="#main">Skip to content</a>
+  <div class="gw-announce" role="region" aria-label="Announcement">GemBoss is built by the team behind GemPages. <a href="https://feedback.gemboss.ai/changelog" rel="noopener">What's new on the changelog</a></div>
+  <header class="gw-header" data-gw-header>
+    <div class="gw-wrap gw-header__bar">
+      <a class="gw-brand" href="https://gemboss.ai/"><svg class="gw-brand__mark" viewBox="0 0 100 116" aria-hidden="true"><polygon points="26,14 74,14 66,50 34,50" style="fill:var(--gw-accent)"/><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="currentColor" stroke-width="9" stroke-linejoin="round"/><path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="currentColor" stroke-width="5.6" stroke-linejoin="round"/></svg><span class="gw-brand__name">GemBoss</span></a>
+      <nav class="gw-nav" aria-label="Main">
+        <ul class="gw-nav__list">
+          <li class="gw-nav__item">
+            <button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-product" data-gw-mega="gw-mega-product">Product</button>
+            <div class="gw-mega" id="gw-mega-product" hidden>
+              <div class="gw-wrap gw-mega__grid">
+                <div class="gw-mega__col">
+                  <p class="gw-mega__heading">Build</p>
+                  <a class="gw-mega__link" href="https://gemboss.ai/funnel"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4h18l-7 8v6l-4 2v-8z"/></svg></span><span><b>Funnel builder</b><i>Angles, advertorials, offers</i></span></a>
+                  <a class="gw-mega__link" href="https://gemboss.ai/ai-store-builder"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l1.5-5h15L21 9"/><path d="M4 9v11h16V9"/><path d="M9 20v-6h6v6"/></svg></span><span><b>Storefront builder</b><i>Headless, on your Shopify</i></span></a>
+                  <a class="gw-mega__link" href="https://gemboss.ai/gempages"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/></svg></span><span><b>Page builder</b><i>Ask, watch, publish</i></span></a>
+                </div>
+                <div class="gw-mega__col">
+                  <p class="gw-mega__heading">Grow</p>
+                  <a class="gw-mega__link" href="https://gemboss.ai/gemx"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4v16M20 4v16M4 9h16M4 15h16"/></svg></span><span><b>Tests &amp; personalization</b><i>You promote the winner</i></span></a>
+                  <a class="gw-mega__link" href="https://gemboss.ai/gemoffers"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12l-8 8-9-9V3h8z"/><circle cx="7.5" cy="7.5" r="1.5"/></svg></span><span><b>Offers &amp; upsells</b><i>Bundles, gifts, bumps</i></span></a>
+                  <a class="gw-mega__link" href="https://gemboss.ai/data"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="M7 15l4-4 3 3 5-6"/></svg></span><span><b>Analytics &amp; data</b><i>First-party, yours</i></span></a>
+                </div>
+                <div class="gw-mega__col">
+                  <p class="gw-mega__heading">Connect</p>
+                  <a class="gw-mega__link" href="https://gemboss.ai/integrations"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3v6M15 3v6M6 9h12v3a6 6 0 0 1-12 0z"/><path d="M12 18v3"/></svg></span><span><b>Integrations</b><i>Klaviyo, Meta, Google</i></span></a>
+                  <a class="gw-mega__link" href="https://gemboss.ai/mcp"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="m8 9-4 3 4 3"/><path d="m16 9 4 3-4 3"/><path d="m14 5-4 14"/></svg></span><span><b>MCP &amp; agents</b><i>Claude and Codex</i></span></a>
+                  <a class="gw-mega__link" href="https://gemboss.ai/agent-ready"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="8" width="14" height="11" rx="3"/><path d="M12 4v4"/><circle cx="9.5" cy="13.5" r="1"/><circle cx="14.5" cy="13.5" r="1"/></svg></span><span><b>Agent-ready storefront</b><i>Ready for AI shoppers</i></span></a>
+                </div>
+                <a class="gw-mega__feature" href="https://gemboss.ai/engine"><b>How the engine works</b><i>Six stages, one loop. Nothing ships without you.</i><span class="gw-link gw-link--arrow">See the engine</span></a>
+              </div>
+            </div>
+          </li>
+          <li class="gw-nav__item">
+            <button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-usecases" data-gw-mega="gw-mega-usecases">Use cases</button>
+            <div class="gw-mega" id="gw-mega-usecases" hidden>
+              <div class="gw-wrap gw-mega__grid">
+                <div class="gw-mega__col">
+                  <p class="gw-mega__heading">Adaptive funnels</p>
+                  <a class="gw-mega__link" href="https://gemboss.ai/meta-ads"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11v2a1 1 0 0 0 1 1h3l5 4V6L7 10H4a1 1 0 0 0-1 1z"/><path d="M16 9a4 4 0 0 1 0 6"/></svg></span><span><b>Meta, Google &amp; TikTok ads</b><i>A funnel for every ad angle</i></span></a>
+                  <a class="gw-mega__link" href="https://gemboss.ai/klaviyo-personalized-landing-pages"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span><span><b>Klaviyo email <span class="gw-badge gw-badge--warning">Early access</span></b><i>A page per recipient, after the click</i></span></a>
+                </div>
+                <div class="gw-mega__col">
+                  <p class="gw-mega__heading">Adaptive storefront</p>
+                  <a class="gw-mega__link" href="https://gemboss.ai/ai-store-builder"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l1.5-5h15L21 9"/><path d="M4 9v11h16V9"/><path d="M9 20v-6h6v6"/></svg></span><span><b>Headless storefront</b><i>Your whole Shopify store, on GemBoss</i></span></a>
+                  <a class="gw-mega__link" href="https://gemboss.ai/agent-ready"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="8" width="14" height="11" rx="3"/><path d="M12 4v4"/><circle cx="9.5" cy="13.5" r="1"/><circle cx="14.5" cy="13.5" r="1"/></svg></span><span><b>AI agents &amp; AI search</b><i>Readable by AI, shoppable by agents</i></span></a>
+                </div>
+                <a class="gw-mega__feature" href="https://gemboss.ai/meta-ads"><b>Every ad gets its own page</b><i>The page keeps the promise the ad made.</i><span class="gw-link gw-link--arrow">See the ad-to-page path</span></a>
+              </div>
+            </div>
+          </li>
+          <li class="gw-nav__item"><a class="gw-nav__link" href="https://gemboss.ai/pricing">Pricing</a></li>
+          <li class="gw-nav__item">
+            <button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-resources" data-gw-mega="gw-mega-resources">Resources</button>
+            <div class="gw-mega" id="gw-mega-resources" hidden>
+              <div class="gw-wrap gw-mega__grid">
+                <div class="gw-mega__col">
+                  <p class="gw-mega__heading">Learn</p>
+                  <a class="gw-mega__link" href="https://gemboss.ai/blog"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h11a2 2 0 0 1 2 2v14H6a2 2 0 0 1-2-2z"/><path d="M8 8h7M8 12h7"/></svg></span><span><b>Blog</b><i>Playbooks and guides</i></span></a>
+                  <a class="gw-mega__link" href="https://gemboss.ai/docs"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></svg></span><span><b>Docs</b><i>Guides and MCP tools</i></span></a>
+                </div>
+                <div class="gw-mega__col">
+                  <p class="gw-mega__heading">Company</p>
+                  <a class="gw-mega__link" href="https://gemboss.ai/company"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg></span><span><b>About</b><i>Why we build it</i></span></a>
+                  <a class="gw-mega__link" href="https://gemboss.ai/contact"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><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></span><span><b>Contact</b><i>Talk to a human</i></span></a>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </nav>
+      <div class="gw-header__actions">
+        <button class="gw-theme-toggle" type="button" data-gw-theme-toggle aria-label="Switch to dark theme"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4a8 8 0 0 1 0 16z" fill="currentColor"/></svg></button>
+        <a class="gw-nav__link gw-header__signin" href="https://admin.gemboss.ai/login">Sign in</a>
+        <a class="gw-btn gw-btn--secondary gw-btn--sm" href="https://gemboss.ai/contact">Book a demo</a>
+        <a class="gw-btn gw-btn--sm" href="https://admin.gemboss.ai/signup">Start free</a>
+        <button class="gw-menu-toggle" type="button" aria-expanded="false" aria-controls="gw-mobile-menu" data-gw-menu-toggle aria-label="Open menu"><svg class="gw-menu-toggle__open" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg><svg class="gw-menu-toggle__close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
+      </div>
+    </div>
+    <div class="gw-mobile-menu" id="gw-mobile-menu" hidden>
+      <nav class="gw-wrap" aria-label="Main, mobile">
+        <details class="gw-mobile-menu__group">
+          <summary>Product</summary>
+          <ul class="gw-mobile-menu__list">
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/funnel">Funnel builder</a></li>
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/ai-store-builder">Storefront builder</a></li>
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/gemx">Tests &amp; personalization</a></li>
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/gemoffers">Offers &amp; upsells</a></li>
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/integrations">Integrations</a></li>
+          </ul>
+        </details>
+        <details class="gw-mobile-menu__group">
+          <summary>Use cases</summary>
+          <ul class="gw-mobile-menu__list">
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/meta-ads">Meta, Google &amp; TikTok ads</a></li>
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/ai-store-builder">Headless storefront</a></li>
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/agent-ready">AI agents &amp; AI search</a></li>
+          </ul>
+        </details>
+        <a class="gw-mobile-menu__top" href="https://gemboss.ai/pricing">Pricing</a>
+        <details class="gw-mobile-menu__group">
+          <summary>Resources</summary>
+          <ul class="gw-mobile-menu__list">
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/blog">Blog</a></li>
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/docs">Docs</a></li>
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/company">About</a></li>
+            <li><a class="gw-mobile-menu__link" href="https://gemboss.ai/contact">Contact</a></li>
+          </ul>
+        </details>
+        <div class="gw-mobile-menu__actions">
+          <a class="gw-btn gw-btn--block" href="https://admin.gemboss.ai/signup">Start free</a>
+          <a class="gw-btn gw-btn--secondary gw-btn--block" href="https://gemboss.ai/contact">Book a demo</a>
+          <a class="gw-mobile-menu__link" href="https://admin.gemboss.ai/login">Sign in</a>
+        </div>
+      </nav>
+    </div>
+  </header>
+  <main id="main">
+    <article class="gw-wrap gw-article">
+      <header class="gw-article__head">
+        <nav class="gw-breadcrumbs" aria-label="Breadcrumb">
+          <ol>
+            <li><a href="blog.html">Blog</a></li>
+            <li><a href="blog.html#guides">Guides</a></li>
+            <li><a href="article.html" aria-current="page">How to plan a product page around the shopper's questions</a></li>
+          </ol>
+        </nav>
+        <h1>How to plan a product page around the shopper's questions</h1>
+        <p class="gw-article-meta">
+          <span><img class="gw-article-meta__avatar" src="assets/avatar-gemboss.svg" alt="" width="24" height="24">GemBoss Team</span>
+          <span><a href="blog.html#guides">Guides</a></span>
+          <span>Updated <time datetime="2026-10-25">October 25, 2026</time></span>
+          <span>5 min read</span>
+        </p>
+      </header>
+      <figure class="gw-article__hero">
+        <img src="assets/article-hero.svg" alt="A drawn product page on a computer and on a phone: the picture, the title, the price and the button side by side" width="1200" height="675" fetchpriority="high">
+      </figure>
+      <nav class="gw-toc" aria-label="On this page" data-gw-toc>
+        <details>
+          <summary>On this page</summary>
+          <ol>
+            <li><a href="#start-from-the-questions">Start from the questions, not the template</a></li>
+            <li><a href="#first-screen">Answer the first question on the first screen</a>
+              <ol>
+                <li><a href="#write-the-title">Write the title for the shopper</a></li>
+                <li><a href="#price-and-button">Keep the price and the button together</a></li>
+              </ol>
+            </li>
+            <li><a href="#photos">Show the product the way it is used</a></li>
+            <li><a href="#shipping-and-returns">Put shipping and returns where the decision happens</a></li>
+            <li><a href="#reviews">Let buyers speak for the product</a></li>
+            <li><a href="#check-on-a-phone">Check the page on a phone</a></li>
+            <li><a href="#faq">Frequently asked questions</a></li>
+          </ol>
+        </details>
+      </nav>
+      <div class="gw-prose">
+        <p>A shopper who lands on a product page has a handful of questions, and they ask them in roughly the same order: what is it, what does it cost, will it suit me, when will it arrive, and can I send it back. A page that answers them in that order, without making anyone hunt, feels easy to buy from.</p>
+        <p>This guide walks through each question, where its answer belongs on the page, and how to check the result on a phone, where many shoppers see the page first.</p>
+        <h2 id="start-from-the-questions">Start from the questions, not the template</h2>
+        <p>Before you move a single section, write down the questions a first-time visitor asks about this product. Ask the people who answer your support email: they hear them every day. Then sort the list by when each question comes up, from the first glance to the moment before checkout.</p>
+        <ul>
+          <li>What is it, and what is it for?</li>
+          <li>What does it cost, with shipping?</li>
+          <li>Will it fit me, my skin, my space?</li>
+          <li>When will it arrive, and can I return it?</li>
+          <li>Do people like me use it, and are they happy with it?</li>
+        </ul>
+        <div class="gw-callout gw-callout--note" role="note">
+          <p class="gw-callout__label">Note</p>
+          <p>This guide is about the product page itself. The ad, email or search result that brings a visitor there sets what they expect, so make its promise and the page's first screen say the same thing.</p>
+        </div>
+        <h2 id="first-screen">Answer the first question on the first screen</h2>
+        <p>The first screen of a product page, before any scrolling, has three jobs: name the product, show it, and give the price next to the button that buys it. Everything else can wait for the scroll.</p>
+        <h3 id="write-the-title">Write the title for the shopper</h3>
+        <p>Use the words a shopper would type into a search box, not an internal code or the name of a collection. When the product comes in sizes or colours, the title names the product and the options sit under it.</p>
+        <h3 id="price-and-button">Keep the price and the button together</h3>
+        <p>A price that sits far from the button makes people scroll back up to check it. Put the price, any discount and the main action in one block, and keep one main action on the page: <a href="https://gemboss.ai/blog/how-to-choose-shopify-theme">a theme that puts them together</a> saves you from fighting it.</p>
+        <h2 id="photos">Show the product the way it is used</h2>
+        <p>Photos answer the question of fit faster than any sentence. Lead with a clear picture of the product on a plain ground, then show it in use, at its real size next to something familiar, and close up on the details people ask about: the fabric, the label, the inside of the lid.</p>
+        <p>Every image needs alt text that says what it shows, for people who use a screen reader and for the moments when an image does not load.</p>
+        <h2 id="shipping-and-returns">Put shipping and returns where the decision happens</h2>
+        <p>Delivery time and the return policy are part of the price. When they hide in the footer, a careful shopper leaves the page to look for them, and some do not come back. Answer each in a sentence next to the button, and link to the full policy.</p>
+        <table>
+          <caption>Where each answer goes on a product page</caption>
+          <thead><tr><th scope="col">The shopper asks</th><th scope="col">Answer it with</th><th scope="col">Where it goes</th></tr></thead>
+          <tbody>
+            <tr><th scope="row">What is it?</th><td>A title in the shopper's words and one line on what it does</td><td>The first screen</td></tr>
+            <tr><th scope="row">What does it cost?</th><td>The price, and both prices when there is a discount</td><td>Next to the main action</td></tr>
+            <tr><th scope="row">Will it fit me?</th><td>Sizes, dimensions and a size guide</td><td>Under the options</td></tr>
+            <tr><th scope="row">When will it arrive?</th><td>The delivery time to the shopper's country</td><td>Next to the main action</td></tr>
+            <tr><th scope="row">Can I send it back?</th><td>The return window, and who pays for the postage</td><td>Next to the main action, and in the FAQ</td></tr>
+            <tr><th scope="row">Is it any good?</th><td>Reviews from people who bought it</td><td>After the description</td></tr>
+          </tbody>
+        </table>
+        <h2 id="reviews">Let buyers speak for the product</h2>
+        <p>Reviews answer the last question: are people like me happy with it? Show the overall rating near the title and the reviews themselves after the description, newest first, with the critical ones left in. A page with only five-star reviews reads as edited.</p>
+        <div class="gw-callout gw-callout--warning" role="note">
+          <p class="gw-callout__label">Warning</p>
+          <p>Never write reviews yourself, pay for good ones or copy them from another store. Made-up reviews mislead shoppers, consumer rules in many countries forbid them, and one that is found out makes every other review on the page doubtful.</p>
+        </div>
+        <h2 id="check-on-a-phone">Check the page on a phone</h2>
+        <p>Open the page on your own phone, on mobile data rather than the office wifi, and buy the product as a stranger would. Note every place where you had to pinch, scroll back or wait.</p>
+        <ol>
+          <li>Is the price next to the button on the first screen?</li>
+          <li>Can you choose a size or a colour with your thumb, without zooming?</li>
+          <li>Do the photos load before you lose patience?</li>
+          <li>Can you find the return policy without leaving the page?</li>
+        </ol>
+        <div class="gw-callout gw-callout--tip" role="note">
+          <p class="gw-callout__label">Tip</p>
+          <p>Ask someone who has never seen the product to find the delivery time and the return window while you watch, without helping. Where they hesitate is where the page needs a clearer answer.</p>
+        </div>
+        <h2 id="faq">Frequently asked questions</h2>
+        <div class="gw-faq">
+          <details class="gw-faq__item">
+            <summary>How long should a product description be?</summary>
+            <p>Long enough to answer the questions on your list, and no longer. Lead with what the product does for the shopper, then give the details in short paragraphs or a list, so a reader can stop as soon as they have their answer.</p>
+          </details>
+          <details class="gw-faq__item">
+            <summary>Should every variant have its own page?</summary>
+            <p>Usually not. One page with the options as choices keeps the reviews and the questions in one place. A page of its own makes sense when a variant is bought for a different reason, or by a different person.</p>
+          </details>
+          <details class="gw-faq__item">
+            <summary>Where does the size guide go?</summary>
+            <p>Next to the size choice, as a link that opens the guide without leaving the page. A guide that only lives on a page of its own is one more reason to leave.</p>
+          </details>
+        </div>
+      </div>
+    </article>
+    <!-- more from the blog: a post list -->
+    <section class="gw-section gw-section--soft" aria-labelledby="more-h">
+      <div class="gw-wrap">
+        <div class="gw-section__head">
+          <p class="gw-label">Blog</p>
+          <h2 id="more-h">More from the blog</h2>
+        </div>
+        <ul class="gw-post-list" role="list">
+          <li>
+            <article class="gw-card gw-post">
+              <div class="gw-card__media"><img src="assets/post-theme.svg" alt="" width="640" height="360" loading="lazy"></div>
+              <p class="gw-label">Themes</p>
+              <h3 class="gw-post__title"><a href="https://gemboss.ai/blog/how-to-choose-shopify-theme">How to choose a Shopify theme that converts</a></h3>
+              <p>A checklist for choosing a theme: speed, mobile, features and fit, from free to premium to AI-built.</p>
+              <p class="gw-article-meta"><span><time datetime="2026-08-08">Aug 8, 2026</time></span><span>8 min read</span></p>
+            </article>
+          </li>
+          <li>
+            <article class="gw-card gw-post">
+              <div class="gw-card__media"><img src="assets/post-headless.svg" alt="" width="640" height="360" loading="lazy"></div>
+              <p class="gw-label">Headless</p>
+              <h3 class="gw-post__title"><a href="https://gemboss.ai/blog/headless-shopify-vs-liquid">Headless Shopify vs Liquid themes</a></h3>
+              <p>The speed, cost and control tradeoffs, and when a Liquid theme is the smarter choice.</p>
+              <p class="gw-article-meta"><span><time datetime="2026-08-08">Aug 8, 2026</time></span><span>10 min read</span></p>
+            </article>
+          </li>
+          <li>
+            <article class="gw-card gw-post">
+              <div class="gw-card__media"><img src="assets/post-voice.svg" alt="" width="640" height="360" loading="lazy"></div>
+              <p class="gw-label">Product</p>
+              <h3 class="gw-post__title"><a href="https://gemboss.ai/blog/brand-voice-copy">Copy that sounds like your brand</a></h3>
+              <p>How GemBoss writes section copy in your brand's captured voice, and writes each language natively instead of translating English.</p>
+              <p class="gw-article-meta"><span><time datetime="2026-07-21">Jul 21, 2026</time></span><span>6 min read</span></p>
+            </article>
+          </li>
+        </ul>
+      </div>
+    </section>
+  </main>
+  <footer class="gw-footer">
+    <div class="gw-wrap">
+      <div class="gw-footer__grid">
+        <div class="gw-footer__brand">
+          <a class="gw-brand" href="https://gemboss.ai/"><svg class="gw-brand__mark" viewBox="0 0 100 116" aria-hidden="true"><polygon points="26,14 74,14 66,50 34,50" style="fill:var(--gw-accent)"/><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="currentColor" stroke-width="9" stroke-linejoin="round"/><path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="currentColor" stroke-width="5.6" stroke-linejoin="round"/></svg><span class="gw-brand__name">GemBoss</span></a>
+          <p>The AI Conversion Engine for Shopify. Build a brand-true store, ship it blazing fast, and see what to change to sell more.</p>
+        </div>
+        <nav class="gw-footer__col" aria-label="Product">
+          <h2 class="gw-footer__heading">Product</h2>
+          <ul>
+            <li><a href="https://gemboss.ai/funnel">Funnel builder</a></li>
+            <li><a href="https://gemboss.ai/ai-store-builder">Storefront builder</a></li>
+            <li><a href="https://gemboss.ai/gemx">Tests &amp; personalization</a></li>
+            <li><a href="https://gemboss.ai/gemoffers">Offers &amp; upsells</a></li>
+            <li><a href="https://gemboss.ai/integrations">Integrations</a></li>
+            <li><a href="https://gemboss.ai/pricing">Pricing</a></li>
+          </ul>
+        </nav>
+        <nav class="gw-footer__col" aria-label="Use cases">
+          <h2 class="gw-footer__heading">Use cases</h2>
+          <ul>
+            <li><a href="https://gemboss.ai/meta-ads">Meta, Google &amp; TikTok ads</a></li>
+            <li><a href="https://gemboss.ai/klaviyo-personalized-landing-pages">Klaviyo landing pages</a></li>
+            <li><a href="https://gemboss.ai/affiliate-landing-pages">Affiliate pages</a></li>
+            <li><a href="https://gemboss.ai/agent-ready">AI agents &amp; AI search</a></li>
+          </ul>
+        </nav>
+        <nav class="gw-footer__col" aria-label="Resources">
+          <h2 class="gw-footer__heading">Resources</h2>
+          <ul>
+            <li><a href="https://gemboss.ai/audit">Free store audit</a></li>
+            <li><a href="https://gemboss.ai/blog">Blog</a></li>
+            <li><a href="https://gemboss.ai/docs">Docs</a></li>
+            <li><a href="https://gemboss.ai/mcp">MCP for AI agents</a></li>
+            <li><a href="https://feedback.gemboss.ai/changelog" rel="noopener">Changelog</a></li>
+          </ul>
+        </nav>
+        <nav class="gw-footer__col" aria-label="Company">
+          <h2 class="gw-footer__heading">Company</h2>
+          <ul>
+            <li><a href="https://gemboss.ai/company">About</a></li>
+            <li><a href="https://gemboss.ai/careers">Careers</a></li>
+            <li><a href="https://gemboss.ai/partners">Partners</a></li>
+            <li><a href="https://gemboss.ai/contact">Contact</a></li>
+          </ul>
+        </nav>
+      </div>
+      <div class="gw-footer__bottom">
+        <span>© 2026 GemBoss. All rights reserved.</span>
+        <ul aria-label="Legal">
+          <li><a href="https://gemboss.ai/privacy">Privacy</a></li>
+          <li><a href="https://gemboss.ai/terms">Terms</a></li>
+        </ul>
+        <ul aria-label="Social">
+          <li><a href="https://www.linkedin.com/company/gempages" rel="noopener">LinkedIn</a></li>
+          <li><a href="https://x.com/gempages" rel="noopener">X</a></li>
+        </ul>
+      </div>
+    </div>
+  </footer>
+  <script src="../js/website.js" defer></script>
+</body>
+</html>

package/demo/assets/article-hero.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 675" width="1200" height="675" role="img" aria-label="A product page on a computer and on a phone"><title>A product page on a computer and on a phone</title><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#7c8af7"/><stop offset="1" stop-color="#43b0ff"/></linearGradient></defs><rect width="1200" height="675" fill="#f2f3f5"/><rect x="120" y="96" width="760" height="480" rx="16" fill="#ffffff" stroke="#e5e7ea" stroke-width="2"/><path d="M120 152h760" stroke="#e5e7ea" stroke-width="2"/><circle cx="152" cy="124" r="7" fill="#d5d8dd"/><circle cx="176" cy="124" r="7" fill="#d5d8dd"/><circle cx="200" cy="124" r="7" fill="#d5d8dd"/><rect x="160" y="192" width="340" height="344" rx="12" fill="url(#g)"/><circle cx="330" cy="352" r="72" fill="#ffffff" opacity=".35"/><rect x="536" y="200" width="300" height="22" rx="6" fill="#1b1c1e"/><rect x="536" y="236" width="220" height="22" rx="6" fill="#1b1c1e"/><rect x="536" y="284" width="120" height="16" rx="5" fill="#d5d8dd"/><rect x="536" y="324" width="300" height="12" rx="4" fill="#e5e7ea"/><rect x="536" y="346" width="280" height="12" rx="4" fill="#e5e7ea"/><rect x="536" y="368" width="240" height="12" rx="4" fill="#e5e7ea"/><rect x="536" y="412" width="300" height="48" rx="8" fill="#1b1c1e"/><rect x="636" y="430" width="100" height="12" rx="4" fill="#ffffff"/><rect x="536" y="476" width="300" height="40" rx="8" fill="#ffffff" stroke="#d5d8dd" stroke-width="2"/><rect x="840" y="168" width="240" height="440" rx="32" fill="#1b1c1e"/><rect x="852" y="180" width="216" height="416" rx="22" fill="#ffffff"/><rect x="868" y="208" width="184" height="150" rx="10" fill="url(#g)"/><rect x="868" y="376" width="160" height="14" rx="5" fill="#1b1c1e"/><rect x="868" y="400" width="90" height="12" rx="4" fill="#d5d8dd"/><rect x="868" y="428" width="184" height="9" rx="4" fill="#e5e7ea"/><rect x="868" y="445" width="160" height="9" rx="4" fill="#e5e7ea"/><rect x="868" y="536" width="184" height="40" rx="8" fill="#1b1c1e"/></svg>

package/demo/assets/avatar-gemboss.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48" role="img" aria-label="GemBoss"><title>GemBoss</title><rect width="48" height="48" fill="#1b1c1e"/><g transform="translate(9 7) scale(.3)"><polygon points="26,14 74,14 66,50 34,50" fill="#5661f5"/><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="#ffffff" stroke-width="9" stroke-linejoin="round"/><path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="#ffffff" stroke-width="5.6" stroke-linejoin="round"/></g></svg>

package/demo/assets/avatar-sample.svg ADDED Viewed

	@@ -0,0 +1 @@
1	+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48"><rect width="48" height="48" fill="#e5e7ea"/><circle cx="24" cy="19" r="8" fill="#9a9ca6"/><path d="M9 44c1.6-8.4 7.8-13 15-13s13.4 4.6 15 13z" fill="#9a9ca6"/></svg>

package/demo/assets/post-headless.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360" width="640" height="360" role="img" aria-label="Two storefront set-ups compared"><title>Two storefront set-ups compared</title><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#e3f1df"/><stop offset="1" stop-color="#e9ecff"/></linearGradient></defs><rect width="640" height="360" fill="url(#g)"/><rect x="72" y="72" width="236" height="216" rx="12" fill="#ffffff"/><rect x="332" y="72" width="236" height="216" rx="12" fill="#ffffff"/><rect x="96" y="100" width="140" height="14" rx="5" fill="#1b1c1e"/><rect x="356" y="100" width="140" height="14" rx="5" fill="#1b1c1e"/><rect x="96" y="136" width="180" height="10" rx="4" fill="#d5d8dd"/><rect x="96" y="162" width="156" height="10" rx="4" fill="#d5d8dd"/><rect x="96" y="188" width="132" height="10" rx="4" fill="#d5d8dd"/><rect x="96" y="214" width="108" height="10" rx="4" fill="#d5d8dd"/><rect x="96" y="240" width="84" height="10" rx="4" fill="#d5d8dd"/><rect x="356" y="136" width="180" height="10" rx="4" fill="#d5d8dd"/><rect x="356" y="162" width="156" height="10" rx="4" fill="#d5d8dd"/><rect x="356" y="188" width="132" height="10" rx="4" fill="#d5d8dd"/><rect x="356" y="214" width="108" height="10" rx="4" fill="#d5d8dd"/><rect x="356" y="240" width="84" height="10" rx="4" fill="#d5d8dd"/></svg>

package/demo/assets/post-motion.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360" width="640" height="360" role="img" aria-label="Lines that ease in and out"><title>Lines that ease in and out</title><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#e9ecff"/><stop offset="1" stop-color="#ffe9e5"/></linearGradient></defs><rect width="640" height="360" fill="url(#g)"/><rect x="96" y="64" width="448" height="232" rx="12" fill="#ffffff"/><path d="M128 220c48-64 96-64 144 0s96 64 144 0 64-48 96-32" fill="none" stroke="#e9ecff" stroke-width="10" stroke-linecap="round"/><path d="M128 250c48-40 96-40 144 0s96 40 144 0" fill="none" stroke="#d5d8dd" stroke-width="6" stroke-linecap="round"/><rect x="128" y="96" width="160" height="16" rx="5" fill="#1b1c1e"/></svg>

package/demo/assets/post-output.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360" width="640" height="360" role="img" aria-label="A store page on a phone"><title>A store page on a phone</title><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#efe9ff"/><stop offset="1" stop-color="#e3f1df"/></linearGradient></defs><rect width="640" height="360" fill="url(#g)"/><rect x="232" y="36" width="176" height="300" rx="26" fill="#1b1c1e"/><rect x="242" y="46" width="156" height="280" rx="18" fill="#ffffff"/><rect x="256" y="66" width="128" height="100" rx="8" fill="#f2f3f5"/><rect x="256" y="180" width="110" height="12" rx="4" fill="#1b1c1e"/><rect x="256" y="200" width="80" height="10" rx="4" fill="#d5d8dd"/><rect x="256" y="280" width="128" height="30" rx="7" fill="#1b1c1e"/></svg>

package/demo/assets/post-speed.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360" width="640" height="360" role="img" aria-label="A bar chart that rises"><title>A bar chart that rises</title><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#d9f0ff"/><stop offset="1" stop-color="#e3f1df"/></linearGradient></defs><rect width="640" height="360" fill="url(#g)"/><rect x="96" y="64" width="448" height="232" rx="12" fill="#ffffff"/><rect x="136" y="188" width="36" height="60" rx="6" fill="#d9f0ff"/><rect x="200" y="152" width="36" height="96" rx="6" fill="#d9f0ff"/><rect x="264" y="176" width="36" height="72" rx="6" fill="#d9f0ff"/><rect x="328" y="116" width="36" height="132" rx="6" fill="#d9f0ff"/><rect x="392" y="140" width="36" height="108" rx="6" fill="#d9f0ff"/><rect x="456" y="88" width="36" height="160" rx="6" fill="#d9f0ff"/><path d="M128 256h384" stroke="#d5d8dd" stroke-width="2"/></svg>

package/demo/assets/post-theme.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360" width="640" height="360" role="img" aria-label="Three theme previews side by side"><title>Three theme previews side by side</title><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#e9ecff"/><stop offset="1" stop-color="#d9f0ff"/></linearGradient></defs><rect width="640" height="360" fill="url(#g)"/><rect x="96" y="64" width="448" height="232" rx="12" fill="#ffffff"/><rect x="120" y="96" width="120" height="96" rx="8" fill="#f2f3f5"/><rect x="120" y="208" width="96" height="12" rx="4" fill="#1b1c1e"/><rect x="120" y="230" width="72" height="10" rx="4" fill="#d5d8dd"/><rect x="260" y="96" width="120" height="96" rx="8" fill="#f2f3f5"/><rect x="260" y="208" width="96" height="12" rx="4" fill="#1b1c1e"/><rect x="260" y="230" width="72" height="10" rx="4" fill="#d5d8dd"/><rect x="400" y="96" width="120" height="96" rx="8" fill="#f2f3f5"/><rect x="400" y="208" width="96" height="12" rx="4" fill="#1b1c1e"/><rect x="400" y="230" width="72" height="10" rx="4" fill="#d5d8dd"/></svg>

package/demo/assets/post-voice.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360" width="640" height="360" role="img" aria-label="A page of written copy"><title>A page of written copy</title><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#ffe9e5"/><stop offset="1" stop-color="#efe9ff"/></linearGradient></defs><rect width="640" height="360" fill="url(#g)"/><rect x="120" y="56" width="400" height="248" rx="12" fill="#ffffff"/><rect x="152" y="92" width="220" height="18" rx="6" fill="#1b1c1e"/><rect x="152" y="132" width="336" height="10" rx="4" fill="#e5e7ea"/><rect x="152" y="158" width="288" height="10" rx="4" fill="#e5e7ea"/><rect x="152" y="184" width="240" height="10" rx="4" fill="#e5e7ea"/><rect x="152" y="210" width="336" height="10" rx="4" fill="#e5e7ea"/><rect x="152" y="236" width="288" height="10" rx="4" fill="#e5e7ea"/><rect x="152" y="262" width="240" height="10" rx="4" fill="#e5e7ea"/></svg>