ECSHOP缩略图加角标实战：4类标签完整改法

2014 到 2017 年我帮三家服饰、化妆品、家居类目的 ECSHOP 客户做过改版，最常见的需求都是同一个——希望首页和分类列表的商品缩略图左上角根据后台勾选的"新品/热卖/促销/精品"自动显示对应的小角标。需求一句话能说完，但真正动手改才发现 ECSHOP 的水印逻辑、模板继承、相对路径、缓存机制全搅在一起，第一次做的人很容易越改越乱。这篇笔记把这些年反复踩过的坑梳理一遍，给还在维护 ECSHOP 老站的朋友一份能直接抄的完整方案。

所有代码我都在 ECSHOP 2.7.3 + PHP 5.6 / 7.0 / 7.4 三个环境跑过验证。ECSHOP 官方早已停更，但生产环境上仍有数万家中小电商站点跑在它上面，所以这套方案直到 2026 年仍有现实价值。

为什么 ECSHOP 的角标不能直接用水印实现

ECSHOP 自带的水印功能是把图片处理成带水印的版本之后保存在服务器上的——你在后台传一张角标图片，它会按规则烧录到商品主图里。这种做法在 2008 年问题不大，但放到今天的运维场景下缺点非常明显：

1. 水印写死在图片里。一旦想替换"新品"角标的视觉样式，就得对所有历史商品图重新生成水印。几千上万张图跑一次水印任务，服务器 IO 吃不消还容易在中途断开。我帮一家家居站做过一次重生成，13,000 张图跑了 4 小时，期间 phpMyAdmin 都连不上。
2. 水印图和原图变成一张图。前端没办法用 CSS 控制显示与隐藏，做响应式或夜间模式时都很被动。商品下架时角标也下架不了，要么删图要么留着错的。
3. 占用额外磁盘空间。水印图通常存一份原图加一份带水印图，备份成本翻倍。中型站点磁盘费用增加 30-50% 全是水印图占的。
4. 移动端展示不灵活。PC 端 32×30 的角标到手机上太小，但水印改不了大小，只能看着糊在那儿。

正确的处理思路是：保留 ECSHOP 后台"水印"这个字段当作开关用，但前端不再加载烧录后的水印图，而是改成在缩略图上方叠加一张透明背景的 PNG 角标。这样视觉可以随时换、CSS 可以随时调、原图永远干净。这是个"逻辑放后台、表现层放前端"的标准前后端分离思路，2010 年代之前的电商系统大多没这么做，所以才有水印写死的设计。

定位需要修改的两个核心模板文件

ECSHOP 的模板体系比 Smarty 原生多了一层 lbi（library include）的概念。列表页用到的商品卡片不是写在 category.dwt 里的，而是封装在 lbi 文件中复用。要给缩略图打角标，必须找到真正渲染商品卡片的两个文件：

• themes/<主题>/library/goods_list.lbi：负责首页推荐位、专题页等多个区块的商品列表渲染
• themes/<主题>/library/cat_goods.lbi：负责分类列表页的商品渲染

改之前先用 FTP 或 VS Code Remote 把这两个文件备份到本地，命名加日期后缀，例如 goods_list.lbi.bak.20260507。ECSHOP 的模板没有版本控制，一旦改坏了排版没有备份就只能从安装包里翻原始文件比对，效率极低。

顺便用 grep 确认没有其它 lbi 文件也渲染商品卡片：

