上周有个客户问我一个问题，有些主题的折扣商品图片上不能显示sale图标，当然，如果能显示具体的折扣力度会更好。我记得之前也有个客户问过我这个问题，我当时给的建议是简单粗暴，直接让美工做图上吧。现在发现还是挺多人有这个需求的，所以整理出一篇教程，给大家做参考。有些主题本身已经自带这个功能可以不做参考。本篇文章以Debut主题为例，教大家如何添加"折扣标签"。
最终显示效果如下图：
1.添加discount-saved文件
添加文件之前，先将当前主题备份一份，避免添加代码错误导致网站不可访问。点击Online Store -> Theme -> Current Theme -> Actions -> Duplicate，如下图：
在复制的主题里，点击Actions -> Edit Code，在代码左侧目录中找到Snippets目录，点击Add a new snippet，在输入框中填写discount-saved.liquid，点击创建。如下图：
2.添加代码到所创建的文件中
将以下代码添加到刚刚所创建的文件中，点击保存。
{% if product.compare_at_price > product.price %}
{% capture discount %}
{{ product.compare_at_price | minus:product.price | times:100 | divided_by: product.compare_at_price }}%
{% endcapture %}
{{ discount }} OFF
{% endif %}
PS: 上述代码中第一个标红的色值为图标背景色，第二个标红的色值为字体颜色，第三个标红的字号为字体大小，大家可以根据自己主题的配色以及图片大小来调整样式。
3.图标添加到集合页产品图片上
上述所创建的文件为sale图标文件，可以放在任意跟产品相关的地方。如集合页，产品详情页，相关产品，推荐产品等。
将代码放至集合页产品图片：
在刚刚的代码左侧目录中，选择Snippets->product-card-grid.liquid，不同主题黏贴代码的文件位置不一样，类似featured-collection.liquid，collection-template.liquid等文件。
通常标签一般是放在图片上面，因此，Ctrl + F搜索‘img’，将下列代码黏贴到img标签的上方，如下图：
输出代码： {% include 'discount-saved' %}
添加完成以后点击右上角save按钮，保存当前文件。
此时，刷新首页或者集合页，就能看到我们刚刚设置好的图标了。
根据商品不同的价格折扣，显示具体的折扣力度，而不是统一的SALE标签，更有说服力。同时，如果商品价格没有折扣，标签也不会显示。
4.图标添加至产品详情页图片上
在代码左侧目录中，找到Sections -> product-template.liquid，Ctrl + F搜索‘img’，找到第一个img标签，将输出代码放至img标签的上方，如下图：
输出代码： {% include 'discount-saved' %}
点击右上角Save按钮后，刷新产品页面，看到如下效果：
上述的sale图标文件对每个主题都适用，只是每个主题所添加的位置不一样，即输出代码位置不一样。所以，如果其他主题有需要的，也可按照上述步骤操作。
本篇文章就分享到这里了，如果对文中所涉及内容有疑问处，可联系小编QQ : 2790641050。
如果觉得小编的文章对你有价值，动动你的手指，帮忙关注并转发，谢谢！
更多精彩内容请关注“Shopify技术服务”。
除非注明，文章均为 SFS技术服务 原创，转载请注明来源，谢谢！
免费Shopify技术咨询QQ群：632205694
网友评论