如何开启并配置定制商品App？

本页主要内容

什么是定制商品App？
如何定制商品属性？
如何配置价格？
如何配置重定向链接？
对色卡属性可以调整色卡尺寸
 对Text类型增加一个可以设置字符上限配置
 如何设置条件逻辑功能？
如何在商品详情展示定制商品选项？
为什么我的店铺的购物车看不到定制商品选项？
图片编辑&预览功能

什么是定制商品App？

您可以通过这个App为商品添加定制属性，让顾客通过下拉菜单、选择图像/颜色、按钮、勾选框来选择他们所需的商品属性，还支持顾客上传图像、填入文本。目前支持的属性选项类型是色卡、下拉菜单、文本、上传附件、按钮和勾选项。

如何定制商品属性？

1. 安装路径：Shoplazza店铺管理后台 > Apps > 访问Apps Store，安装定制商品插件。

2. 安装后，前往Shoplazza店铺管理后台，打开定制商品插件。

3. 点击定制商品。

4. 选择需要定制的商品，点击确定。

5. 点击添加属性后，选择一个类型。目前支持5类属性：色卡、下拉选择、文本、上传附件、按钮、勾选项。

6. 添加色卡属性。

填写订单属性名与商品详情属性名。商品详情属性名将展示在商品详情页中。
添加图片按钮可添加色卡。
选择上传图片或选择颜色后，点击确定。
可以为每个属性设置价格。设置后消费者选中此选项时，商品会额外加上此定制金额。
可以设置色卡尺寸。

7. 添加下拉选择属性。

填写订单属性名、商品详情属性名（商品详情属性名将展示在商品详情页中）
在属性值输入框中填写属性值，支持批量添加（批量添加时用回车键来分隔各属性值)
通过修改下拉框尺寸并挪动选项至相邻位置，可实现一行展示多个下拉菜单。
请注意，这两个卡片需要都将下拉框尺寸选择为每行2个。

可以为每个属性设置价格。设置后消费者选中此选项时，商品会额外加上此定制金额。
可以为每个属性设置重定向链接。此功能适用于需要消费者点击此选项后跳转到另一页面使用。

8. 添加文本属性。

填写订单属性名、商品详情属性名（商品详情属性名将展示在商品详情页中）。
可填入默认值，顾客可使用您填写的默认值，也可手动修改。
可以为填写文本设置价格。设置后如果消费者在文本框填写，则会加上此额外价格。
可以给文本框设置最大字数限制。设置后消费者输入的字符数不能超出此限制。

9. 添加上传附件属性。

填写订单属性名、商品详情属性名（商品详情属性名将展示在商品详情页中）。
顾客可点击图片虚线框上传图像文件，支持JPG、PNG格式。
通过设定最大上传数量可限制顾客最多能上传几张图片。
可以为填写文本设置价格。设置后如果消费者上传附件则会加上此额外价格。

10. 添加按钮属性。

填写订单属性名、商品详情属性名（商品详情属性名将展示在商品详情页中）。
在属性值输入框中填写按钮文案，支持批量添加（批量添加时用回车键来分隔各属性值）。
可以为每个属性设置价格。设置后消费者选中此选项时，商品会额外加上此定制金额。
可以为每个属性设置重定向链接。此功能适用于需要消费者点击此选项后跳转到另一页面使用。

11. 添加勾选项属性

填写订单属性名、商品详情属性名（商品详情属性名将展示在商品详情页中）。
在属性值输入框中填写按钮文案，支持批量添加（批量添加时用回车键来分隔各属性值）。

可以为每个属性设置价格。设置后消费者选中此选项时，商品会额外加上此定制金额。

12. 点击保存模板，可将当前配置保存为模板。定制商品属性时可选择之前保存的模板，直接应用配置。

13. 点击保存，保存配置。

如何配置价格？

使用场景：支持让商家给每一个字段下的选项配置价格，当顾客选择某一选项时，字段旁边会展示该价格并增加相应的价格至总价内
支持的属性：Swatch/ Dropdown/ Text/ Image upload/ Button/ Checkbox
使用路径：进入定制商品App内 > 选择商品进行定制 > 添加属性 > 在字段的设置项里设置价格

效果展示：在商品详情页，消费者选择某选项后会增加相应的价格到总价中

