Static Storefront / Affiliate Shop

An affiliate shop is still a pure static site, so the setup is identical to the AI-monetisation scenario: one lightweight server, one resolved domain, and Nginx or a hosting panel running the site.

If you have already done this step in another scenario, skip ahead.

How it differs from a blog: a storefront has lots of outbound link redirects and event tracking. You don't need much bandwidth, but registering the domain is worth it — domestic access is faster, and some affiliate dashboards require a filed site.

The scripts for buying a server, adding an A record and installing the panel are shared with the other scenarios; copy them as-is.

The fastest way to kill a storefront isn't code, it's product selection: a store that sells everything sells nothing.

Choose a narrow vertical: e.g. "ergonomic chairs for programmers", "lightweight camping gear", "cat supplies". A narrow niche has less competition, converts better, and is easier for search engines to read as a topical site.

Get the commission model straight:

• Physical goods usually run through Taobao Alliance (Taobaoke) / JD Alliance / Pinduoduo Duo Duo Jin Bao; commission ranges from a few percent to tens of percent, and higher-priced categories pay more per order.
• Commission settles on "order completed and past the refund window", typically a ~15-day lock period — don't expect money the moment someone orders.
• The same product has very different commission rates across channels — compare before you list.

Compliance red lines (remember these now):

• No false advertising, no absolute claims like "best" or "no.1" (they violate advertising law).
• No share-for-rebate incentives, no fake self-orders to farm commission.

This step is all judgement, no code. Get the judgement right and every page earns for you later.

The lifeline of a storefront is link-building — turning a plain product into a link that carries your promotion-slot ID so orders credit you.

Main entry points:

1. Taobao Alliance (Taobaoke): the affiliate dashboard — real-name verify + bind your site, then create a promotion slot to get a PID (like mm_123456_7890_101112).
2. JD Alliance: union.jd.com, similar flow, decent commission in 3C/appliance categories.
3. Duo Duo Jin Bao: Pinduoduo's official CPS — low order value but high volume.

How to build links (the static-site trade-off):

• The official APIs can build links, but they need appkey+secret, and you must never put the secret in the frontend — one F12 exposes it all.
• The safe static approach: build links by hand in the dashboard, then put the final PID link together with the product title, image and price into your own products.json. Users click links you already built.
• Only at scale should you add a low-cost server or cloud function as a "link-building middle layer" so the frontend calls your own endpoint and the secret stays server-side.

Separate promotion slots by category: use different PIDs for different pages/categories so you can later see, in the affiliate dashboard, which page and which category actually sells.

The data source of a storefront is the data/products.json you maintain by hand. The tidier the structure, the easier the rendering and the tracking.

Suggested shape:

{
  "categories": [
    {
      "name": "Ergonomic chairs",
      "items": [
        {
          "name": "Brand X mesh chair",
          "image": "https://…/a.jpg",
          "price": "899",
          "commission": "~8%",
          "url": "https://your-built-PID-link",
          "desc": "No back pain sitting all day, great for coding",
          "platform": "tb"
        }
      ]
    }
  ]
}

Fields every product must have:

• name / image / price: the card's three essentials.
• url: an already-built affiliate link, not a bare product page.
• commission: shown as "~x%" for readers, and your own earnings estimate.
• platform: tb/jd/pdd, so the frontend can badge it.

About product images (important):
Main images live on the marketplace's CDN, and hot-linking them is usually blocked by hotlink protection (the image won't show, or the page errors). The safe move: download the images you need, upload them to your own image bed / object storage, and point image there. This is the reverse use of the "hotlink protection" FAQ entry on this site.

JSON must be strictly valid — run it through jsonlint after editing; one missing comma whites out the whole site.

The frontend just renders products.json into a card feed. The logic is nearly identical to the link-directory scenario — reuse it.

Page essentials:

• Card grid: each card = product image + name + price + platform badge + commission / "View" button. Use loading="lazy" on images, rounded cards + a subtle hover.
• Category tabs: a row of tabs at the top; clicking one renders only that category.
• Search box: fuzzy-match product name / description in the frontend — storefront users come to find things, so search is mandatory.
• Open in a new tab: every product link uses target="_blank" rel="sponsored noopener" — sponsored tells search engines it's a paid link and passes no rank, which is compliant.

Don't hand-write the rendering; reuse this site's card pattern: main.js already turns JSON into cards — you're just swapping the data source from steps to products.

Mobile first: most storefront traffic is on phones, so one- or two-column cards must look right on small screens, with tap targets at least 44px.

A storefront's core asset isn't the pages — it's knowing "which slot sold". Without tracking you have no idea where to add picks or which page to cut.

Track at least these three events:

• item_click: a user clicked a product card (record product name, its category, platform).
• cat_view: a category page / list was viewed.
• search: what was searched but not found (that's your next batch of product picks).

How to track on a pure static site?
This site ships conversion.js for event reporting. Bind a click handler on the product card and call the report function to fire item_click; the data lands in your own analytics endpoint / affiliate dashboard.

Reconcile with the affiliate dashboard:

• Your own item_click count should be ≥ the dashboard's "referred visitors"; a big gap means lost redirects or a hotlink-blocking issue.
• Align by category / PID: match the tracked cat against the sales of different promotion slots in the dashboard to see which category truly earns.

Don't over-track: collect no personally identifiable info; pure frontend events are enough and stay within this site's "no database, no user privacy" boundary.

A storefront has compliance requirements ordinary sites don't — handle those before launch.

Affiliate disclosure (mandatory):

• Put a clear line in the footer: this site contains affiliate product links; when you buy through them the site may earn a commission, at no extra cost to you.
• Mark affiliate links uniformly with rel="sponsored", consistent with this site's stance of "keep promos restrained and disclose in the footer".

Content compliance:

• Copy must not use absolute claims like "best / no.1 / lowest on the web".
• Prices and commission change; note "subject to the actual figure on the marketplace" to avoid misleading readers.

The launch trio (same as other scenarios):

1. HTTPS: panel → SSL → Let's Encrypt, tick force-HTTPS.
2. Indexing: write sitemap.xml and robots.txt, submit to webmaster platforms; make category pages static and indexable, not rendered only in JS.
3. Backup: products.json is your core asset — back it up weekly to object storage; re-curating picks after a loss is very time-consuming.

After launch, review tracking and the dashboard's sales weekly: cut zero-click categories, push more effort into the ones that sell — a storefront is farmed over time, not finished in one go.