本教程的目标是在 Shopify 的产品页显示一个预计送达日期的范围，如 6 到 12 天。系统会自动计算出大概的送达日期范围，不过购买当天和周六周日是不会被计入其中的。
另外，本教程所使用的主题是默认的 Dawn 主题，不过如果你使用的 Shopify 主题支持 Online Store 2.0，那么实现过程应该是一样的。具体的实现效果如下图所示。
首先打开 Shopify 独立站的后台，通过【在线商店 > 模版 > 编辑 > 自定义】进入主题编辑页面。
中间的下拉选项框默认显示的是主页，我们在下拉菜单选择【产品】，然后点击【默认产品】。
接着在左侧菜单的产品信息下方点击【添加块】，选择【自定义 liquid】，然后将其拖动到我们想要展示的位置，这里我们是拖动了【自定义 liquid】使其在价格下方显示。
复制下方代码并粘贴到【自定义 liquid】文本框中，然后点击右上角的【保存】即可。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<style>
.estimated-delivery-date {
margin: 10px 0 10px 0;
letter-spacing: 0.01em;
text-transform: uppercase;
}
.estimated-delivery-date p {
font-size: 11px;
line-height: 22px;
color: #333;
}
.estimated-delivery-date p span {
color: #4ca868;
}
</style>
<div class="estimated-delivery-date">
<p>
<img src="https://cdn.shopify.com/s/files/1/0584/1200/7563/files/refund.png?v=1653029463" style="height: 25px; float: left; margin-right: 10px; padding-bottom: 4px;">
Free returns <span>under 30 days</span>
</p>
<p>
<img src="https://cdn.shopify.com/s/files/1/0584/1200/7563/files/package.png?v=1653029463" style="height: 25px; float: left; margin-right: 10px; padding-bottom: 3px;">
Only available <span>online</span>
</p>
<p>
<img src="https://cdn.shopify.com/s/files/1/0584/1200/7563/files/truck.png?v=1653029463" style="height: 25px; float: left; margin-right: 10px; padding-bottom: 3px;">
Delivery estimated within <span id="fromDate">20/11</span> and <span id="toDate">29/11</span>
</p>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js" type="text/javascript"></script>
<script>
(function () {
if (document.getElementById('fromDate')) {
var dateStart = 6;
var dateEnd = 12;
var fromDate = Date.today().addDays(dateStart);
if (fromDate.is().saturday() || fromDate.is().sunday()) {
fromDate = fromDate.next().monday();
}
var toDate = Date.today().addDays(dateEnd);
if (toDate.is().saturday() || toDate.is().sunday()) {
toDate = toDate.next().monday();
}
document.getElementById('fromDate').innerHTML = fromDate.toString('dd/MM');
document.getElementById('toDate').innerHTML = toDate.toString('dd/MM');
}
})();
</script>
|
这里我们总共添加了三行，分别是退货信息、仅在网上销售、预计送达日期。
如果你想将绿色的字体修改为其他颜色，则需要将代码第 4 行中的 #4ca868 修改为你需要的颜色代码。
如果你不想全大写显示，则将第 6 行的代码删除即可。
如果你需要替换每一行前面的图标，则需要将代码第 19 行、第 23 行、第 27 行中的图片链接替换为你自己的图标链接。
如果你想修改文字内容，需要编辑代码的第 20 行、第 24 行和第 28 行。
如果你想修改预计送达日期的范围，则需要将代码第 35 行和第 36 行中的 6 和 12 修改为你的产品的预计送达日期范围。
如果我们只想显示预计到货日期，则复制粘贴下方的代码到【自定义 liquid】文本框中即可。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<style>
.estimated-delivery-date {
margin: 10px 0 10px 0;
letter-spacing: 0.01em;
text-transform: uppercase;
}
.estimated-delivery-date p {
color: #333;
font-size: 11px;
line-height: 22px;
color: #333;
}
.estimated-delivery-date p span {
color: #4ca868;
}
</style>
<div class="estimated-delivery-date">
<p>
<img src="https://cdn.shopify.com/s/files/1/0584/1200/7563/files/truck.png?v=1653029463" style="height: 25px; float: left; margin-right: 10px; padding-bottom: 3px;">
Delivery estimated within <span id="fromDate">20/11</span> and <span id="toDate">29/11</span>
</p>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js" type="text/javascript"></script>
<script>
(function () {
if (document.getElementById('fromDate')) {
var dateStart = 6;
var dateEnd = 12;
var fromDate = Date.today().addDays(dateStart);
if (fromDate.is().saturday() || fromDate.is().sunday()) {
fromDate = fromDate.next().monday();
}
var toDate = Date.today().addDays(dateEnd);
if (toDate.is().saturday() || toDate.is().sunday()) {
toDate = toDate.next().monday();
}
document.getElementById('fromDate').innerHTML = fromDate.toString('dd/MM');
document.getElementById('toDate').innerHTML = toDate.toString('dd/MM');
}
})();
</script>
|