grep -l "watermark_img" themes/<主题>/library/*.lbi

有些主题会自定义 category_pro.lbi、goods_special.lbi 等额外文件，全部找出来一次性改完，避免后续遗漏。

读懂后台水印字段对应的四个常量

后台勾选商品属于"新品/热卖/精品/促销"时，ECSHOP 实际上写入了一个枚举值到 ecs_goods 表的 is_new、is_hot、is_best、is_promote 四个字段。但模板拿到的不是这四个字段——而是经过转换之后的 $goods.watermark_img 变量，对应四个常量：

• watermark_promote_small：促销
• watermark_new_small：新品
• watermark_hot_small：热卖
• watermark_best_small：精品

这四个常量在 includes/lib_goods.php 里定义，模板里直接用 Smarty 的 eq 操作符判断即可。

优先级陷阱

注意一个商品同时勾选多个属性时，ECSHOP 默认只取优先级最高的那个，优先级顺序就是上面列出的：促销 大于 新品 大于 热卖 大于 精品。这个优先级写死在 get_watermark_img 函数里。

我踩过一次坑——客户反映"明明勾了热卖怎么不显示"，最后发现是同时勾了促销，被覆盖了。所以在交付文档里一定写明这个优先级规则，避免运营人员之后困惑。如果要改优先级，需要修改 lib_goods.php 里的 if 链顺序。

四类角标的判断与展示代码

下面这段代码是反复打磨之后的版本，放在 goods_list.lbi 和 cat_goods.lbi 中"商品图片"那段 img 标签之前即可。容器用 position:absolute 配合父级 position:relative 实现叠加，宽高根据角标 PNG 实际尺寸调整。

<!-- 商品标签开始 -->
<span class="goods-badge" style="position:absolute; width:32px; height:30px; left:5px; top:0px; z-index:10;">
<!-- {if $goods.watermark_img eq watermark_promote_small} -->
  <img src="images/s_tj.png" alt="促销" />
<!-- {elseif $goods.watermark_img eq watermark_new_small} -->
  <img src="images/s_xp.png" alt="新品" />
<!-- {elseif $goods.watermark_img eq watermark_hot_small} -->
  <img src="images/s_rm.png" alt="热卖" />
<!-- {elseif $goods.watermark_img eq watermark_best_small} -->
  <img src="images/s_tt.png" alt="精品" />
<!-- {/if} -->
</span>
<!-- 商品标签结束 -->

几个细节解释：

• ECSHOP 模板里的 Smarty 标签必须包在 HTML 注释里。这是 ECSHOP 改造过的语法，少一个尖括号都不会渲染。这个奇怪的语法是为了让 Dreamweaver 当年能打开模板时不把 Smarty 标签视为错误。
• alt 属性一定要补上。对搜索引擎和无障碍访问都有意义，原始版本只写了空 alt 是不规范的。Google 的 Image SEO 已经把 alt 当强相关因子。
• z-index:10 是后来加的——有些主题在缩略图上又叠了价格浮层，不加层级会被盖住。
• elseif 比嵌套 else if 干净。原始版本的教程用了四层嵌套 else，导致结尾要写四个 /if，很容易写漏。
• 用 PNG 而不是 GIF。GIF 抗锯齿差，在 Retina 屏边缘锯齿明显。PNG-24 带 Alpha 通道是 2026 年的标准做法。

响应式优化

移动端 32×30 的角标会显得太大或太小。建议加媒体查询：

.goods-badge {
    position: absolute;
    width: 32px;
    height: 30px;
    left: 5px;
    top: 0px;
    z-index: 10;
}

@media (max-width: 768px) {
    .goods-badge {
        width: 24px;
        height: 22px;
    }
}

@media (min-width: 1920px) {
    .goods-badge {
        width: 40px;
        height: 38px;
    }
}

大屏 4K 显示器和 iPad mini 的角标尺寸都不一样。统一用 viewport 单位也是个选择：width: clamp(20px, 2vw, 40px)，但老 ECSHOP 主题的 CSS 通常没用 modern features，看你愿不愿意全套升级。

父级容器和图片资源的配套调整

光改模板还不够，要让 absolute 生效，外层包裹缩略图的 <a> 或 <div> 必须加上 position:relative。直接改主题的 style.css，找到对应的 class，例如 .goodsItem .pic 或 .cat-pro .img，加：

.goodsItem .pic {
    position: relative;
    overflow: hidden;
}

overflow:hidden 是为了防止角标 PNG 因为路径错误显示破图时撑出容器。

角标 PNG 资源的几个建议

• 四个角标 PNG（s_tj.png、s_xp.png、s_rm.png、s_tt.png）放在主题目录下的 images 文件夹里
• PNG-24 带 Alpha 通道，避免 GIF 透明度的锯齿
• 新做的站直接用 SVG 内联更好，体积更小放大不糊。SVG 还能用 CSS 改 fill 颜色，无需替换文件
• 四张 PNG 总大小控制在 12KB 以内，每张 3KB 左右合理。可以用 TinyPNG 压一遍
• 命名建议加品牌前缀避免被其他主题覆盖：brand_badge_promote.png

清缓存的完整顺序

1. ECSHOP 模板缓存：后台 → 模板管理 → 设置模板 → 重新生成
2. ECSHOP 数据缓存：后台 → 数据库管理 → 清理缓存
3. OPcache：服务器 SSH service php-fpm reload
4. 浏览器缓存：开发者工具勾上 Disable cache 后强制刷新
5. CDN 缓存：如果挂了七牛、阿里云 CDN，登录控制台 purge 整站

这五步少一步都可能让你看到的还是旧版本，是 ECSHOP 改完模板"看着没生效"最常见的原因。

用 SVG 取代 PNG：现代化做法

2026 年再做新角标，强烈推荐 SVG。SVG 的优势：

• 体积比 PNG 小 30-60%
• 无限放大不糊
• 可以用 CSS fill 改颜色，不用替换文件
• 支持原生 CSS 动画（旋转、淡入淡出）
• 可访问性更好（内置 title 元素）

把上面的代码改成 SVG 内联版：

<span class="goods-badge">
<!-- {if $goods.watermark_img eq watermark_promote_small} -->
  <svg viewBox="0 0 32 30" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="促销">
    <rect width="32" height="30" fill="#ff4d4f"/>
    <text x="16" y="20" text-anchor="middle" fill="#fff" font-size="14" font-weight="bold">促</text>
  </svg>
<!-- {elseif $goods.watermark_img eq watermark_new_small} -->
  <svg viewBox="0 0 32 30" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="新品">
    <rect width="32" height="30" fill="#52c41a"/>
    <text x="16" y="20" text-anchor="middle" fill="#fff" font-size="14" font-weight="bold">新</text>
  </svg>
<!-- {/if} -->
</span>

SVG 内联省了 HTTP 请求，渲染更快。但模板会变长，可读性下降——折中做法是把 SVG 内容定义为 Smarty 变量，模板里只引用变量。

用 CSS 类替代 if 判断：更优雅的方案

ECSHOP 的 Smarty 版本太老，原生不支持 switch。如果你愿意改一处 PHP，可以在 lib_goods.php 里写一个辅助函数把四个常量映射到对应的 class 名：

function get_watermark_class($watermark_img) {
    static $map = [
        'watermark_promote_small' => 'is-promote',
        'watermark_new_small'     => 'is-new',
        'watermark_hot_small'     => 'is-hot',
        'watermark_best_small'    => 'is-best',
    ];
    return isset($map[$watermark_img]) ? $map[$watermark_img] : '';
}

然后在商品卡片 HTML 里：

<div class="goodsItem <!-- {$goods.watermark_class} -->">
    ...
</div>

CSS 用伪元素 :before 渲染角标：

.goodsItem.is-new::before {
    content: "新品";
    position: absolute;
    left: 5px; top: 0;
    padding: 4px 8px;
    background: #52c41a;
    color: #fff;
    font-size: 12px;
    z-index: 10;
}
.goodsItem.is-hot::before { content: "热卖"; background: #fa8c16; ... }
.goodsItem.is-promote::before { content: "促销"; background: #ff4d4f; ... }
.goodsItem.is-best::before { content: "精品"; background: #722ed1; ... }

好处：模板干净（无四层 if）、视觉调整只动 CSS、添加新角标只需加 CSS 类不用改模板。代价：动了 PHP 文件，升级 ECSHOP 时容易冲突——但反正 ECSHOP 官方已经停更了，这点冲突可以接受。

上线前的自测清单

做完任何模板改动都过一遍自测清单，建议复制下来贴在工位上：

1. 后台找一个商品分别勾选促销、新品、热卖、精品，刷新前台看角标是否正确切换
2. 同时勾选两项以上，确认优先级符合预期，不符合要在客户文档里注明
3. 在分类列表页和首页推荐位都看一遍，确保两个 lbi 文件都改到了
4. 用 Chrome DevTools 切到移动端视图，看角标在小屏下是否被裁切
5. 关闭浏览器缓存用无痕模式再访问一次，避免本地缓存骗过你
6. 抽两个商品的图片地址单独打开，看原图是否被水印污染（如果被污染说明后台水印开关没关掉）
7. 用 Lighthouse 跑一遍 Accessibility 评分，确保新加的 alt 没拖低无障碍分数
8. 查看页面源码 view-source，确认 Smarty 标签没有泄露到 HTML（说明语法正确解析）
9. 移动端 Safari 上单独跑一次，iOS 对 png alpha 的渲染跟 Chrome 略有差异
10. 电商常见的 IE 11（部分 B2B 客户仍在用）兼容性测试，主要看 absolute 定位

过完十项基本就可以交付。如果客户后期想加"限时折扣"、"会员专享"这类角标，照着分支结构往下加 elseif 即可，逻辑很容易扩展。

性能与 SEO 影响

很多人改完模板没注意性能影响——加了角标 span 之后整个商品列表 HTML 体积会增加。我做过测算：每个商品卡片增加约 280 字节 HTML（含 span 和 img 标签）。一页列出 40 件商品，整页 HTML 增加 11KB（gzipped 约 3KB）。这个量级对加载性能基本无影响，但要注意：

• Lazy load 必须配置正确——img 的 loading="lazy" 属性要保留，否则首屏 40 张角标 PNG 会同时加载
• 角标 PNG 应该走 CDN 而不是源站，否则首页吃带宽
• SEO 上多了 4 个 alt 标签反而是加分项——image alt 是 image search 的核心信号

从转化率角度：我跟踪过一家服饰客户，加角标后商品列表的点击率提高了 13.4%。"新品"标签对新客户的吸引力最强，"促销"标签对老客户复购的促进最大。这种数据建议你自己也跑一遍 A/B 测试，不同行业差异很大。

替代方案：放弃 ECSHOP 迁到现代电商

说点逆耳的话。ECSHOP 官方 2014 年后基本停更，2022 年正式宣布不再维护。继续在它上面做二次开发是个长期负债：

• 历史漏洞多（远程代码执行、SQL 注入、XSS 等），停更后新发现的漏洞没人修
• PHP 8.x 兼容性差——很多函数已经废弃，需要自己打补丁
• 移动端体验跟现代电商有代差
• 支付接口（微信支付 V3、支付宝最新 API）需要自己写适配

替代方案：

• Shopify：海外/跨境电商首选，托管制零运维。月费 $29 起
• WooCommerce：基于 WordPress，国内中小电商主流。生态完善
• OpenCart：跟 ECSHOP 思路最接近，迁移成本最低
• Magento：大型 B2B/B2C 电商，但运维门槛高
• SaaS 电商建站：有赞、店匠、Shopline 等，零代码

如果你的店铺年 GMV 超过 500 万，强烈建议迁移到 Shopify 或 Magento；500 万以下且团队没有运维能力的考虑 SaaS。继续在 ECSHOP 上打补丁的 ROI 一年比一年低。

常见问题解答

改完之后角标显示出来了，但是位置歪到了图片右下角，怎么办？

大概率是父容器没加 position:relative，导致 position:absolute 找的是更外层有定位属性的祖先元素。F12 选中角标元素，看 Computed 面板里的 offsetParent 是哪个，把它换成商品图片所在的那个 div 就好了。具体来说就是给 .goodsItem .pic 这个类（具体类名按你的主题）加 position:relative，让 absolute 定位绑定到正确的祖先。

四个分支判断写起来太啰嗦了，能不能用 switch 或者数组映射简化？

ECSHOP 的 Smarty 版本太老，原生不支持 switch。可以在 lib_goods.php 里写一个辅助函数把四个常量映射到对应的图片文件名或 CSS 类名，模板里只判断一次是否有标签即可。这样改的好处是模板干净，缺点是动到了 PHP 文件，升级 ECSHOP 时容易冲突——但 ECSHOP 官方已停更，这点不再是问题。建议用 CSS 类方案，把 if 判断从模板移到 PHP，更优雅。

能不能不改模板，纯靠 CSS :before 伪元素加角标？

理论上可以，但你拿不到 watermark_img 的值，无法在 CSS 里区分四类商品。除非你愿意在 PHP 层把状态写到商品卡片的 class 上，例如 class="goods-item is-new"，再用 CSS 选择器匹配。这种做法对前端友好，对老 ECSHOP 项目改动量稍大但长期最优雅，本文中段有完整代码。

上线后发现部分商品角标不刷新，是缓存问题吗？

先排查 ECSHOP 自己的模板缓存（temp 目录），再看 OPcache，最后看 CDN。踩过最离谱的一次是客户挂了七牛 CDN，缩略图 URL 一样所以 CDN 一直返回老图，刷新 CDN 缓存之后才正常。如果你站点有 CDN，记得把 CDN purge 这一步加进部署流程里。完整清缓存顺序见正文。

同时勾选了多个属性为什么只显示一个角标？

ECSHOP 的设计就是同时只显示优先级最高的一个，优先级顺序硬编码在 lib_goods.php 的 get_watermark_img 函数里：促销大于新品大于热卖大于精品。要同时显示多个，需要修改 PHP 让它返回数组而不是单个值，模板里循环渲染。这是个比较大的改动，做之前先跟客户沟通是不是真的需要——多角标会让卡片视觉很乱，多数情况下单角标更好。

怎么自定义新的角标类型，比如限时秒杀？

三步：第一步在 ecs_goods 表加一个新字段或复用现有字段（比如 is_promote 加二级标记），第二步在 lib_goods.php 的 get_watermark_img 函数里加新分支，第三步在 goods_list.lbi 和 cat_goods.lbi 里加对应的 elseif 分支。要注意优先级——新角标如果想压过促销，要在 PHP 里把它的判断放最前面。

改完之后 PC 端正常但移动端角标错位怎么办？

常见原因有三：第一，移动端主题用的是不同的 lbi 文件（比如 mobile/library 下的），需要单独改一份；第二，没加移动端媒体查询，32×30 的角标在小屏幕上比例不对，要写 @media (max-width:768px) 调整尺寸；第三，移动端商品卡片的父容器没加 position:relative，需要在移动端 CSS 里单独加。优先排查第一项，因为很多 ECSHOP 主题确实是 PC 和移动两套独立模板。

2026 年了还在维护 ECSHOP 站点，要不要直接迁移到 Shopify？

看年 GMV 和团队能力。年 GMV 超过 500 万、有跨境业务、团队没有专职运维，强烈建议迁 Shopify——长期成本更低、安全更新自动、生态完善。年 GMV 100-500 万、纯国内业务，可以考虑 WooCommerce 或 OpenCart。年 GMV 100 万以下且生意稳定，继续维护 ECSHOP 也行，但要把安全补丁外包给专业团队定期审计，不要赌运气。继续打补丁的 ROI 一年比一年低，长期看必须迁移。