Documentation

Getting started

To run the project you need Node.js 18 or higher and npm.

Verify Node

node --version    # should say v18.x.x or higher
npm  --version

Installation

1. Unzip the package into a folder without spaces or special characters in the path. Windows tip: use C:\dev\mystore instead of C:\Users\...\Desktop\My Store.
2. Open a terminal in that folder.
3. Run npm install (1–3 minutes the first time).
4. Run npm run dev and your browser opens at http://localhost:3000.

Project structure

You only work in the src/ folder. The dist/ folder is generated automatically.

fundev-package/
├── package.json              ← dependencies and scripts
├── package-lock.json         ← exact versions (DO NOT delete)
├── gulpfile.js               ← build pipeline
├── README.md                 ← short read
├── src/                      ← YOU WORK HERE
│   ├── assets/
│   │   ├── images/           ← your client images
│   │   ├── js/
│   │   │   ├── main.js
│   │   │   └── modules/      ← logic per feature
│   │   └── scss/
│   │       ├── main.scss     ← entry SCSS
│   │       ├── abstracts/    ← variables and mixins
│   │       ├── base/         ← reset, typography, design tokens
│   │       ├── themes/       ← _fashion, _furniture, _electronics
│   │       ├── layout/       ← header, footer, page-hero
│   │       ├── components/   ← buttons, cards, drawer, search
│   │       └── pages/        ← styles per page
│   └── views/
│       ├── *.njk             ← one page = one file
│       ├── _layouts/         ← master layout
│       ├── _partials/        ← header, footer, drawers
│       ├── _macros/          ← SVG icons, productCard
│       └── _data/
│           ├── site.json         ← ★ global configuration
│           ├── locales.json      ← ★ countries presets
│           ├── navigation.json   ← ★ menu and footer
│           ├── products.json     ← ★ catalog
│           ├── home-content.json ← ★ home editorial copy
│           └── i18n.json         ← UI strings dictionary
└── dist/                     ← generated by npm run build

Commands

Site configuration

The file src/views/_data/site.json controls name, logo, language, contact, and other global options.

{
  "name":     "Your Store",
  "tagline":  "Your slogan",
  "lang":     "en",
  "theme":    "fashion",            ← "fashion" | "furniture" | "electronics"
  "country":  "US",                 ← "US" | "MX" | "CA" | "GB" | "ES" | "AR" | "CO"
  "url":      "https://yourstore.com",

  "brand": {
    "logoText": "YourStore",
    "logoMark": "✦"
  },

  "contact": {
    "email": "hello@yourstore.com",
    "phone": "+1 555 123 4567",
    "city":  "New York, NY"
  },

  "license": {
    "type":         "frontend",     ← "frontend" or "premium"
    "buyer":        "Your Company",
    "purchaseDate": "2025-01-15",
    "createdBy":    "FunDev Studio",
    "createdByUrl": "https://fundevstudio.com"
  },

  "build": {
    "version": "1.0.0",
    "showThemeSwitcher":  true,     ← ⚠️ set to false in production
    "showPremiumBanner":  true      ← ⚠️ set to false if you have Premium
  }
}

Country & currency

The template adapts automatically to 7 country presets. Set "country" in site.json and the currency, locale, postal code format, free-shipping threshold, and state list update.

The presets live in src/views/_data/locales.json. To add a new country, add an entry there with currency, states, postal pattern, and shipping rates.

The 3 themes

The template ships with 3 finished aesthetics. To switch between them, edit theme in site.json.

The demo switcher (runtime theme change)

When showThemeSwitcher is on, a "Fashion · Furniture · Electronics" picker appears at the bottom right. On click, not only colors and typography change — visible products, menu items, categories, hero/editorial/promo copy, and the top announcement change too. All in the same HTML, no reload.

• data-theme-content="path.to.value" — points to a key in home-content.json. JS replaces text, src, or href on the element.
• data-theme-zone="featured|bestsellers|categories" — marks containers whose children are fully regenerated (product grids, category tiles).

Edit content per theme

Home editorial copy (hero, editorial split, promo banner, etc.) lives in src/views/_data/home-content.json, organized by theme. Edit that file to change what the hero, subtitle, or CTAs say without touching HTML.

The main menu per theme lives in navigation.json. Each theme has its own primary[] with category-specific sections (Women/Men for fashion, Living/Dining for furniture, Audio/Computers for electronics).

Product catalog

The file src/views/_data/products.json has one object per theme. Each contains categories and items.

Product structure

{
  "id":          "fa-001",                  ← required, unique
  "name":        "Linen shirt",             ← required
  "category":    "clothing",                ← required, must exist in categories
  "price":       79,                        ← required
  "comparePrice": 99,                       ← optional (price before discount)
  "image":       "https://.../photo.jpg",   ← required
  "variants":    "XS · S · M · L",          ← optional
  "colors":      "Beige · Black · White",   ← optional
  "badge":       "new",                     ← optional: "new" | "sale" | "exclusive" | "bestseller" | null

  "description": "Long product copy…",      ← optional, used in /producto.html
  "features":    ["European linen", "..."], ← optional, bullet list
  "sizes":       ["XS","S","M","L"],        ← optional, override of variants
  "colorOptions": [                         ← optional, override of colors
    { "name": "Beige", "hex": "#d6c4a8" }
  ]
}

Only id, name, category, price, and image are required. The detail page adapts to whatever is present.

Use your own photos

Put your photos in src/assets/images/ and reference them as "image": "assets/images/photo.jpg". Files in src/assets/ are copied to dist/ on build.

Included pages

JavaScript modules

Each feature lives in its own file in src/assets/js/modules/.

Console access

Any exposed module is on window.FD.*. Useful for debugging:

FD.Cart.items()         // see current cart
FD.Cart.clear()         // empty cart
FD.Auth.currentUser()   // see logged-in user
FD.Wishlist.ids()       // see favorites
FD.Api.products.list({ category: 'clothing' })

Style system (SCSS)

Colors, typography, and geometry are controlled via CSS Custom Properties. Everything that changes between themes lives as a CSS variable.

Main variables (in :root)

--fd-color-bg            ← site background
--fd-color-fg            ← primary text
--fd-color-primary       ← brand color
--fd-color-accent        ← accent color (CTAs, sales)
--fd-color-surface       ← raised surfaces (cards)
--fd-color-border        ← borders
--fd-color-muted         ← secondary text

--fd-font-display        ← title type
--fd-font-body           ← body type
--fd-font-mono           ← monospace (prices, SKUs)

--fd-radius-sm/md/lg/xl  ← border radii

--fd-space-1..10         ← spacing scale (4px → 128px)

Change a theme palette

Edit src/assets/scss/themes/_fashion.scss (or whichever theme). The whole site reacts automatically.

Publishing your store

1. Verify site.json has showThemeSwitcher: false and showPremiumBanner: false (if you have Premium).
2. Run npm run build.
3. Upload only the dist/ folder to your hosting.
4. Configure your hosting to serve 404.html on errors.

Hostings that work without setup

• Netlify: drag dist/ to netlify.com/drop.
• Vercel: connect the repo, build command npm run build, output dir dist.
• GitHub Pages: push dist/ contents to the gh-pages branch.
• Hostinger / cPanel: upload dist/ contents to public_html/.

Premium plan

If you need a real backend (database, admin panel, payments, real emails), the Premium plan adds all of that without changing the frontend you already know.

Frequently asked questions