Chookoo 产品网站 — 内容填写模板
使用说明
- 本文档列出网站上所有需要填写的内容字段,请逐项填写。
- 所有文字内容需要 中文 和 英文 两个版本。
- 图片请提供源文件,并按要求的尺寸和命名规范提交。
- 填写完成后,将本文档和所有图片一起交给开发人员,我们会直接替换到网站上。
- 标有 必填 的字段为空则网页会显示异常,请务必填写。
一、品牌基础信息
| 编号 |
字段名 |
填写说明 |
必填 |
填写内容(中文) |
填写内容(英文) |
| B1 |
品牌Slogan |
首页顶部标语,不超过15个字 |
是 |
|
|
| B2 |
品牌介绍第1段 |
"关于我们"区域的品牌故事第1段,3-5句话 |
是 |
|
|
| B3 |
品牌介绍第2段 |
品牌故事第2段,3-5句话 |
否 |
|
|
| B4 |
品牌介绍第3段 |
品牌故事第3段,1-2句总结性语句 |
否 |
|
|
| B5 |
品牌理念关键词 |
3-4个关键词,用逗号分隔,如:科技,关爱,智能,守护 |
是 |
|
|
| B6 |
联系电话 |
客服电话号码 |
是 |
|
|
| B7 |
联系邮箱 |
客服邮箱地址 |
是 |
|
|
| B8 |
公司地址 |
公司详细地址 |
是 |
|
|
| B9 |
公司名称 |
用于页脚版权声明 |
是 |
|
|
品牌相关图片
| 编号 |
图片用途 |
尺寸要求 |
格式 |
说明 |
文件名(请使用此命名) |
| BI1 |
网站Logo(导航栏) |
高度不低于 100px,宽度自适应,背景透明 |
PNG |
用于顶部导航栏和关于我们区域,深色背景上要清晰可见 |
logo.png |
| BI2 |
网站Logo(白色版) |
高度不低于 100px,宽度自适应,背景透明 |
PNG |
白色文字版本,用于深色页脚区域 |
白字logo.png |
| BI3 |
首页Hero背景图 |
3640 × 2048 px 或同比例(16:9 横向) |
JPG |
首页顶部全屏背景图,图片会铺满整个屏幕,重要内容请放在中间区域 |
hero.jpeg |
二、轮播图(首页主展示区)
网站首页主展示区有 5张 轮播幻灯片,每张展示一个产品或活动。
请为每张幻灯片填写以下信息。
幻灯片 1
| 编号 |
字段名 |
填写说明 |
必填 |
填写内容(中文) |
填写内容(英文) |
| S1-1 |
幻灯片类型 |
填 product(产品展示)或 activity(活动)或 notice(公告) |
是 |
|
|
| S1-2 |
产品主标题 |
如果类型是product,填产品名称;如果是activity/notice,填活动/公告标题 |
是 |
|
|
| S1-3 |
产品副标题 |
一句话描述产品核心卖点,不超过20字 |
是 |
|
|
| S1-4 |
活动公告内容 |
仅当类型为activity/notice时填写,1-2句详情 |
否 |
|
|
幻灯片1图片:
| 图片用途 |
尺寸要求 |
格式 |
说明 |
文件名 |
| 产品主图 |
800 × 800 px(正方形)或 800 × 1000 px(竖版),背景透明 |
PNG |
产品主体图片,会居中显示在卡片中 |
slide-1-product.png |
| 角标小图(可选) |
200 × 200 px(正方形),背景透明 |
PNG |
右上角圆形小图标,如关联产品缩略图 |
slide-1-badge.png |
幻灯片 2
| 编号 |
字段名 |
填写说明 |
必填 |
填写内容(中文) |
填写内容(英文) |
| S2-1 |
幻灯片类型 |
同上 |
是 |
|
|
| S2-2 |
产品主标题 |
同上 |
是 |
|
|
| S2-3 |
产品副标题 |
同上 |
是 |
|
|
| S2-4 |
活动公告内容 |
同上 |
否 |
|
|
幻灯片2图片:
| 图片用途 |
尺寸要求 |
格式 |
说明 |
文件名 |
| 产品主图 |
同上 |
PNG |
|
slide-2-product.png |
| 角标小图(可选) |
同上 |
PNG |
|
slide-2-badge.png |
幻灯片 3
| 编号 |
字段名 |
填写说明 |
必填 |
填写内容(中文) |
填写内容(英文) |
| S3-1 |
幻灯片类型 |
同上 |
是 |
|
|
| S3-2 |
产品主标题 |
同上 |
是 |
|
|
| S3-3 |
产品副标题 |
同上 |
是 |
|
|
| S3-4 |
活动公告内容 |
同上 |
否 |
|
|
幻灯片3图片:
| 图片用途 |
尺寸要求 |
格式 |
说明 |
文件名 |
| 产品主图 |
同上 |
PNG |
|
slide-3-product.png |
| 角标小图(可选) |
同上 |
PNG |
|
slide-3-badge.png |
幻灯片 4
| 编号 |
字段名 |
填写说明 |
必填 |
填写内容(中文) |
填写内容(英文) |
| S4-1 |
幻灯片类型 |
同上 |
是 |
|
|
| S4-2 |
产品主标题 |
同上 |
是 |
|
|
| S4-3 |
产品副标题 |
同上 |
是 |
|
|
| S4-4 |
活动公告内容 |
同上 |
否 |
|
|
幻灯片4图片:
| 图片用途 |
尺寸要求 |
格式 |
说明 |
文件名 |
| 产品主图 |
同上 |
PNG |
|
slide-4-product.png |
| 角标小图(可选) |
同上 |
PNG |
|
slide-4-badge.png |
幻灯片 5
| 编号 |
字段名 |
填写说明 |
必填 |
填写内容(中文) |
填写内容(英文) |
| S5-1 |
幻灯片类型 |
同上 |
是 |
|
|
| S5-2 |
产品主标题 |
同上 |
是 |
|
|
| S5-3 |
产品副标题 |
同上 |
是 |
|
|
| S5-4 |
活动公告内容 |
同上 |
否 |
|
|
幻灯片5图片:
| 图片用途 |
尺寸要求 |
格式 |
说明 |
文件名 |
| 产品主图 |
同上 |
PNG |
|
slide-5-product.png |
| 角标小图(可选) |
同上 |
PNG |
|
slide-5-badge.png |
三、产品卡片(首页底部产品列表)
首页底部展示 5张 产品卡片,横向排列,可滚动。点击卡片后上方展示区会显示该产品的详细信息。
产品卡片公共图片要求
| 图片用途 |
尺寸要求 |
格式 |
说明 |
| 产品卡片缩略图 |
400 × 400 px(正方形),背景透明 |
PNG |
用于卡片上的小缩略图,会被裁剪显示在 175 × 90 px 的区域内 |
| 产品展示区大图 |
800 × 1000 px(竖版)或 800 × 800 px(正方形),背景透明 |
PNG |
用于点击卡片后在上方展示区显示的大图,会被显示在 400 × 220 px 的区域内 |
产品卡片 1
| 编号 |
字段名 |
填写说明 |
必填 |
填写内容(中文) |
填写内容(英文) |
| C1-1 |
产品ID |
英文唯一标识符,只能用小写字母、数字和连字符,如 cat-toilet-pro |
是 |
|
— |
| C1-2 |
适用宠物 |
填 cat(猫)、dog(狗)或 both(通用) |
是 |
|
— |
| C1-3 |
产品名称 |
卡片上显示的产品名称,不超过8个字 |
是 |
|
|
| C1-4 |
产品副标题 |
卡片上一句话描述,不超过15个字 |
是 |
|
|
| C1-5 |
展示区副标题 |
点击后上方展示区的详细描述,2-3句话 |
是 |
|
|
| C1-6 |
特性1 |
展示区产品特性,每条不超过15字 |
是 |
|
|
| C1-7 |
特性2 |
同上 |
是 |
|
|
| C1-8 |
特性3 |
同上 |
是 |
|
|
| C1-9 |
特性4 |
同上 |
是 |
|
|
| 图片 |
文件名 |
| 卡片缩略图 |
product-1-thumb.png |
| 展示区大图 |
product-1-display.png |
产品卡片 2
| 编号 |
字段名 |
填写说明 |
必填 |
填写内容(中文) |
填写内容(英文) |
| C2-1 |
产品ID |
同上 |
是 |
|
— |
| C2-2 |
适用宠物 |
同上 |
是 |
|
— |
| C2-3 |
产品名称 |
同上 |
是 |
|
|
| C2-4 |
产品副标题 |
同上 |
是 |
|
|
| C2-5 |
展示区副标题 |
同上 |
是 |
|
|
| C2-6 |
特性1 |
同上 |
是 |
|
|
| C2-7 |
特性2 |
同上 |
是 |
|
|
| C2-8 |
特性3 |
同上 |
是 |
|
|
| C2-9 |
特性4 |
同上 |
是 |
|
|
| 图片 |
文件名 |
| 卡片缩略图 |
product-2-thumb.png |
| 展示区大图 |
product-2-display.png |
产品卡片 3
| 编号 |
字段名 |
填写说明 |
必填 |
填写内容(中文) |
填写内容(英文) |
| C3-1 |
产品ID |
同上 |
是 |
|
— |
| C3-2 |
适用宠物 |
同上 |
是 |
|
— |
| C3-3 |
产品名称 |
同上 |
是 |
|
|
| C3-4 |
产品副标题 |
同上 |
是 |
|
|
| C3-5 |
展示区副标题 |
同上 |
是 |
|
|
| C3-6 |
特性1 |
同上 |
是 |
|
|
| C3-7 |
特性2 |
同上 |
是 |
|
|
| C3-8 |
特性3 |
同上 |
是 |
|
|
| C3-9 |
特性4 |
同上 |
是 |
|
|
| 图片 |
文件名 |
| 卡片缩略图 |
product-3-thumb.png |
| 展示区大图 |
product-3-display.png |
产品卡片 4
| 编号 |
字段名 |
填写说明 |
必填 |
填写内容(中文) |
填写内容(英文) |
| C4-1 |
产品ID |
同上 |
是 |
|
— |
| C4-2 |
适用宠物 |
同上 |
是 |
|
— |
| C4-3 |
产品名称 |
同上 |
是 |
|
|
| C4-4 |
产品副标题 |
同上 |
是 |
|
|
| C4-5 |
展示区副标题 |
同上 |
是 |
|
|
| C4-6 |
特性1 |
同上 |
是 |
|
|
| C4-7 |
特性2 |
同上 |
是 |
|
|
| C4-8 |
特性3 |
同上 |
是 |
|
|
| C4-9 |
特性4 |
同上 |
是 |
|
|
| 图片 |
文件名 |
| 卡片缩略图 |
product-4-thumb.png |
| 展示区大图 |
product-4-display.png |
产品卡片 5
| 编号 |
字段名 |
填写说明 |
必填 |
填写内容(中文) |
填写内容(英文) |
| C5-1 |
产品ID |
同上 |
是 |
|
— |
| C5-2 |
适用宠物 |
同上 |
是 |
|
— |
| C5-3 |
产品名称 |
同上 |
是 |
|
|
| C5-4 |
产品副标题 |
同上 |
是 |
|
|
| C5-5 |
展示区副标题 |
同上 |
是 |
|
|
| C5-6 |
特性1 |
同上 |
是 |
|
|
| C5-7 |
特性2 |
同上 |
是 |
|
|
| C5-8 |
特性3 |
同上 |
是 |
|
|
| C5-9 |
特性4 |
同上 |
是 |
|
|
| 图片 |
文件名 |
| 卡片缩略图 |
product-5-thumb.png |
| 展示区大图 |
product-5-display.png |
四、产品详情页
以下信息会显示在点击"了解更多"后跳转的产品详情页。
产品ID必须与上面"产品卡片"中的ID一致。
目前网站支持最多 14个 产品详情页。
每个产品需要填写的内容模板
请复制以下模板,每个产品填一份。
产品:(产品ID:)
基本信息:
| 编号 |
字段名 |
填写说明 |
必填 |
填写内容(中文) |
填写内容(英文) |
| D-1 |
产品标签 |
1-3个标签,用逗号分隔。可选标签类型:猫用/狗用/通用/热销/新品/配件/服务。英文对应:For Cats / For Dogs / Universal / Bestseller / New / Accessory / Service |
是 |
|
|
| D-2 |
产品副标题 |
详情页顶部的一句产品描述,不超过25字 |
是 |
|
|
产品亮点(4条):
| 编号 |
填写说明 |
必填 |
中文内容 |
英文内容 |
| D-H1 |
第1个亮点,如"毫米波雷达监测心率呼吸",不超过15字 |
是 |
|
|
| D-H2 |
第2个亮点 |
是 |
|
|
| D-H3 |
第3个亮点 |
是 |
|
|
| D-H4 |
第4个亮点 |
是 |
|
|
产品特性(4组):
每组特性包含:图标颜色、标题、描述文字。图标颜色只能从以下4种中选择一种:
blue(蓝色 — 适合技术/监测类特性)
green(绿色 — 适合环保/清洁类特性)
purple(紫色 — 适合智能/APP类特性)
orange(橙色 — 适合安全/保障类特性)
| 编号 |
图标颜色 |
标题(中文) |
标题(英文) |
描述(中文,不超过25字) |
描述(英文) |
| D-F1 |
blue/green/purple/orange |
|
|
|
|
| D-F2 |
blue/green/purple/orange |
|
|
|
|
| D-F3 |
blue/green/purple/orange |
|
|
|
|
| D-F4 |
blue/green/purple/orange |
|
|
|
|
产品规格表:
规格行数不限,按实际产品参数填写。每行包含:参数名称(中英文)、参数值。
产品图片:
| 图片用途 |
尺寸要求 |
格式 |
说明 |
文件名 |
| 产品主图 |
800 × 800 px(正方形),背景透明 |
PNG |
详情页左侧大图展示,区域为正方形 |
detail-{产品ID}-main.png |
| 缩略图(可选) |
160 × 160 px(正方形),背景透明 |
PNG |
主图下方的小缩略图,如有多角度视图可提供多张 |
detail-{产品ID}-thumb-1.png |
五、宠物故事(首页故事卡片)
首页底部展示 3条 宠物故事卡片。
故事卡片图片要求
| 图片用途 |
尺寸要求 |
格式 |
说明 |
| 故事封面图 |
600 × 400 px(3:2 横向),或 800 × 450 px(16:9 横向) |
JPG |
故事卡片的封面图片,显示在 宽度自适应 × 220px 高的区域内 |
| 作者头像 |
80 × 80 px(正方形) |
JPG/PNG |
圆形头像,显示为 36 × 36 px 的圆形 |
故事 1
| 编号 |
字段名 |
填写说明 |
必填 |
填写内容(中文) |
填写内容(英文) |
| ST1-1 |
故事标题 |
不超过12个字 |
是 |
|
|
| ST1-2 |
故事摘要 |
2-3句话的简介,不超过50字 |
是 |
|
|
| ST1-3 |
标签1 |
故事分类标签,如:健康恢复、AI识别、暖心故事 |
是 |
|
|
| ST1-4 |
标签2 |
同上 |
否 |
|
|
| ST1-5 |
作者昵称 |
如"小橘妈妈" |
是 |
|
|
| ST1-6 |
宠物信息 |
品种和年龄,如"橘猫 · 3岁" |
是 |
|
|
| 图片 |
文件名 |
| 故事封面图 |
story-1-cover.jpg |
| 作者头像 |
story-1-avatar.jpg |
故事 2
| 编号 |
字段名 |
填写说明 |
必填 |
填写内容(中文) |
填写内容(英文) |
| ST2-1 |
故事标题 |
不超过12个字 |
是 |
|
|
| ST2-2 |
故事摘要 |
2-3句话,不超过50字 |
是 |
|
|
| ST2-3 |
标签1 |
同上 |
是 |
|
|
| ST2-4 |
标签2 |
同上 |
否 |
|
|
| ST2-5 |
作者昵称 |
同上 |
是 |
|
|
| ST2-6 |
宠物信息 |
同上 |
是 |
|
|
| 图片 |
文件名 |
| 故事封面图 |
story-2-cover.jpg |
| 作者头像 |
story-2-avatar.jpg |
故事 3
| 编号 |
字段名 |
填写说明 |
必填 |
填写内容(中文) |
填写内容(英文) |
| ST3-1 |
故事标题 |
不超过12个字 |
是 |
|
|
| ST3-2 |
故事摘要 |
2-3句话,不超过50字 |
是 |
|
|
| ST3-3 |
标签1 |
同上 |
是 |
|
|
| ST3-4 |
标签2 |
同上 |
否 |
|
|
| ST3-5 |
作者昵称 |
同上 |
是 |
|
|
| ST3-6 |
宠物信息 |
同上 |
是 |
|
|
| 图片 |
文件名 |
| 故事封面图 |
story-3-cover.jpg |
| 作者头像 |
story-3-avatar.jpg |
六、二维码图片
以下二维码图片用于页脚和弹窗中展示。
| 编号 |
二维码用途 |
显示尺寸 |
建议源图尺寸 |
格式 |
说明 |
文件名 |
| QR1 |
微信公众号 |
80×80px(页脚)/ 120×120px(弹窗) |
240 × 240 px |
PNG |
微信公众号二维码 |
qr-wechat.png |
| QR2 |
微博 |
同上 |
240 × 240 px |
PNG |
微博二维码 |
qr-weibo.png |
| QR3 |
小红书 |
同上 |
240 × 240 px |
PNG |
小红书二维码 |
qr-xiaohongshu.png |
| QR4 |
抖音/TikTok |
同上 |
240 × 240 px |
PNG |
抖音二维码 |
qr-tiktok.png |
| QR5 |
在线商城 |
160×160px(弹窗) |
320 × 320 px |
PNG |
在线商城/店铺二维码 |
qr-shop.png |
| QR6 |
联系咨询 |
160×160px(弹窗) |
320 × 320 px |
PNG |
客服/咨询二维码 |
qr-contact.png |
| QR7 |
视频号 |
120×120px(弹窗) |
240 × 240 px |
PNG |
视频号二维码 |
qr-video.png |
| QR8 |
抖音(故事页) |
120×120px(弹窗) |
240 × 240 px |
PNG |
抖音二维码(故事页专用) |
qr-douyin.png |
七、图片尺寸汇总速查表
| 图片类型 |
建议源图尺寸 |
比例 |
格式 |
是否需要透明背景 |
| 导航栏Logo |
高度 ≥ 100px,宽度自适应 |
自由 |
PNG |
是 |
| 白色版Logo |
高度 ≥ 100px,宽度自适应 |
自由 |
PNG |
是(白色文字) |
| Hero背景图 |
3640 × 2048 px |
16:9 |
JPG |
否 |
| 轮播图产品主图 |
800 × 800 px |
1:1 |
PNG |
是 |
| 轮播图角标小图 |
200 × 200 px |
1:1 |
PNG |
是 |
| 产品卡片缩略图 |
400 × 400 px |
1:1 |
PNG |
是 |
| 产品展示区大图 |
800 × 1000 px |
4:5 |
PNG |
是 |
| 详情页产品主图 |
800 × 800 px |
1:1 |
PNG |
是 |
| 详情页缩略图 |
160 × 160 px |
1:1 |
PNG |
是 |
| 故事封面图 |
800 × 450 px |
16:9 |
JPG |
否 |
| 故事作者头像 |
80 × 80 px |
1:1 |
JPG/PNG |
否(圆形裁剪) |
| 二维码(页脚) |
240 × 240 px |
1:1 |
PNG |
否 |
| 二维码(弹窗大图) |
320 × 320 px |
1:1 |
PNG |
否 |
八、填写检查清单
填写完成后,请对照以下清单自查: