由于Shopify的主题的分享按钮可分享的社交平台比较少,所以我就从网上找了一个功能超级强大的集社交分享与关注的Share this分享按钮,他支持49种按钮分享,关注社交平台按钮,点赞按钮等等,
网站地址是:https://sharethis.com/
怎么将其应用到Shopify网站上呢?(以Shopify免费主题Debut为例)
第一步:在Shopify主题代码编辑模式下,打开Sections下的Product-templete.liquid文件,找到如下代码,将其注释掉(不建议删除);
小技巧:其他主题的代码也类似这样,你可以全选,查找,输入Share然后就可以判断出大概的代码位置,然后根据liquid语法结构,{% if }开头,{% endif %}结尾判断出代码片段;
Tips:You can change the code before run.
注意:所谓注释掉,是将代码隐藏,前端不显示,liquid语言的注释: {% comment %}代码内容{% endcomment %},强烈建议注释代码,而不是删除,因为当你发现代码有问题时候,你可以去掉注释,还能恢复到以前。
第二步:打开sharethis网站根据里面的操作提示步骤,自定义你想要的分享按钮,点击获取分享html代码,输入一个邮箱和密码就可以看到需要往网站添加的代码了;
第三步:由于代码有两部分,如下图所示,第一部分需要放到主题的theme.liquid文件里面的head标签里面,第二部分需要放到上面的文件product-templet.liquid文件注释的liquid代码处,然后点击保存
第一部分代码添加示例截图:
第二部分代码添加示例截图:
第四步:打开产品详情页,你可以在产品页看到如下所示的效果: