Project Overview

Best Home Gear Reviews is a single-page affiliate website prototype built with static HTML, CSS, and vanilla JS. It's designed as a "trust-first" editorial review site across 4 categories: Kitchen, Home & Outdoor, Gardening, and Pets.

The site is optimized for:

• Affiliate conversions — clear CTAs, comparison tables, verdict boxes
• SEO — semantic HTML, JSON-LD, proper heading hierarchy, silo structure
• Mobile performance — mobile-first CSS, touch-friendly targets, accordion navigation
• Trust & credibility — editorial design, disclosure banners, testing methodology

File Structure

wevsite/
├── index.html            # Main site (all HTML/CSS/JS)
├── guide.html            # This guide
├── CLAUDE.md             # AI assistant instructions
│
└── wp-content/themes/astra-child/   # WordPress migration files
    ├── style.css          # Design system / overrides
    ├── functions.php      # Schema, timestamp, link filters
    ├── js/toc.js          # Table of contents script
    └── blocks/            # Reusable Gutenberg patterns
        ├── comparison-table.html
        ├── verdict-box.html
        ├── pros-cons.html
        └── homepage-template.html

Tech Stack

Design Tokens (CSS Custom Properties)

Colors

Spacing

Border Radius

Component Reference

Product Card (.prod-card)

Used in the comparison grid. The .prod-card--top modifier elevates the #1 pick.

<article class="prod-card prod-card--top">
  <span class="prod-card__badge">★ Best Overall</span>
  <div class="prod-card__rank prod-card__rank--top">...</div>
  <div class="prod-card__img-wrap">...</div>
  <div class="prod-card__body">
    <!-- brand, name, rating, specs, price, CTA -->
  </div>
</article>

Category Card (.cat-card)

Used in category grids. Image area uses modifier classes for colors.

<div class="cat-card">
  <div class="cat-card__img cat-card__img--kitchen">
    <span class="cat-card__tag cat-card__tag--top">Top Pick</span>
    🔪
  </div>
  <div class="cat-card__body">...</div>
</div>

Subcategory Chips (.subcat-chip)

Accordion-toggled chip grid under each category. Auto-expands on desktop.

<a href="/kitchen/food-prep-gadgets" class="subcat-chip">
  <span class="subcat-chip__badge">Popular</span>
  Food Prep Gadgets
  <span class="subcat-chip__arrow">→</span>
</a>

Verdict Box (.verdict-box)

Dual-column layout: "Who It's For" (left) + "The Bottom Line" (right). Stacks on mobile.

Pros/Cons (.pros-cons)

Side-by-side spec sheet with SVG icons. Stacks on mobile.

Responsive Breakpoints

Categories & Subcategories

URL Silo Structure

# Category pillar pages
/kitchen/
/home-outdoor/
/gardening/
/pets/

# Subcategory pages (38 total)
/kitchen/food-prep-gadgets
/kitchen/kitchen-scales-measuring-tools
/kitchen/storage-meal-prep-containers
/kitchen/cookware-bakeware-essentials
/kitchen/coffee-drink-tools
/kitchen/cutting-boards-knife-accessories
/kitchen/air-fryer-small-appliance-accessories
/kitchen/kitchen-organization-tools

/home-outdoor/cleaning-tools-gadgets
/home-outdoor/storage-organization
/home-outdoor/laundry-tools
/home-outdoor/home-safety-maintenance-gadgets
/home-outdoor/bedroom-comfort-essentials
/home-outdoor/patio-cleaning-maintenance-tools
/home-outdoor/outdoor-lighting-solar-gadgets
/home-outdoor/outdoor-storage-utility
/home-outdoor/camping-backyard-utility-tools
/home-outdoor/seasonal-outdoor-essentials

/gardening/hand-tools-for-beginners
/gardening/watering-tools-irrigation
/gardening/pruning-cutting-tools
/gardening/weeding-tools
/gardening/raised-bed-soil-tools
/gardening/plant-support-training
/gardening/seed-starting-indoor-grow
/gardening/garden-storage-tool-organization
/gardening/pest-plant-protection
/gardening/balcony-small-space-gardening

/pets/dog-feeding-watering
/pets/dog-grooming-tools
/pets/dog-walking-gear
/pets/pet-cleaning-odor-control
/pets/cat-litter-litter-box-accessories
/pets/cat-enrichment-toys
/pets/pet-beds-comfort
/pets/travel-car-accessories
/pets/pet-training-aids
/pets/smart-pet-gadgets

How to Add a Product Card

1 Find the .category-grid for the category you want (e.g., Kitchen).

2 Copy an existing .cat-card block.

3 Update the content:

<div class="cat-card">
  <div class="cat-card__img cat-card__img--kitchen">
    <span class="cat-card__tag cat-card__tag--new">New</span>
    🫕  <!-- Replace emoji with product image later -->
  </div>
  <div class="cat-card__body">
    <p class="cat-card__category">YOUR SUBCATEGORY</p>
    <h3 class="cat-card__title">Your Product Title</h3>
    <div class="cat-card__rating">
      <span class="stars">★★★★☆</span>
      <span class="rating-val">4.3</span>
    </div>
    <p class="cat-card__excerpt">Short review summary...</p>
    <a href="/kitchen/your-slug" class="cat-card__link">Read Review →</a>
  </div>
