一、动手前先备份主题并理清文件位置
修改Shopify主题代码之前，最稳妥的做法是先备份当前主题。进入Shopify后台，点击左侧的在线商店，再选择主题，找到正在使用的主题，点击操作按钮里的复制。这样系统会生成一份完整副本，万一后续操作出现问题，可以直接切换回备份主题，不会影响线上店铺正常运营。备份完成后，点击主题操作里的编辑代码，进入Shopify的代码编辑器界面。
代码编辑器的左侧会列出主题目录结构，包括Layout、Templates、Sections、Snippets、Assets等文件夹。配送日期功能通常需要新建一个Snippet文件来存放Liquid代码，然后在购物车模板或者商品模板中引用它。你需要提前确认顾客从哪里选择配送日期：如果是希望顾客在商品详情页选择，就要修改product-template.liquid；如果希望顾客在购物车页面选择，就要修改cart-template.liquid。大多数商家会选择购物车页面，因为这一步更接近订单提交，顾客对配送时间的预期也更明确。
另外，配送日期本质上属于订单附加信息。Shopify允许通过购物车属性cart attributes或者订单备注来接收这类自定义数据。在代码层面，只要在表单里放入一个带有attributes前缀的输入框，Shopify就会在结算时自动把它带入订单详情。理解这一点之后，后边的代码片段就很容易看懂了。
二、新建配送日期Snippet代码片段
在代码编辑器左侧找到Snippets文件夹，点击新建snippet，建议命名为delivery-date或者delivery-date-picker，名称使用英文和连字符，方便后续引用。文件创建后，会打开一个空白的.liquid文件。接下来在文件中写入一个日期输入框。这个输入框的name属性必须写成attributes[配送日期]或者attributes[Delivery Date]的形式，Shopify才能识别为购物车属性。
基础的代码结构如下：先使用<div>包裹一个label和input。label用来显示文字，例如<label for="delivery-date">选择配送日期</label>。input标签使用type="date"，name="attributes[配送日期]"，id="delivery-date"。其中type为date时，浏览器会自动弹出日期选择器，移动端体验也比较好。为了让样式更统一，可以给input加一个class，比如class="field__input"，这样它会继承主题自带的输入框样式。
如果需要限制可选日期范围，可以加入min属性。例如希望顾客只能选择今天及之后的日期，可以使用Liquid获取当前日期，当然也可以先保持简单版本，后续再通过JavaScript动态设置min。这个阶段最重要的是保证输入框能够出现在页面中，并且提交后能在订单备注里看到对应的日期值。
三、在购物车页面或商品页引用Snippet
Snippet创建好之后并不会自动显示，必须在页面模板里引用它。打开Templates文件夹下的cart-template.liquid，在form标签内部找到合适的位置，比如在subtotal或checkout按钮之前插入一段引用代码。Shopify推荐使用render方式引入snippet，写法为<div class="delivery-date-wrapper">{% render 'delivery-date' %}</div>。这样做的好处是代码结构清晰，后续维护方便。
如果选择在商品详情页显示，需要打开product-template.liquid，找到加入购物车按钮附近的代码位置，把同样的引用语句放进去。需要注意的是，商品页的表单是product form，购物车属性同样可以在这里读取，但最终结算时Shopify会合并同一订单中的属性值。因此如果顾客购买多个商品时，配送日期只需要选择一次的话，放在购物车页面更合理；如果需要每个商品都有不同配送日期，则应该把输入框放进商品页，并使用line item属性而不是cart attributes。
插入引用后保存文件，回到店铺前台，打开购物车页面刷新，应该能看到日期选择框出现在预期位置。如果页面没有显示，首先检查snippet文件名是否和render后面的名称完全一致，再检查引用代码是否放在form标签内部。很多时候就是引用位置放错导致功能不生效。
四、调整样式并适配移动端
日期输入框默认样式在不同浏览器中会有差异，Chrome和Edge的日期控件比较整洁，Safari的显示也相对稳定，但为了让视觉更统一，通常需要补充少量CSS。打开Assets文件夹里的theme.css或者theme.scss文件，在末尾追加针对delivery-date-wrapper的样式。可以设置输入框的宽度、内边距、字体大小、边框颜色和圆角，让它与主题里其他输入框保持一致。
移动端适配要重点检查日期控件的触摸区域是否足够大，尤其是手指操作时，输入框高度最好不低于44像素。对于小屏幕，可以把配送日期字段设置为占满整行宽度，并适当增加上下间距，避免和其他按钮靠得太近。还可以给label设置display:block和margin-bottom，让文字和输入框之间保持清晰层次。
如果使用第三方主题，主题本身可能带有CSS变量，直接复用变量名可以更自然地融入整体风格。例如使用var(--color-field-border)来设置边框颜色。保存CSS后在前台使用手机模拟器查看效果，必要时微调间距和字体大小。记住不要直接修改主题核心样式文件，优先使用主题设置中的自定义CSS区域或者追加到已有样式文件末尾。
五、测试订单与常见问题排查
页面显示正常后，必须完成一笔测试订单，确认配送日期能够随订单提交。前台操作时，选择一件商品加入购物车，在购物车页面选择日期，然后进入结算流程。在Shopify后台的订单详情里，点击显示更多信息，应该能看到配送日期出现在购物车属性区域。如果后台看不到，最常见的原因是name属性前缀不正确，必须使用attributes[字段名]这种格式，并且整个name字符串不能有空格，中括号不能省略。
另一个常见问题是日期控件在部分浏览器中不显示。虽然type=date在主流浏览器中支持良好，但部分旧版本浏览器可能只显示普通输入框。如果希望兼容性更强，可以使用JavaScript日历插件，但会增加代码复杂度。对于大多数Shopify店铺来说，直接使用原生日期输入框已经够用，不必过度设计。
还有商家遇到日期可以显示但无法提交的情况。这通常是因为input没有放在form标签内部，或者form被其他代码提前关闭。检查方法是回到代码编辑器，确认引用snippet的位置确实位于form开始标签和结束标签之间。也可以使用浏览器开发者工具查看元素层级，判断input是否脱离表单。
六、进阶：把配送日期转为订单备注或传递给物流系统
如果只是希望顾客选择日期并在订单中看到，前面几个步骤已经足够。但实际运营中，很多商家还需要把日期打印在发货单上，或者传递给第三方物流系统。此时可以在订单备注中重复写入一次配送日期。在Liquid层面无法直接修改订单，但可以在结算流程的Additional Script部分使用JavaScript抓取购物车属性，或者使用Shopify Functions来扩展结算行为。对于中小店铺来说，更实用的做法是让仓库人员在后台订单详情中手动查看购物车属性。
如果需要将日期显示在订单通知邮件里，可以在邮件模板中读取attributes。Shopify邮件模板支持Liquid变量，例如在订单确认邮件中加入checkout.attributes["配送日期"]，这样顾客收到的邮件中也能看到自己选择的日期。注意邮件模板中引号可能需要根据模板语法调整，建议直接复制属性名确保一致。
最后，建议保存代码修改后做一次完整回归测试：不同设备、不同浏览器、不同商品数量下都走一遍结账流程。确认配送日期只出现一次，值能正确传递，并且不影响加购、优惠码使用和运费计算。这样一套流程下来，Shopify配送日期选择功能就能稳定运行。
Shopify配送日期Shopify代码片段配送日期选择器 修改时间：2026-08-30 15:31:23