shopify 二次开发 如何创建定制产品，如何让用户写入定制内容

本人 兼职 shopify、店匠二次开发、仿站、定制等开发服务，有需要的可以加我微信 abc939039210，备注 shopify

什么是定制产品

定制产品，顾名思义，就是客户定制具有自己特色的产品。例如，定制记事本 —— 客户可以给商家提供图片和文字，让商家在记事本封面打印上自己的图片和文字。按照上例，则商家需要得到用户定制得内容（图片或文字，即：文件或文本），那我们要怎么拿到客户提供得文件或文本呢，这是我说要讲的内容

一、shopify 购物车的 properties 属性

通过查看官方文档 或 Ajax cart，我们可以得知 properties 是一个对象，这个对象是用来存放客户添加的自定义信息（官方描述：收集产品的自定义信息）。也就是我们的文件或文本都可以放到这里

二、使用 properties 属性，收集产品的自定义信息

按照官方文档，我们可以知道有两种做法，一种是自己在异步请求 Ajax API cart/add 中加入 properties，另一种则是在表单中添加 新的项（name=properties[<属性名>]）。对于第一种我不举例，知道如何写异步请求的，基本自己看官方文档就能理解。我主要讲第二种，这种也是比较常用的做法

1、找到 form 表单位置

如果您未添加其他的产品页面内容模板，则form 表单位置默认是 product-template.liquid 文件里面，找到下图位置，form 就是我们提交信息的表单

表单对应产品页面位置如下

2、在form 中 添加 properties 输入框

输入内容, 元素你可以随便改，不过你要确定的是 input 的 name 为 "properties[<自定义名称>]"

<p class="line-item-property__field">
    <label for="monogram">Monogram (up to 3 letters)</label>
    <input required id="monogram" style="width:120px; max-width:100%;" type="text" name="properties[Monogram]">
</p>

修改完我们可以得下面效果图

3、测试

购物车

模拟下单，shopify 后台对应订单截图如下

4、上传文件实现的方法

利用上述方法同样也能实现文件上传，只不过有不少主题是采用异步的方法，这也就导致我们的文件无法上传，至于异步如何实现文件上传我就不再做讲述