示例商品:https://customix-demo-store.myshopify.com/products/jd002-god-says-i-am-name-letter-in-bible-toile-de-jouy-style-personalized-jewelry-dish

步骤 1:准备设计素材

要启用“根据字数动态显示版式”,您需要准备两组设计素材。这些素材决定了系统如何根据顾客输入的字符显示不同的版式。

a. 大号字母图片(主字符)

这组素材控制版式中显示的大号主字符。
文件顺序结构:

  • 第 1 个文件 → 空白图片(必需的占位文件)
  • 第 2–27 个文件 → 小写字母 a–z
  • 第 28–54 个文件 → 大写字母 A–Z
  • 第 55–64 个文件 → 数字 0–9(可选)

b. 引文版式文件夹

准备 54 个文件夹,对应 54 种字符情况,逻辑与第 1 部分相同:

  • 27 个小写字母文件夹 a–z
  • 27 个大写字母文件夹 A–Z

每个文件夹代表某一个特定字符对应的引文版式。

引文素材

步骤 2:向模板添加元素

准备好所有设计素材后,下一步是将这些元素添加到模板中并设置版式。

a. 将素材上传到素材库

  • 将准备好的所有文件和文件夹上传到素材 → 图片
  • 请确保文件夹结构(背景、字母、引文)上传正确
将素材上传到素材库

b. 创建示例模板

创建一个新模板并开始添加元素,首先添加包含 3 种颜色(蓝色、红色、黑色)的背景。
接着添加 3 个字母图层,然后调整这些图层的大小,并将其放置在设计中的目标位置。

添加字母图层

之后,添加 3 个引文图层,分别对应相同的 3 种颜色,同样相对于字母图层进行对齐和定位

添加引文图层

c. 创建版式

选中全部 6 个图层,点击创建版式图标,将它们分组为 版式 1。

分组为版式

点击“版式 1”,按组合键 Ctrl + C and Ctrl + V,复制出结构相同的“版式 2”

复制为版式 2

接着,展开“版式 2”,选中第一个字符对应的 6 个图层,同样使用组合键 Ctrl + C and Ctrl + V,为第二个字符再创建 6 个图层,如下方参考图所示。

为第二个字符创建图层

保存模板以保留当前结构,然后再进行下一步配置

步骤 3:选项集映射与逻辑

在这一步中,我们将配置选项集和逻辑,使版式、字母和引文能根据顾客输入的文字自动切换。

a. 添加文字字段选项

  • 进入选项集 → 添加 → 文字字段
  • 该字段供顾客输入文字(例如姓名)
添加文字字段

b. 启用按字符显示色板

在文字字段设置中,启用按字符显示色板,然后分配:

  • Blue Alphabet → 第 1 个字符
  • Blue Alphabet 2 → 第 2 个字符
启用按字符显示色板

c. 启用按文字长度切换版式

启用按文字长度显示版式色板功能,这样版式就会根据顾客输入的字符数自动调整。

  • 文字长度 = 1 个字符 → 显示版式 1
  • 文字长度 = 2 个字符 → 显示版式 2
启用按文字长度切换版式

d. 设置 Global ID 以同步字符

现在,您需要为所有会受顾客输入的第一个字符影响的图层设置 Global ID:

  • Blue Alphabet
  • Black Alphabet
  • Red Alphabet
  • Blue Quotes
  • Black Quotes
  • Red Quotes

⚠️ 请勿选择引文选项集中的嵌套选项值,并将 Global ID 设为 1
当 Blue Alphabet 切换为字符 A 时,所有其他 Global ID = 1 的图层都会自动切换为对应的 A 值。对第二个字符重复相同的操作。

为同级选项集设置 Global ID

e. 按背景颜色设置显示条件

为确保颜色正确匹配,请选中所有黑色图层(字母 + 引文),并添加条件:仅当背景 = 黑色时显示

按背景颜色设置显示条件

对红色和蓝色字符重复相同的设置。这样可确保根据所选背景只显示对应颜色的素材。

f. 隐藏不必要的选项

批量隐藏不必要的选项

最终效果

当顾客输入 1 个字符(例如 c)时,只显示版式 1,并显示 C 对应的引文和字母

输入 1 个字符的效果

当顾客输入 2 个字符(例如 cd)时,显示版式 2,并相应显示 C 和 D 对应的引文和字母。

输入 2 个字符的效果

更新于:18/08/2026