Jovenca - 现代珠宝店 HTML 模板 preview 1

Jovenca - 现代珠宝店 HTML 模板

bookmark

Jovenca 是一套现代珠宝电商 HTML 模板,适合搭建在线首饰商店。包含完整的首页、商品列表/详情、购物车、结账、博客、FAQ 等页面模板,基于 Bootstrap 5 构建,响应式布局,开箱即用。

HTMLcleandokanecommerceelectronicsfashionfurniturejewelry

项目简介

Jovenca 是一套现代珠宝电商 HTML 模板,适合搭建在线首饰商店。包含完整的首页、商品列表/详情、购物车、结账、博客、FAQ 等页面模板,基于 Bootstrap 5 构建,响应式布局,开箱即用。

技术栈

  • Bootstrap v5.3.1
  • SCSS(源码有 scss/ 目录)
  • jQuery(通过 Google CDN 引入)
  • 字体:Jost(本地 TTF 字体,完整字重覆盖)

项目结构

text
jovencahtml-10/
├── Documentation/          # 官方文档
│   ├── index.html
│   └── assets/css/js/
├── Jovenca/               # 主模板目录
│   ├── home.html          # 首页
│   ├── shop-accordion.html    # 手风琴式商品页
│   ├── shop-right-sidebar.html # 右侧边栏商品页
│   ├── blog-grid.html
│   ├── blog-single.html
│   ├── cart-page.html
│   ├── checkout-page.html
│   ├── contact-us.html
│   ├── about-us.html
│   ├── faq.html
│   ├── style.css          # 主样式
│   ├── css/               # Bootstrap 及插件样式
│   ├── js/
│   ├── fonts/             # Jost & icomoon 字体
│   ├── images/
│   └── scss/              # SCSS 源码(可选)

核心文件说明

  • Jovenca/home.html — 商城首页入口
  • Jovenca/shop-accordion.html — 手风琴布局商品展示页
  • Jovenca/cart-page.html — 购物车页面
  • Jovenca/checkout-page.html — 结账流程页面
  • Jovenca/style.css — 主题主样式,含 Jost 字体定义与全局配色(#222 深色主题)
  • Jovenca/css/bootstrap.css — Bootstrap 5 框架样式

快速开始

直接用浏览器打开 Jovenca/home.html 即可预览完整模板。如需本地服务器,可使用任意静态服务器:

bash
# Python
python -m http.server 8000

# Node.js (npx)
npx serve Jovenca

使用建议

该模板已包含完整的 SCSS 源码(scss/ 目录),如需修改主题色或样式,推荐编辑 SCSS 后重新编译,而非直接改动 style.css,以提高维护效率。

help_outline

常见问题