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

本页主要内容

什么是定制商品App?

如何定制商品属性?

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

FAQ

 


 

什么是定制商品App?

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

 

如何定制商品属性?

1. 安装路径:店匠后台 > Apps > 访问App Store,安装定制商品插件。

mceclip0.png

2. 安装后,前往店匠后台,打开定制商品App。

mceclip1.png

3. 点击定制商品

mceclip2.png

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

mceclip3.png

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

mceclip0.png

6. 添加色卡属性。

  • 填写订单属性名商品详情属性名。商品详情属性名将展示在商品详情页中。
  • 添加图片按钮可添加色卡。
  • 选择上传图片或选择颜色后,点击确定

mceclip5.png

mceclip6.png

mceclip7.png

7. 添加下拉选择属性。

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

mceclip1.png

mceclip3.png

8. 添加文本属性。

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

mceclip4.png

9. 添加上传附件属性。

  • 填写订单属性名、商品详情属性名(商品详情属性名将展示在商品详情页中)。
  • 顾客可点击图片虚线框上传图像文件,支持JPG、PNG格式。
  • 通过设定最大上传数量可限制顾客最多能上传几张图片。mceclip5.png

10. 添加按钮属性。

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

mceclip6.png

11. 添加勾选项属性

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

mceclip7.png

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

mceclip9.pngmceclip8.png

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

mceclip10.png

 


 

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

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

mceclip11.png

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

mceclip12.png

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

mceclip13.png

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

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

mceclip14.png

 


 

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

如果您的店铺使用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>

  <% } %>

<% } %>
  • 示例

mceclip15.png

如果您的店铺是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>
  • 示例

mceclip16.png

如果您的店铺是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>
  • 示例

mceclip17.png

如果您的店铺是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>
  • 示例

mceclip18.png

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>

  <% } %>

<% } %>
  • 示例

mceclip19.png

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

 

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

评论

0 条评论

登录写评论。