在 Tokoo 上设计店铺前台:拖拽式区块编辑器与主题设计器
一个 Tokoo 店铺前台到底是怎么搭建出来的:19 种区块类型、草稿/预览/发布的工作流程、结构化的主题设计器,以及四套一键套用的现成模板。
2026年7月9日 · 阅读约 3 分钟
店铺首页是顾客对你第一印象的来源,Tokoo 把它当作产品的核心呈现面来对待——而不是一个通用的「关于我们」页面。以下是实际的设计工具是怎么运作的。
区块编辑器:19 种搭建积木
首页由一份有序的区块列表组成,商家可以拖拽新增、删除或调整顺序。可选区块涵盖:横幅、文字区块、图文并排、图标卖点行、精选商品栏、轮播图、图片相册、视频嵌入(YouTube、Vimeo 或直链)、带分类筛选的商品网格、分类展示、顾客评价、促销横条、行动号召区块、订阅收集、菜单/价目表、带营业时间的地图、倒计时,以及 FAQ 手风琴——一共 19 种类型,在编辑器的「新增区块」菜单里按用途分组。
草稿、预览、发布
所有改动都会先保存为草稿。商家可以在真正确认前,预览顾客会看到的实际效果,准备好了才发布——所以一次改到一半的改版,永远不会在编辑过程中意外上线。
锚点:让按钮直接跳到指定区块
任何区块都能设置一个固定锚点(比如 #menu),行动号召按钮或菜单链接就能直接把访客滑动到本页的对应区块——很适合餐饮店的「查看菜单」按钮,或促销横条的「查看优惠」链接。
主题设计器:结构化,不是自由 CSS
品牌色、强调色、背景色、字体、圆角和整体页面宽度,全都透过一个结构化的设计器来设置——刻意不开放自由的 CSS 编辑。这是有意的设计选择:没有设计背景的商家不会不小心弄坏版面,也让每家店都维持一定的视觉品质与站内一致性。
| 控制项 | 影响范围 |
|---|---|
| 品牌色与强调色 | 所有区块里的按钮、链接与高亮元素 |
| 背景色 | 各区块背景,含自定义色板选择器 |
| 字体 | 标题与内文的排版 |
| 圆角 | 按钮、卡片与图片,从直角到全圆角可调 |
| 页面宽度 | 内容在大屏幕上撑开的宽度 |
四套模板,一键起步
Classic Store、Brand Story、Food & Restaurant 和 Single Product 各自打包了匹配的区块组合与主题预设,一键套用——可以选择「含示范内容」或「空白起步」。每套模板都有各自可浏览的独立预览页,套用前就能先看到成品效果(含示范商品与文案),不用先动到你真实的商品数据。
店铺前台设计涵盖的能力
- 19 种可拖拽区块类型
- 草稿、预览、发布的工作流程
- 结构化主题设计器——配色、字体、圆角、宽度
- 四套现成模板,各带实时预览
- 双语页面(英文/中文),不需要另外重建一份
常见问题
在 Tokoo 上装修店铺需要设计功底吗?+
不需要。结构化的主题设计器和现成模板,就是为了让没有设计背景的商家也能做出一致、好看的店铺——你是从引导式的控制项里选配色和字体,而不是自己写 CSS。
改动之前能先预览,不会直接被顾客看到吗?+
可以。所有改动都会先保存为草稿;你可以先预览确认真正上线后的效果,准备好了再发布。只要还在编辑,就不会自动上线。
首页最多能用几种区块类型?+
共有 19 种区块类型,涵盖横幅、商品网格、轮播图、顾客评价、FAQ、订阅收集等,可以任意组合,拖拽新增、删除或调整顺序。
店铺模板里包含什么?+
四套模板——Classic Store、Brand Story、Food & Restaurant、Single Product——各自一键套用匹配的区块布局与主题预设,套用前都有独立的实时预览页可以先浏览。
参考来源
相关文章
Tokoo 多地点库存详解:库存扣减与自动拆单是怎么运作的
Tokoo 按地点分别记录库存,结账时自动扣减,当某个地点库存不够时,还能把单笔订单自动拆分到多个仓库发货——所有方案都包含,地点数量不设限。
Tokoo 结账详解:WhatsApp 下单、付款方式与优惠券
一个 Tokoo 店铺的结账到底是怎么运作的:免费的 WhatsApp 下单流程、手动收款方式、可选的在线收款网关,以及优惠券——还有配送与自取的差别。
Tokoo 是什么?马来西亚卖家的一站式电商开店平台
Tokoo 是一个多租户电商 SaaS 平台,不是内容网站或博客。这篇文章讲清楚:一个 Tokoo 店铺里到底有什么、谁在用它开店,以及它和电商市场平台、一般建站工具有什么不同。
