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

点击这里查看带字幕视频教程本期 YouTube 链接（免登录观看 4K）

用途

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

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

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

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

效果图-不带默认值

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

一、创建元字段

sale_tag_color

sale_tag_text

二、添加代码

路径

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 %}