做自建站的卖家是否遇到库存卖完了，然后买家经常问什么时候补库存，如果个别或者少量的话可以一个个邮件回复，但是如果多了的话，就有点浪费时间，还体验不好，当然很多人可能会设置零库存隐藏该选项，个人认为这不利于对产品线的优化。
Shopify本身是没有这个补库存提醒功能，如果要实现这个功能，要么自己写代码，要么使用第三方的APP来实现，你去Shopify APP Store搜索back in stock或者restock alert会出现很多搜索结果，挑一个评论好的，评论多的，然后价格合适就可以了。当然有免费套餐够用的话是最好的，可以省不少铜板。
也可以在谷歌或者Bing搜shopify how to back in stock alert，也许你会找到更适合你的选择，很多人也有推荐或者分享个APP的优缺点，更有利于自己的选择，绕过坑，走直路，少交点学费。
我们使用的是Kalviyo设置的此项功能，用最低配的套餐来跑flow，同时也设置这个补货提醒功能，这个是官方说明How to install Back in Stock for Shopify | Klaviyo Help Center
有些主题按照官方说明直接配置好，前台显示没有什么问题，但是有些主题需要做一些更改。
下面我按照我们安装在Enterprise主题的过程，以前使用Dawn主题的时候，直接按照官方说明设置就可以了。
首先，将下面代码放到主题theme.liquid的</body>前面（<body>.....</body>之间）。（点击online store-->themes-->customize旁边的3点-->edit code）
需要将PUBLIC_API_KEY改成自己的，这个是在你的Klaviyo账户的settings里面，然后选在API keys即可找到，代码的各个参数代表什么意思，可以查看官方文档。可一个根据自己的实际需求做一些修改。
<script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>
<script>
var klaviyo = klaviyo || [];
klaviyo.init({
account: "PUBLIC_API_KEY",
platform: "shopify"
});
klaviyo.enable("backinstock",{
trigger: {
product_page_text: "Notify Me When Available",
product_page_class: "btn",
product_page_text_align: "center",
product_page_margin: "0px",
replace_anchor: false
},
modal: {
headline: "{product_name}",
body_content: "Register to receive a notification when this item comes back in stock.",
email_field_label: "Email",
button_label: "Notify me when available",
subscription_success_label: "You're in! We'll let you know when it's back.",
footer_content: '',
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Helvetica+Neue');",
drop_background_color: "#000",
background_color: "#fff",
text_color: "#222",
button_text_color: "#fff",
button_background_color: "#439fdb",
close_button_color: "#ccc",
error_background_color: "#fcd6d7",
error_text_color: "#C72E2F",
success_background_color: "#d3efcd",
success_text_color: "#1B9500"
}
});
</script>Enterprise主题里面按照上面安装完，发现位置并不正确，跑到了标题的下面，并不是出现在Add to Cart下面的位置。
第二，修改按钮的显示位置，需要将按钮的位置做调整，需要在main-product.liquid文件里面插入如下代码，这样就将按钮的位置做了调整。
<a class="klaviyo-bis-trigger" href="#" id="Klaviyo_button" type="button" style="display:none;">Notify Me When Available</a>
调整完位置以后发现，按钮的表现形式不对，只是以文字形式出现，没有加载按钮形式出来。
第三，调整按钮的CSS样式，在edit code里面找到main.css文件，在这个文件的最下面假如如下代码，这个代码定义了按钮的样式，同时也是触发判断是否有库存，如果是有库存，这个按钮是不显示的；如果没有库存，才显示补库存提醒功能。
.klaviyo-bis-trigger {
display: inline-block;
border: var(--btn-border-width) solid rgb(var(--btn-alt-text-color));
outline-color: rgb(var(--btn-alt-text-color));
outline-offset: 3px;
background: rgba(var(--btn-alt-bg-color)/0.9) linear-gradient(104deg, rgba(var(--btn-alt-text-color)/0.07) 60%, rgba(var(--btn-alt-bg-color)/var(--btn-alt-bg-alpha)) 60%, rgba(var(--btn-alt-bg-color)/var(--btn-alt-bg-alpha)) 100%) no-repeat 100% 100%;
background-size: 300% 100%;
color: rgb(var(--btn-alt-text-color));
margin-top: 15px;
width: 100%;
border-radius: var(--btn-border-radius, 0);
padding: var(--btn-padding-y, 12px) 26px;
text-align: center;
}
.klaviyo-bis-trigger.is-loading {
color: rgba(var(--btn-alt-text-color)/0.1);
}
.klaviyo-bis-trigger.is-loading::after {
border-color: rgb(var(--btn-alt-text-color));
border-top-color: transparent;
}
.klaviyo-bis-trigger.is-loading::before {
border-color: rgb(var(--btn-alt-text-color));
}
ul li{
list-style-type:none;
}
iframe {
overflow-clip-margin: content-box !important;
overflow: clip !important;
border-width: 2px !important;;
border-style: inset;
border-color: initial;
border-image: initial;
}
这样补库存提醒"Notify Me When Available"就设置完了。
当没有库存的是，买家点击Notify Me When Available，会弹出对话框，买家选择希望补库存的选项，输入自己的邮箱。当我们添加库存，买家就可以自动收到邮件提醒了，减少了人工处理的麻烦。
本文为原创文章，版权归西蒙园所有，欢迎分享本文，转载请保留出处！
你可能也喜欢
- ♥ 如何利用Google Tag Manager设置Google ads广告转化04/21
- ♥ 读者反感的文章类型03/06
- ♥ Shopee有哪些站内营销方法06/07
- ♥ 怎么收集写作灵感03/06
- ♥ 为什么做自由职业-主线剧情05/14
- ♥ 如何决策05/14