企业官网建设流程全解析

给我妈的花店软件做了次大更新：小程序商城首页，从「拼积木」到「自由装修」

这套系统是 小灵湾花店管理系统——一款给实体花店做的 SaaS：老板用电脑网页管后台，店员用手机小程序收银接单，顾客扫码进你的小程序商城逛花买花。上一篇文章我用 15 张截图讲了「管店」的那一半（收银、库存、损耗、包月花、会员），这篇讲顾客看到的那一半：小程序商城的首页装修。这一版把它从「选积木拼页面」升级到了「接近自由设计」。
下面截图来自我妈的真店「玫瑰庄园」——她店里的装修后台和真实作品，你注册后用到的是同一套系统。15 天全功能免费试用。

利益相关

我是做软件的，我妈开花店，这套系统最早是给她写的工作台，2026 年开始正式卖给同行，现在有真实商家在付费使用。这次更新的每一项能力都已上线——不是规划图，是今天登录后台就能点到的功能。

一、先说这次更新动了什么

一句话：顾客端小程序商城的首页，从「只能拼固定楼层」变成了「模板起步 + 氛围背景 + 自由装饰 + 细节可调」。拆开是这几件事：

1. 7 套成品模板，选一套改几张图就能发布；
2. 背景图铺满整页，楼层浮在氛围大图上，滑动时背景固定不动；
3. 卡片可以做成半透明玻璃，透出背景；
4. 自由装饰层：一句话文案、一张透明底贴图，叠在任何楼层上面，拖到你想放的位置；
5. 双图块：一屏两张图，各带各自跳转，高度还能按图片比例自适应；
6. 圆角可调：六个常用楼型都加了圆角滑块，0 就是直角；
7. 图片按楼型比例裁剪：上传时裁剪框按这个位置的建议比例预设好；
8. 会员卡自动上数据：顾客一登录，余额、优惠券、积分自动显示，背景图只铺上半部；
9. 作品场景标签：作品打上「求婚」「生日」这类标签，顾客按场景筛图。

下面一件件说。

二、7 套成品模板：不会设计的老板，也能一晚上出片

点「装修首页」，先选模板：空白页从零开始；新店通用（轮播+公告+入口+主推商品+领券）开张首选；节日专题做情人节、母亲节预售页；相册种草用作品墙带动转化；松弛画报是大图少字留白的品牌感主页；动漫物语是日系柔雾背景加透明贴图的沉浸感主页；奢华花艺是整页氛围大背景加玻璃卡面的轻奢主页——替换品牌头图、卡图、背景就能出片。

模板解决的是「从 0 到 60 分」：配色、楼层搭配、留白比例这些最劝退非设计人群的活，模板替你做了；剩下的 40 分（换你自己的图、写你自己的字）才是老板该干的。

另外，除了小程序首页，还可以建自定义页——比如七夕做个专题页，把入口配在首页轮播上，节日过了下架就好。

三、整页氛围感：背景铺满 + 玻璃卡面

左栏「页面配置」点开的面板里，这次加了两个关键开关：

• 铺满整页：开了之后，背景图固定铺满手机屏幕，往下滑的时候背景不动，楼层从图上划过——氛围感是整页贯穿的，不是只有头图那一屏；
• 半透明玻璃：卡片从实底白卡换成毛玻璃，透出底下的背景。面板上写得很直白：商品图仍是实底，不影响看清货品。

背景图上传自己店的实景图就行，宽 750px 以上；底色也备了雾白、浅粉、鼠尾草三个现成选项。

四、自由装饰层：一句话、一张贴图，贴到你满意为止

这是这版我最喜欢的能力。以前首页排版是「楼层」逻辑：一个萝卜一个坑，想在这张海报的右上角点一颗星星、在头图上压一句「母亲节花礼 · 预定从速」，做不到。现在有了一层自由装饰：

• 文案：一句话点缀（20 字以内），叠在楼层上方；
• 贴图：系统内置 10 种透明底贴图（花瓣、白花瓣、小花、蝴蝶结、星星、闪光、爱心、云朵……），点选即用；也可以上传自己的透明底 PNG（提示写明：不要带白底，宽度按比例自适应）；
• 贴图可以调宽度、旋转、不透明度，位置可以直接填数值，多个贴图之间用上下箭头调叠放层次；
• 位置也可以直接在中间预览里拖，拖到顺眼为止。

这张特写就是我妈店的首页实际效果：实拍玫瑰背景铺满整页，玫瑰庄园的品牌头图浮在上面，贴一句「每周四 · 新花到店」的文案、点一片花瓣贴图做点缀；下面是深色皮纹卡的会员卡楼层、双图块和四个图标入口。

五、双图块：一屏两张图，高度还能「自适应」

花店做活动经常是「两件事同时说」：左边母亲节预售、右边婚宴花艺；或者两张主推花束并排。以前的楼层组件要么整屏一张图，要么四格图标，都不是这个感觉。双图块就是为这个来的：一行两个等宽图块，适合成对的氛围图入口，每张图各自配跳转（左图去母亲节专题、右图去商品详情，互不干扰）。

