Shopify如何在产品页面上显示SKU

SKU(库存单位)是数字,通常是字母数字,用于帮助识别产品和跟踪库存。如果商店使用SKU,则会为每个单独的产品变型分配一个唯一的编号。您可以通过编辑主题代码在产品页面上显示变体的SKU编号。

在添加任何代码之前,请始终复制主题。如果出现任何问题或将来决定不使用添加的代码,这将为您节省。我们不支持您对主题进行的任何代码更改,也不对此负责。因此,请保存自己并首先进行复制。

接下来,打开代码编辑器:

在主题列表中,找到要编辑的主题的“操作”链接。然后选择编辑代码。示例主题主题:

如果您正在使用主要实时/已发布主题进行操作,例如:

在“片段”文件夹中,打开product.liquid:

在代码区域中,使用“查找”功能(在Mac中为Command-F,在Windows中为Control-F)并搜索:

h1

例:

在以</ h1>结尾的行下方添加几个空白行。然后添加以下代码:

<!-- Code added for SKU -->                       
{% assign current_variant = product.selected_or_first_available_variant %}
{% if current_variant.sku != "" %}
<p class="text-center uppercase"><span id="sku"></span></p> 
{% endif %}    
<!-- end SKU -->

例:

保存文件。

2

修改您的Javascript文件

具体取决于您运行的管道版本: 

管道4- 从Assets文件夹中,打开 theme.js

要么

通过Assets 打开shop.js.liquid的Pipeline的早期版本

第1部分

在代码区域中,使用“查找”功能(在Mac上为Command-F,在Windows上为Control-F)并找到:

if (variant.available)

例:

第2部分

添加以下代码上面找到的部分开始:

/* -- code added for SKU -- */
$('#sku').text('SKU: ' + variant.sku);
/* - end - */

示例(theme.js):

较早版本的管道示例(shop.js):

(请确保在粘贴代码之前添加几个空白行)。 

保存文件。

3

将SKU信息添加到您的产品页面

在您的产品设置中,更新所有产品以包含SKU编号-在“库存”部分中可以找到此编号:

对于带有变体的产品:

保存产品,您现在应该在网站上产品标题下方看到SKU号。 

工作代码示例:

如果我的变体选项是“小/蓝色”,则我的SKU显示:
如果我更改为中/黑色,则我的SKU动态更改为:
如果我有没有变体的产品,但是添加了SKU,它将显示:
最后,如果我的产品没有附加SKU,则不会显示任何内容:

如果您的产品具有变体,请确保所有变体选项均没有SKU或没有。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值