1. Shoplazza 帮助中心
  2. App安装
  3. 定制商品

开启并配置定制商品App

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

本文将为您介绍如何开启并配置定制商品App。

如何定制商品属性？

1. 安装路径：登录您的Shoplazza管理后台，点击应用 > 访问应用商店 > 添加定制商品  插件 > 安装。

2. 安装应用后，前往您的Shoplazza店铺管理后台 > 应用 > 打开定制商品插件 > 点击定制商品。

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

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

5. 添加色卡属性。

  • 填写订单属性名与商品详情属性名。商品详情属性名将展示在商品详情页中。

  • 添加图片按钮可添加色卡。

  • 选择上传图片或选择颜色后，点击确定。

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

  • 可以设置色卡尺寸。

6. 添加下拉选择属性。

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

  • 通过修改下拉框尺寸并挪动选项至相邻位置，可实现一行展示多个下拉菜单。
  • 请注意，这两个卡片需要都将下拉框尺寸选择为每行2个。

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

7. 添加文本属性。

  • 填写订单属性名、商品详情属性名（商品详情属性名将展示在商品详情页中）。
  • 可填入默认值，顾客可使用您填写的默认值，也可手动修改。

  • 可以为填写文本设置价格。设置后如果消费者在文本框填写，则会加上此额外价格。
  • 可以给文本框设置最大字数限制。设置后消费者输入的字符数不能超出此限制。

8. 添加上传附件属性。

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

9. 添加按钮属性。

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

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

10. 添加勾选项属性。

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

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

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

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

如何配置价格？

  • 使用场景：支持让商家给每一个字段下的选项配置价格，当顾客选择某一选项时，字段旁边会展示该价格并增加相应的价格至总价内。
  • 支持的属性：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首页选择了多个商品进行定制是不能使用此功能）。

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

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

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

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

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

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

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

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

如果您的店铺是nova2023 主题

  • 在 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<% } %><% } %>

  • 示例

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

相关主题

设置购物车倒计时
如何部署小费功能？
抽奖转盘

这篇文章有帮助吗？
2 人中有 2 人觉得有帮助

评论

3 条评论
日期 投票数
  • Avatar
    alpay

    提交的定制信息，可以在购物车页显示吗？

    0
  • Avatar
    ioscyt

    同问，在购物车没有显示很不方便

    0
  • Avatar
    zhuanye

    现在可以在购物车页显示定制信息，要升级最新的主题

    0

请登录写评论。