如何将你的活动商品打上折扣标签

 

    上周有个客户问我一个问题,有些主题的折扣商品图片上不能显示sale图标,当然,如果能显示具体的折扣力度会更好。我记得之前也有个客户问过我这个问题,我当时给的建议是简单粗暴,直接让美工做图上吧。现在发现还是挺多人有这个需求的,所以整理出一篇教程,给大家做参考。有些主题本身已经自带这个功能可以不做参考。本篇文章以Debut主题为例,教大家如何添加“折扣标签”

    最终显示效果如下图:

    

    

01

添加discount-saved文件

    添加文件之前,先将当前主题备份一份,避免添加代码错误导致网站不可访问。点击Online Store -> Theme -> Current Theme -> Actions -> Duplicate,如下图:

在复制的主题里,点击Actions -> Edit Code,在代码左侧目录中找到Snippets目录,点击Add a new snippet,在输入框中填写discount-saved.liquid,点击创建。如下图:

02

添加代码到所创建的文件中

    将以下代码添加到刚刚所创建的文件中,点击保存。   

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

  <span style=”position:absolute;top:0;right:0;background:#FF0000;display:block;padding:2px 5px;border-radius:4px;z-index:999;color:#FFFFFF;font-size:12px;”><em>{{ discount }} OFF</em></span>

 {% endif %}

     PS: 上述代码中第一个标红的色值为图标背景色,第二个标红的色值为字体颜色,第三个标红的字号为字体大小,大家可以根据自己主题的配色以及图片大小来调整样式。

03

图标添加到集合页产品图片上

    上述所创建的文件为sale图标文件,可以放在任意跟产品相关的地方。如集合页,产品详情页,相关产品,推荐产品等。

    将代码放至集合页产品图片:

在刚刚的代码左侧目录中,选择Snippets->product-card-grid.liquid,不同主题黏贴代码的文件位置不一样,类似featured-collection.liquid,collection-template.liquid等文件。

     通常标签一般是放在图片上面,因此,Ctrl + F搜索‘img’,将下列代码黏贴到img标签的上方,如下图:

  输出代码:  {% include ‘discount-saved’ %}

添加完成以后点击右上角save按钮,保存当前文件。

此时,刷新首页或者集合页,就能看到我们刚刚设置好的图标了。

 

 

    根据商品不同的价格折扣,显示具体的折扣力度,而不是统一的SALE标签,更有说服力。同时,如果商品价格没有折扣,标签也不会显示。

 

04

图标添加至产品详情页图片上

    在代码左侧目录中,找到Sections -> product-template.liquid,Ctrl + F搜索‘img’,找到第一个img标签,将输出代码放至img标签的上方,如下图:

    输出代码:  {% include ‘discount-saved’ %}

点击右上角Save按钮后,刷新产品页面,看到如下效果:

 

上述的sale图标文件对每个主题都适用,只是每个主题所添加的位置不一样,即输出代码位置不一样。所以,如果其他主题有需要的,也可按照上述步骤操作。

    本篇文章就分享到这里了,如果对文中所涉及内容有疑问处,可联系小编QQ : 2790641050。

    如果觉得小编的文章对你有价值,动动你的手指,帮忙关注并转发,谢谢!

 

    

    

   除非注明,文章均为 SFS技术服务 原创,转载请注明来源,谢谢! 

    SFS为Shopify全方位专业技术服务供应商,我们提供服务,解决问题,让每一位Shopify卖家不再为技术问题而深感烦恼

更多精彩推荐,请关注我们
专业的技术服务

 

 

 

本篇文章来源于微信公众号: shopify技术服务

发表评论

关闭菜单