融会贯通

第 165 期 Shopify 添加产品系列商品自定义 Sale Tag 促销折扣标签

点击这里查看带字幕视频教程

本期 YouTube 链接 (免登录观看 4K)

用途

Shopify Dawn 默认的销售标签只支持 Sold out 和 Sale（位于左下角），本期教程演示如何添加自定义销售标签（位于左上角），并能自定义每款产品的标签文字和颜色，且能和主题自带的共存。

除了展示特定的标签，甚至还能用来显示

不同产品各自的折扣信息
产品上新提示
Pre-order

这个场景在两年前发布的第 71期教程中有演示过查看参考网站 Casper

效果图-不带默认值

效果图-带默认值（例如：上新产品自动添加 New 标签）

一、创建元字段

sale_tag_color

sale_tag_text

二、设置产品信息

如果你用的是增强版主题或者 Shopify 官方推出的任意一款 2.0 版主题，对照本期视频即可完成操作。

如果你用的是别的主题，也可以参考本期视频的实现思路。

如需调整字号、间距等样式，可参考：

还没有自己的店铺？点击这里 1 元开店或创建插件测试/免费试用店铺

三、添加代码

在 Snippets 文件夹 => card-product.liquid 中搜索定位

带默认值版本

<div class="card__content">
    <div class="card__badge top left">
    <span class="badge badge--bottom-left{% if product.metafields.custom.sale_tag_color == blank %} color-{{ settings.sale_badge_color_scheme }}{% endif %}" style="position: absolute; z-index: 9; background-color: {{ card_product.metafields.custom.sale_tag_color }};">{{ card_product.metafields.custom.sale_tag_text | default: 'New'  }}</span>
    </div>
</div>

不带默认值版本

{% unless card_product.metafields.custom.sale_tag_text == blank %}
    <div class="card__content">
        <div class="card__badge top left">
        <span class="badge badge--bottom-left{% if product.metafields.custom.sale_tag_color == blank %} color-{{ settings.sale_badge_color_scheme }}{% endif %}" style="position: absolute; z-index: 9; background-color: {{ card_product.metafields.custom.sale_tag_color }};">{{ card_product.metafields.custom.sale_tag_text }}</span>
        </div>
    </div>
{% endunless %}

渐入佳境