高度这次也放开了：

• 默认定高，滑块随便拖；
• 勾选「高度自适应」后，图块高度不再写死，宽度拉满、按图片比例走——你传 3:2 的图它就是 3:2，传竖图它就是竖图，面板会提醒你两张图裁成相同比例才整齐；
• 不想用自适应就拖回固定高度，最低 120rpx。

六、会员卡：余额、优惠券、积分，顾客一登录自动上屏

首页可以放一张会员卡楼层，这次它升级了四处：

**第一，背景图只铺上半部。**面板原话：「背景图只铺卡片上半部(高约 140rpx)，上传时按 710:140 裁剪取景；不上传则按下方文字颜色渲染纯色渐变底」。上半部是氛围，下半部是干净的纯白资产区，文字永远清晰——不用再担心图太花把余额盖住。

**第二，压图文字颜色可以自选。**配了背景图时，欢迎��和会员徽标用什么颜色由你定（预设了白、香槟金、深棕几个常用色，也能随便拾色），默认白色——深色底图上更醒目，浅色底图就换深棕，不怕字「隐身」在图里。

第三，资产数据三个格子可以勾选：账户余额、优惠券、积分，想显示哪几个勾哪几个。格内数值由顾客端登录状态自动填充，而且可点击——余额格进充值、优惠券格进领券中心、积分格进资产明细；全关掉就不显示资产区。

第四，圆角可调，和页面其他楼层保持一致。

老板只管把卡「装」进首页，顾客打开小程序，看到的是「欢迎回来 + VIP 会员 + 余额 + 优惠券 + 积分」这样一张自己的卡（编辑器预览里显示的 0.00 是占位，顾客端登录后会自动填上真实数据）。储值有余额、手上有券，顾客下次买花的理由就多了一分——这张卡不炫技，它是给「复购」摆的货架。

顺带说一句这批的细节打磨：轮播图、公告条、图卡、图文卡组、双图块、会员卡六个楼型都加了圆角滑块（0~60，0 是直角），面板提示「建议与页面其他楼层保持一致」；所有要传图的位置，上传时的裁剪框会按该楼型的推荐比例预设好（比如会员卡背景就是 710:140 的横条），随手传也不会传出变形图。

七、作品场景标签：顾客按「开业」「百日宴」筛你的作品

花艺相册是这套系统的老功能了：做过的花束拍照存档，直接同步到顾客端小程序。这次给它加了场景标签：编辑作品时打上「爱情」「求婚」「生日」……系统预置了一批常用场景，不合适直接输入回车创建（12 字以内）。比如我妈店里那组「开业抱抱桶花礼」打上「开业」，宝宝宴甜品台的作品打上「百日宴」，都是直接敲两个字回车生成的。

打完标，后台列表里每个作品带标签角标；顾客端花艺相册按标签筛选——要办开业活动的客人点「开业」，刷出来的全是你做过的开业花礼。首页的轮播图、图标入口也可以直接配「跳到某个标签的作品」：母亲节前把入口图换成「送给妈妈」，点进去就是打了「母亲节」标签的所有作品。

作品本来就是花店最真实的获客素材，标签让「找作品」变成「按场景找作品」，离下单更近一步。

八、没变的部分：三端同一份数据，多少钱、怎么试

老板用电脑网页装修（本文所有截图），顾客扫码进你的小程序商城看装修结果；柜台收银卖掉一扎花，后台库存立刻少一扎，线上下的单和线下收银记在同一本账里。上篇截图导览里的收银台、懂效期的花材库存、AI 拍单入库、报损月报、包月花配送日历、会员储值，都在同一个版本里，这里不重复展开（感兴趣翻文末链接）。

• 官网（注册即开通）：flower.xiaolingwan.com
• 帮助中心（带截图的完整使用文档）：flower.xiaolingwan.com/docs

常见问题

Q1：我不会设计，模板里的图都要自己换吗？
模板自带的图和文案就是成品质感，你只把商品楼层换成自己的商品、头图换成自己的店照就能发布。贴图库是系统内置的，不用去别处找素材。

Q2：装修手机端能看到效果吗？还是要发出来才知道？
编辑器中间就是手机预览，你拖贴图、换背景、调卡面，预览实时跟着变；确认满意再发布，发布前顾客看到的还是旧版。

Q3：图片比例不一样，传上去会变形吗？
不会。每个位置的裁剪框按该楼型的推荐比例预设，上传时框子已经框好；双图块还可以开「高度自适应」，图多高块就多高，根本不裁。

写在最后

上一版的思路是「把店管清楚」，这一版解决的是「把店装好看」：模板兜底、氛围背景、玻璃卡面、自由装饰、圆角与比例细节、场景标签——花店老板不需要懂设计，把自家的图和字放进去就够。自己装修一遍最准：flower.xiaolingwan.com。

开花店的朋友有经营或装修问题欢迎评论区聊；哪个功能不顺手也直接说，我改得动。