如何配置重定向链接？

使用场景：给Dropdown/Button配置项支持配置商品详情页链接，让顾客在产品A的商品详情页点击产品B能跳转到产品B的商品详情页（产品A和产品B为SPU维度的大商品）
使用路径：进入定制商品App内 > 选择商品进行定制 > 添加属性 > 在字段的设置项里设置重定向链接
效果展示：

对色卡属性可以调整色卡尺寸

规则：对色卡类增加一个调整色卡尺寸的功能，根据商家设置的尺寸调整色卡在店铺展示的尺寸
尺寸可选择：52px(默认）、80px 、100px
使用路径：进入定制商品App内 > 选择商品进行定制 > 添加属性 > 在字段的设置项里设置色卡尺寸
效果展示：

对Text类型增加一个可以设置字符上限配置

规则：对Text类增加一个可以设置字符上限的配置【Maximum word limit】，根据商家设置的字数上限限制顾客在店铺输入的字数
使用路径：进入定制商品App内 > 选择商品进行定制 > 添加属性 > 在字段的设置项里设置字符上限
效果展示：

如何设置条件逻辑功能？

规则：商家可以在每个属性下的【条件设置】板块设置一些条件逻辑。满足其中任意条件的时候才展示当前字段；或者在此大商品下选择哪些子商品才展示这个option。
使用路径：进入定制商品App内 > 选择商品进行定制 > 添加属性 > 在字段的设置项里设置条件逻辑
具体功能介绍：
- 【类型】：选择「无」，即不设置任何条件逻辑，正常展示此字段
- 【类型】：选择「按字段」，可以设置当某其他字段的选中属性为您设置的属性值时才会展示当前字段（注意可以添加多条规则，只要任意规则满足条件就会展示当前字段）
- 【类型】：选择「按子商品」，可以设置该商品下特定的子商品才展示当前字段（注意只有对单个商品做商品定制时才能使用此功能，如果一开始在APP首页选择了多个商品进行定制是不能使用此功能）

图片编辑&预览功能

使用场景：适用于需要顾客对上传的图片进行编辑和预览效果的店铺
使用规则：商家使用【Image design】属性后，店铺会在原有的图集上方增加【PHOTO】&【DESIGN】板块，点击PHOTO展示原有图集，点击DESIGN展示用户自己上传的图的预览效果。店铺内顾客点击上传图片，可以在预览框内编辑图片并及时预览。最后的预览图（预览图是指顾客下单时预览框里最终的效果图）和素材图（素材图是顾客上传的原图）将一起传入订单。
商家使用路径：在定制商品内使用【Image design】属性
功能介绍：
- 顾客点击DESIGN并上传图片，可对多图片进行编辑并预览

- 图片编辑：顾客可以对图片修改尺寸、拉伸、旋转、调整图层顺序的编辑操作，编辑完成后点击对勾进行保存。加购时可以将效果图一并传入订单内

如何在商品详情展示定制商品选项？

1. 在主题装修中选择一个主题进行编辑。

2. 在主题编辑器的默认商品详情，为商品详情页增加定制商品插件。

3. 添加后可将定制商品移动到合适的位置。

4. 将卡片拖动到合适的位置。

5. 点击发布，顾客即可在店铺内看到定制的选项。

为什么我的店铺的购物车看不到定制商品选项？

如果您的店铺使用nova2022、eva、hero、boost 主题且无法升级为最新版本，那么您可以通过以下方案进行处理。

如果您的店铺是nova2022 主题

在 theme/snippets/cart_items.liquid 插入代码片段

<% var properties = $imports.JSON.parse(item.properties || "{}") %>

{% assign locales = '{"ar-SA": "ﻉﺮﺿ ﺎﻠﺻﻭﺭﺓ","de-DE": "Bild ansehen","en-US": "View image","es-ES": "Ver imagen","fr-FR": "Voir l' | append: "'" | append: 'image","id-ID": "Lihat gambar","it-IT": "Guarda l' | append: "'" | append: 'immagine","ja-JP": "画像を表示しま","ko-KR": "이미지를 봅니다","nl-NL": "Bekijk afbeelding","pl-PL": "Zobacz obrazek","pt-PT": "Ver imagem","ru-RU": "Просмотреть изображение","th-TH": "ดูภาพ","zh-CN": "查看图片","zh-TW": "查看圖片"}' | parse_json %}

// ...

<% for(var prop in properties){ %>

  <% if (prop[0] !== '_') { %>

    <p class="tw-m-0">

      <% if (/(\/\/.*\.(?:png|jpg|jpeg|gif|svg))/i.test(properties[prop])) { %>

        <%=prop%>/ <a class="tw-no-underline tw-text-black" href="<%=properties[prop]%>" target="_blank" >{{ locales[shop.locale] | default: locales["en-US"] }}</a>

      <% } else { %>

        <p class="tw-m-0"><%=prop%>/<%=properties[prop]%></p>

      <% } %>

    </p>

  <% } %>

<% } %>

示例

如果您的店铺是eva主题

在 theme/snippets/cart_items.liquid替换代码片段

<% var properties = $imports.JSON.parse(item.properties || "{}") %>

{% assign locales = '{"ar-SA": "ﻉﺮﺿ ﺎﻠﺻﻭﺭﺓ","de-DE": "Bild ansehen","en-US": "View image","es-ES": "Ver imagen","fr-FR": "Voir l' | append: "'" | append: 'image","id-ID": "Lihat gambar","it-IT": "Guarda l' | append: "'" | append: 'immagine","ja-JP": "画像を表示しま","ko-KR": "이미지를 봅니다","nl-NL": "Bekijk afbeelding","pl-PL": "Zobacz obrazek","pt-PT": "Ver imagem","ru-RU": "Просмотреть изображение","th-TH": "ดูภาพ","zh-CN": "查看图片","zh-TW": "查看圖片"}' | parse_json %}

<div class="tw-mb-5 empty:tw-hidden"><% for(var k = 0; k < item.options.length; k++){ %><div class="tw-mb-1.25 last:tw-mb-0 tw-pr-4 two_line_text_truncate "><span class="tw-font-bold"><%=item.options[k].name%>:</span> <%=item.options[k].value%></div><% } %>

  <% for(var prop in properties){ %>

    <% if (prop[0] !== '_') { %>

      <% if (/(\/\/.*\.(?:png|jpg|jpeg|gif|svg))/i.test(properties[prop])) { %>

        <span class="tw-font-bold"><%=prop%>:</span> <a class="tw-no-underline tw-text-black" href="<%=properties[prop]%>" target="_blank" >{{ locales[shop.locale] | default: locales["en-US"] }}</a>

      <% } else { %>

        <p class="tw-break-normal tw-m-0"><span class="tw-font-bold"><%=prop%>:</span><%=properties[prop]%></p>

      <% } %>

    <% } %>

  <% } %>

</div>

示例

如果您的店铺是hero 主题

在 theme/snippets/cart_items.liquid 替换代码片段

<% var properties = $imports.JSON.parse(item.properties || "{}") %>

{% assign locales = '{"ar-SA": "ﻉﺮﺿ ﺎﻠﺻﻭﺭﺓ","de-DE": "Bild ansehen","en-US": "View image","es-ES": "Ver imagen","fr-FR": "Voir l' | append: "'" | append: 'image","id-ID": "Lihat gambar","it-IT": "Guarda l' | append: "'" | append: 'immagine","ja-JP": "画像を表示しま","ko-KR": "이미지를 봅니다","nl-NL": "Bekijk afbeelding","pl-PL": "Zobacz obrazek","pt-PT": "Ver imagem","ru-RU": "Просмотреть изображение","th-TH": "ดูภาพ","zh-CN": "查看图片","zh-TW": "查看圖片"}' | parse_json %}

<div class="tw-mb-3 empty:tw-hidden tw-text-body-alpha-70"><% for(var k = 0; k < item.options.length; k++){ %><div class="cart__item-variant-info tw-mb-1.25 last:tw-mb-0 tw-text-light-text-color tw-pr-4 two_line_text_truncate "><span class="tw-font-bold"><%=item.options[k].name%>:</span> <%=item.options[k].value%></div><% } %>

  <% for(var prop in properties){ %>

    <% if (prop[0] !== '_') { %>

      <% if (/(\/\/.*\.(?:png|jpg|jpeg|gif|svg))/i.test(properties[prop])) { %>

        <span class="tw-font-bold"><%=prop%>:</span> <a class="tw-no-underline tw-text-black" href="<%=properties[prop]%>" target="_blank" >{{ locales[shop.locale] | default: locales["en-US"] }}</a>

      <% } else { %>

        <p class="tw-break-normal tw-m-0"><span class="tw-font-bold"><%=prop%>:</span><%=properties[prop]%></p>

      <% } %>

    <% } %>

  <% } %>

</div>

示例

如果您的店铺是boost 主题

1、在 theme/sections/cart.liquid 替换代码片段

<% var properties = $imports.JSON.parse(item.properties || "{}") %>

{% assign locales = '{"ar-SA": "ﻉﺮﺿ ﺎﻠﺻﻭﺭﺓ","de-DE": "Bild ansehen","en-US": "View image","es-ES": "Ver imagen","fr-FR": "Voir l' | append: "'" | append: 'image","id-ID": "Lihat gambar","it-IT": "Guarda l' | append: "'" | append: 'immagine","ja-JP": "画像を表示しま","ko-KR": "이미지를 봅니다","nl-NL": "Bekijk afbeelding","pl-PL": "Zobacz obrazek","pt-PT": "Ver imagem","ru-RU": "Просмотреть изображение","th-TH": "ดูภาพ","zh-CN": "查看图片","zh-TW": "查看圖片"}' | parse_json %}

<div class="tw-mb-[6px] lg:tw-mb-3 empty:tw-hidden tw-text-body-light-color tw-space-y-[2px]"><% for(var k = 0; k < item.options.length; k++){ %><div class="tw-mb-1.25 last:tw-mb-0 tw-text-light-text-color tw-text-base lg:tw-text-sm tw-tracking-normal tw-pr-4 two_line_text_truncate"><%=item.options[k].name%>: <%=item.options[k].value%></div><% } %>

  <% for(var prop in properties){ %>

    <% if (prop[0] !== '_') { %>

      <p class="tw-m-0">

        <% if (/(\/\/.*\.(?:png|jpg|jpeg|gif|svg))/i.test(properties[prop])) { %>

          <%=prop%>: <a class="lg:tw-text-sm tw-text-body-light-color tw-text-base tw-no-underline" href="<%=properties[prop]%>" target="_blank" >{{ locales[shop.locale] | default: locales["en-US"] }}</a>

        <% } else { %>

          <p class="lg:tw-text-sm tw-text-light-text-color tw-text-base"><%=prop%>:<%=properties[prop]%></p>

        <% } %>

      </p>

    <% } %>

  <% } %>

</div>

示例

2、在 theme/snippets/cart_product_items.liquid 插入代码片段

{% assign locales = '{"ar-SA": "ﻉﺮﺿ ﺎﻠﺻﻭﺭﺓ","de-DE": "Bild ansehen","en-US": "View image","es-ES": "Ver imagen","fr-FR": "Voir l' | append: "'" | append: 'image","id-ID": "Lihat gambar","it-IT": "Guarda l' | append: "'" | append: 'immagine","ja-JP": "画像を表示しま","ko-KR": "이미지를 봅니다","nl-NL": "Bekijk afbeelding","pl-PL": "Zobacz obrazek","pt-PT": "Ver imagem","ru-RU": "Просмотреть изображение","th-TH": "ดูภาพ","zh-CN": "查看图片","zh-TW": "查看圖片"}' | parse_json %}

// ...

<% for(var prop in properties){ %>

  <% if (prop[0] !== '_') { %>

    <p class="tw-m-0 tw-text-body-light-color">

      <% if (/(\/\/.*\.(?:png|jpg|jpeg|gif|svg))/i.test(properties[prop])) { %>

        <p class="tw-text-body-light-color tw-m-0"><%=prop%>: <a class="tw-text-body-light-color tw-no-underline" href="<%=properties[prop]%>" target="_blank" >{{ locales[shop.locale] | default: locales["en-US"] }}</a></p>

      <% } else { %>

        <p class="tw-text-body-light-color tw-m-0"><%=prop%>:<%=properties[prop]%></p>

      <% } %>

    </p>

  <% } %>

<% } %>

示例

若您在商详页无法看到定制商品选项，或进行了上述操作也无法在购物车页看到定制商品属性，可以联系工作人员。