</div>

Tag Variants

• .cat-card__tag--top — Top Pick (orange)
• .cat-card__tag--new — New (green)
• .cat-card__tag--pick — Editor's Pick (navy)

How to Add a Subcategory

1 Find the .subcat-chips list for the target category.

2 Add a new <li> with a chip link:

<li>
  <a href="/kitchen/your-new-subcategory" class="subcat-chip">
    Your New Subcategory
    <span class="subcat-chip__arrow" aria-hidden="true">→</span>
  </a>
</li>

3 Update the count badge in the toggle button:

<span class="subcat-toggle__count">9</span> <!-- was 8, now 9 -->

4 Optional: Add a "Popular" badge to high-intent subcategories:

<span class="subcat-chip__badge">Popular</span>

How to Add a Review Article

The article section lives inside #article-main. To add new content:

1 Add new <h2 id="your-section"> headings — the TOC auto-populates from these.

2 Use the existing comparison table, verdict box, and pros/cons patterns as templates.

3 Update the .article-meta with correct category, author, and date.

How to Edit the Comparison Table

The comparison section is in #section-comparison. Key areas to update:

1. Product names & brands — in .prod-card__brand and .prod-card__name
2. Specs — in .spec-list rows (key/value pairs)
3. Prices — in .prod-card__price
4. CTA links — in .prod-card__cta (update href to real affiliate URL)
5. Verdict text — in .verdict-summary
6. Pros/Cons — in .pc-row elements

Connecting Affiliate Links

All affiliate CTAs currently link to #. To connect real affiliate links:

Find & Replace Pattern

Search for class="prod-card__cta" and class="verdict-cta" — update their href values.

<!-- Before -->
<a href="#" class="prod-card__cta prod-card__cta--primary"
   rel="nofollow sponsored noopener" target="_blank">

<!-- After -->
<a href="https://www.amazon.com/dp/B08HJR9WGX?tag=yourtag-20"
   class="prod-card__cta prod-card__cta--primary"
   rel="nofollow sponsored noopener" target="_blank">

Required Attributes on Every Affiliate Link

Amazon Associates Setup

1 Sign up at affiliate-program.amazon.com

2 Get your tracking tag — it looks like yoursitename-20

3 Build affiliate links using the format:

https://www.amazon.com/dp/PRODUCT_ASIN?tag=yourtag-20

4 Replace placeholder links in index.html

Other Affiliate Networks

Link Tracking & Attribution

Option A: Amazon's Built-in Tracking

Amazon automatically tracks clicks through your ?tag= parameter. View reports in the Associates dashboard.

Option B: UTM Parameters (for analytics)

Add UTM params to track which sections/pages convert best:

https://amazon.com/dp/B08HJR9WGX?tag=yourtag-20&utm_source=besthomegearreviews&utm_medium=comparison&utm_campaign=drills-2025

Option C: Link Management Plugin (WordPress)

When you migrate to WordPress, use Pretty Links or ThirstyAffiliates to:

• Cloak links: besthomegearreviews.com/go/dewalt-drill
• Track clicks per link
• Bulk-update links when URLs change
• Auto-add nofollow attributes

FTC Disclosure Requirements

The site already includes an affiliate disclosure banner above the comparison section. Here's what's required:

1. Visible disclosure — near the first affiliate link on every page (already done)
2. Dedicated disclosure page — linked from footer (create /affiliate-disclosure/)
3. Clear language — "We earn a commission from qualifying purchases" (avoid vague wording)
4. "Sponsored" rel attribute — on all affiliate links (already implemented)

Deploy to Vercel

The site auto-deploys to Vercel when you push to GitHub. Manual steps:

1 Make changes to index.html

2 Commit and push:

git add index.html
git commit -m "Update product links"
git push

3 Vercel auto-deploys within ~60 seconds.

Vercel Settings

Migrate to WordPress

When you're ready to scale beyond a single page:

1 Get hosting — Bluehost, SiteGround, or Cloudways

2 Install WordPress + Astra theme

3 Upload the child theme from wp-content/themes/astra-child/

4 Create pages matching the silo structure:

# WordPress pages to create:
Homepage        → Use homepage-template.html as Gutenberg layout
/kitchen/       → Category pillar page
/kitchen/food-prep-gadgets  → Subcategory page
/kitchen/best-chefs-knives  → Individual review post

5 Install key plugins:

• RankMath / Yoast — SEO (sitemaps, meta, schema)
• ThirstyAffiliates — Link cloaking & tracking
• WP Rocket — Caching & performance
• ShortPixel — Image optimization
• Jepack / MonsterInsights — Analytics

6 Use the child theme files:

• style.css — Design tokens and component styles
• functions.php — JSON-LD schema, "Last Updated" timestamps, affiliate link filter
• blocks/ — Paste into Gutenberg Custom HTML blocks

Custom Domain Setup

1 Buy a domain (Namecheap, Cloudflare, Google Domains)

2 In Vercel: Settings → Domains → Add your domain

3 Add DNS records as Vercel instructs (usually CNAME or A record)

4 Update <link rel="canonical"> and Open Graph URLs in index.html

5 SSL is automatic with Vercel

SEO Launch Checklist

— End of Guide —