Electronics Store

1440px

Full size

Key Highlights

Tech-focused design

Comparison tools

Deal countdowns

Clean product focus

About this template

Sell electronics and gadgets with this sleek, modern e-commerce template. Features tech-focused design, detailed product specs, comparison tools, and a streamlined checkout. Perfect for electronics retailers, gadget stores, and tech accessories.

What's included

Product catalog

Spec comparisons

Deal countdowns

Quick view

Image gallery

360° view ready

Reviews system

Express checkout

Best for

Electronics RetailersGadget StoresTech AccessoriesPhone Stores

Industries

ElectronicsTechnologyRetail

AI Generation Prompt

Create an electronics e-commerce store:

1. HEADER:
- Clean dark header
- Logo, Search bar (prominent), Cart, Account
- Categories: Phones, Laptops, Audio, Accessories, Deals
- Free shipping banner

2. HERO:
- Featured product showcase (e.g., new phone release)
- Large product image with specs highlights
- Price and "Pre-order Now" CTA
- Countdown for launch (if applicable)

3. CATEGORIES:
- Visual category cards with icons
- Phones, Laptops, Tablets, Audio, Wearables, Accessories

4. FEATURED PRODUCTS:
- Product grid with:
  - Product image (clean, white background)
  - Brand, Name, Key spec (e.g., "128GB")
  - Star rating
  - Price (with sale price if applicable)
  - "Add to Cart" button
  - Quick view on hover

5. DEALS SECTION:
- "Today's Deals" with countdown timers
- Original price crossed out
- Percentage savings badge

6. PRODUCT PAGE:
- Large image gallery with zoom
- 360° view option
- Specs table
- Color/Storage variants
- "Compare" button
- Reviews with verified purchase badge
- "Customers also bought"

7. COMPARISON:
- Side-by-side product comparison
- Specs aligned in rows
- Highlight differences

8. CART & CHECKOUT:
- Clean cart drawer
- Protection plans upsell
- Express checkout (Apple Pay, etc.)

COLORS:
- Background: #ffffff
- Header: #1a1a1a
- Accent: #3b82f6 (blue)
- Sale: #ef4444 (red)

DESIGN:
- Clean, minimal
- Focus on product photography
- Tech-forward aesthetic


RESPONSIVE DESIGN (CRITICAL):
- Mobile-first approach: Design for 375px width first, then scale up
- Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px)
- Touch targets: Minimum 44x44px for all interactive elements
- Navigation: Hamburger menu on mobile, full nav on desktop
- Typography: Scale down headings on mobile (text-2xl → text-lg)
- Spacing: Reduce padding/margins on mobile (p-8 → p-4)
- Images: Use responsive images with srcset, object-fit: cover
- Grid: Stack columns on mobile (grid-cols-1), expand on desktop
- Hide non-essential elements on mobile with hidden md:block
- Test at 375px, 768px, 1024px, and 1440px widths

SEO & AI OPTIMIZATION (CRITICAL FOR DISCOVERABILITY):

1. HTML HEAD REQUIREMENTS:
- <title> tag: Primary keyword first, brand last (max 60 chars)
- <meta name="description"> : Action-oriented, include primary keyword (max 155 chars)
- <link rel="canonical" href="[full-url]">
- <meta name="robots" content="index, follow">
- Open Graph: og:title, og:description, og:image (1200x630), og:url, og:type
- Twitter Card: twitter:card="summary_large_image", twitter:title, twitter:description, twitter:image
- AI crawler discovery links in <head>:
  <link rel="alternate" type="text/markdown" href="[url].md" title="Markdown">
  <link rel="alternate" type="application/ld+json" href="[url].json" title="Structured Data">

2. SEMANTIC HTML STRUCTURE:
- Single <h1> containing primary keyword (first 40-60 words answer the page's main query)
- Logical heading hierarchy: h1 > h2 > h3 (never skip levels)
- Use <main>, <article>, <section>, <nav>, <header>, <footer>, <aside> landmarks
- Each <section> should have an aria-label or heading
- Use <figure> and <figcaption> for images with context

3. JSON-LD STRUCTURED DATA (in <script type="application/ld+json">):
- WebSite schema with SearchAction for site search
- Organization schema with logo, sameAs social links
- BreadcrumbList schema for navigation context
- Match primary schema to content type:
  - Landing pages: WebPage or Product
  - Blogs: Article with author, datePublished, dateModified
  - E-commerce: Product with offers, price, availability
  - FAQ sections: FAQPage schema (critical for AI answer engines)
  - Local business: LocalBusiness with address, hours, geo
  - Events: Event with startDate, location, offers

4. CONTENT STRUCTURE FOR AI CITATION (GEO/AEO):
- First paragraph (40-60 words): Direct answer to page's primary intent
- Use clear, factual language - AI prefers authoritative, non-fluffy content
- Include specific numbers, statistics, dates where relevant
- Each H2 section should stand alone as a complete answer
- Add statistics/facts every 150-200 words (increases citation likelihood)
- FAQ sections: Use consistent ## FAQ heading with ### Question / Answer pattern
- Use <hr> or --- between distinct content sections (helps AI chunking)

5. IMAGES & MEDIA:
- All <img> must have descriptive alt text (not "image" or "photo")
- Use loading="lazy" for below-fold images
- Include width and height attributes to prevent CLS
- Use WebP format with fallback, srcset for responsive
- Add structured data for key images (ImageObject schema)

6. PERFORMANCE (Core Web Vitals):
- Largest Contentful Paint: Hero image/text visible < 2.5s
- Cumulative Layout Shift: Reserve space for images, ads, embeds
- First Input Delay: Minimize JS blocking, defer non-critical scripts
- Use font-display: swap for web fonts
- Preload critical resources: <link rel="preload">

7. ACCESSIBILITY (also helps SEO):
- All interactive elements keyboard accessible
- Focus states visible on all focusable elements
- Color contrast ratio minimum 4.5:1 for text
- aria-label on icon-only buttons
- Skip link to main content

This prompt will be used to generate your project. Feel free to customize it in the builder.