> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.customeow.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 新手向：跟着教程创建你的第一个定制功能

**定制功能：传图+刻字**

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/67e61aa3-d7f1-4053-884c-e45a38c88322.png?x-oss-process=image/format%2Cwebp)

> **教程图片中的标记1标记2仅代表当前截图的点击顺序**

## 一、创建定制功能

### 1. 创建空白定制功能

点击左侧菜单栏中的Feature Set-功能，再点击右上角的Create

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/ab4475a7-4ce0-44bb-bb70-47f6046fcceb.png?x-oss-process=image/format%2Cwebp)

点击Create a blank feature set-创建空白定制

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/6728ced2-6d6f-47db-a96b-fe3f58487d1f.png?x-oss-process=image/format%2Cwebp)

点击Skip

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/4b0410c1-20a9-4797-8b0d-062874acbebd.png?x-oss-process=image/format%2Cwebp)

### 2. 熟悉页面并修改名称

来到了定制功能搭建页面

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/1a3de54b-eaf8-428a-8ce7-5c51cbf56f84.png?x-oss-process=image/format%2Cwebp)

点击左上角可修改定制功能名字，输入完按回车即可

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/890b4edf-f7ec-4335-8da6-5f55df1e1981.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/ffaf85e1-cfb4-4142-afee-bc35d1dac929.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/1ca71a9d-3096-4840-b13b-a140a8629703.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/36c0d7c0-5b18-488d-94f3-f1cb743a362a.png?x-oss-process=image/format%2Cwebp)

## 二、添加传图和文本组件

### 1. 查找和添加组件

左边这一块是组件库，商户们可通过添加不同的组件到右侧操作台进行定制功能搭建

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/806bbab3-36bb-4637-ae01-55942183f251.png?x-oss-process=image/format%2Cwebp)

鼠标滚轮下滑查看更多组件

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/2fd44638-e5af-422f-b78a-1515c27628f7.gif?x-oss-process=image/format%2Cwebp)

点击组件分类栏

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/3f01b2cf-0a49-4c5a-94e3-86e518f6e85e.gif?x-oss-process=image/format%2Cwebp)

找到想要的组件后，可以通过拖拽或点击+号（当鼠标悬浮在组件图标上方时）添加至右侧操作台

**拖拽**

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/482b2a50-9a52-4279-9548-460b3beb0fa1.gif?x-oss-process=image/format%2Cwebp)

**点击添加按钮**

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/30221d80-c35f-42ba-8769-4292689311b0.png?x-oss-process=image/format%2Cwebp)

### 2. 添加传图组件

现在我们添加一个传图组件

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/ac3e8666-89e1-42cb-8f9d-46ce4a67d8af.png?x-oss-process=image/format%2Cwebp)

添加组件后，左侧会自动展开组件的配置项，可以输入组件标题（Label）等等

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/4e52a6f7-3b5f-4103-8130-249824ba5bfa.png?x-oss-process=image/format%2Cwebp)

### 3. 配置图片裁剪

给传图组件添加一个图片裁剪功能

1. 配置裁剪比例

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/437b0b51-4722-4dcb-8d9f-a948fb1e0b5a.png?x-oss-process=image/format%2Cwebp)

2. 选择设置裁剪比例，然后点击完成

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/c5cfb67e-8f50-4fa2-be62-46369908fcf9.png?x-oss-process=image/format%2Cwebp)

配置好后，可以看到裁剪功能勾选上了

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/784559b6-5ee2-4dc9-b4b9-1cad69e89398.png?x-oss-process=image/format%2Cwebp)

### 4. 添加文本组件

点击左上角的返回小按钮

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/ad47bec8-d0bc-4901-8c30-f5c21d952f13.png?x-oss-process=image/format%2Cwebp)

点击Add Component

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/a18d600e-95cc-47a9-9b99-e265aa090a3d.png?x-oss-process=image/format%2Cwebp)

添加Text-文本组件

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/643ae657-6607-4f20-8815-223d1a33accb.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/fdf7670f-7eb9-4a5e-8798-35c863fa61ae.png?x-oss-process=image/format%2Cwebp)

### 5. 调整组件顺序

如想调整组件顺序，可通过拖拽方式调整

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/fc5fa494-2e2b-42fb-8528-8552b13c389f.gif?x-oss-process=image/format%2Cwebp)

or

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/ec7de7c7-f41d-4db7-8b04-6c79ab4aad66.gif?x-oss-process=image/format%2Cwebp)

## 三、预览、测试并保存

搭建好后，点击右上角的Preview&Save（预览和保存），会进入到预览定制功能界面

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/37d3c2eb-5dcc-4824-b74a-61866715a48e.png?x-oss-process=image/format%2Cwebp)

### 手机端弹层样式预览

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/ac3c8190-03ab-4b36-b5e0-4e48ce0e77e7.png?x-oss-process=image/format%2Cwebp)

### 桌面端弹层样式预览

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/46e463f3-5aa5-413a-a5ce-c9cedb1ae6e5.png?x-oss-process=image/format%2Cwebp)

在这个界面里，可以进行定制功能测试，上传图片，输入文字等等。

确认无问题后，点击右上角保存即可。

### 集成到产品详情页

定制功能搭建好后，接下来就是集成操作。

[如何让「定制功能」集成到产品落地页？（产品详情页）](https://help.customeow.io/zh/article/5aac5l2v6k6p44cm5a6a5yi25yqf6io944cn6zug5oiq5yiw5lqn5zob6jc95zyw6ag177yf77yi5lqn5zob6km5oof6ag177yj-2ivrml/)

## 四、为定制功能添加预览

更新：给他添加上一个预览

商户需要做的操作是：

1. 完成设计模板制作
2. 完成组件和设计模板的图层数据关联

### 1. 制作预览设计模板

先来完成设计模板制作

#### 创建 2D 预览

1. 点击左侧导航栏的预览设计
2. 点击右上角创建

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/0c16f94b-cd04-4ec5-a344-70448370f59f.png?x-oss-process=image/format%2Cwebp)

选择2D预览

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/b40639f9-001d-4bda-94cd-6120ab27a192.png?x-oss-process=image/format%2Cwebp)

来到了预览设计的画布区域，左上角双击依然可以修改预览设计模板名字，这里不做演示

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/4dd39864-4ebc-407e-ae14-1a7daf383df5.png?x-oss-process=image/format%2Cwebp)

#### 添加产品图和预设图

尝试把素材图从你本地文件夹拖转到画布中，先穿产品空白样图

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/bc93e824-d6e9-4d5e-87d5-6f87f9677a2f.gif?x-oss-process=image/format%2Cwebp)

这个产品的定制功能是传图+刻字，因此先把传图位置对应的预设图放到预览设计中

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/fcd78ac7-6134-4598-842c-b2daf98e6925.gif?x-oss-process=image/format%2Cwebp)

调整完后，点击画布空白处

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/7e5c627c-32c7-4e53-894d-3da0146b6d79.png?x-oss-process=image/format%2Cwebp)

#### 添加文字图层

点击添加设计元素

* 设计元素中有很多不同类型的图层，文字图层，形状图层，图片图层，日历图层等等。

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/e1265033-f783-4fec-bc10-478d070aa9cd.png?x-oss-process=image/format%2Cwebp)

点击添加文字图层

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/a7585f55-37ac-4534-93fc-fbca9301a6bf.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/3a9fb019-2aa6-4a65-b885-a63156bd2839.png?x-oss-process=image/format%2Cwebp)

#### 调整位置并保存

在画布中拖拽文字图层调整位置，调整结束后点击右上角的保存，预览设计模板这一步就算完成了。

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/8a121829-1454-44b9-8a66-a360c33c90cc.gif?x-oss-process=image/format%2Cwebp)

### 2. 关联组件与设计图层

#### 导入预览设计模板

回到定制功能页面，点击添加组件

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/cf49077c-fb21-487a-9f0a-a2086cb19966.png?x-oss-process=image/format%2Cwebp)

添加预览组件

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/438a2c4f-6cbe-42bc-94f1-a37d06abbef0.png?x-oss-process=image/format%2Cwebp)

点击导入，然后选择刚刚创建的预览设计模板

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/b6a0ea6c-a39f-4fab-b6a2-10d4e09b2d13.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/4ac1a9ed-b2d1-4e7b-8ab3-7dac30c166ba.png?x-oss-process=image/format%2Cwebp)

这一步是AI识别图层自动创建组件，但本教学跳过这一步

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/ccee9492-dfb3-4080-88b2-0f4a7f53a99a.png?x-oss-process=image/format%2Cwebp)

#### 添加定制图层

添加完毕后，点击下方的工作流浮层 ，我们进行组件与设计图层数据对接

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/9c91fd6a-2f0b-4268-b12a-abcb6ea2bf1e.png?x-oss-process=image/format%2Cwebp)

点击预览组件的「添加定制图层」

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/65bc51dc-0049-4607-8011-cb414122483e.png?x-oss-process=image/format%2Cwebp)

打开后，可以先把文字图层展开

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/f2acb3e8-1ea7-42e0-b79b-120c780e0860.png?x-oss-process=image/format%2Cwebp)

展开后可以发现文字图层有内容，颜色，描边颜色，字体，大小等等

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/4d9ce1ce-1c1c-4782-9caa-5181d0fab7f4.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/ab05a218-ff35-4376-8a9a-835642fb201c.png?x-oss-process=image/format%2Cwebp)

然后我们勾选对应的对应图层把他设定为「定制图层」然后点击右下添加

回到WorkFlow界面，可以看到定制图层已经添加了

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/066b8bfa-ce6f-4a37-8c14-12e5ad70e802.png?x-oss-process=image/format%2Cwebp)

#### 连接组件与定制图层

接下来就是连线

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/f7921643-dc75-40f2-8f53-a8f3c9d6bda5.gif?x-oss-process=image/format%2Cwebp)

连线完毕

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/36d83409-783c-4c5b-9621-1350fcf63da4.png?x-oss-process=image/format%2Cwebp)

#### 预览最终效果

点击右上角预览一下吧

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/0f26d045-2e44-4b21-87c9-676d2e680a03.gif?x-oss-process=image/format%2Cwebp)
## 拓展阅读

### 新手入门

- [连接店铺](https://help.customeow.io/zh/article/6le5o6l5bqx6zo6-1hgumgi/)
- [如何让「定制功能」集成到产品落地页？（产品详情页）](https://help.customeow.io/zh/article/5aac5l2v6k6p44cm5a6a5yi25yqf6io944cn6zug5oiq5yiw5lqn5zob6jc95zyw6ag177yf77yi5lqn5zob6km5oof6ag177yj-2ivrml/)

### 进阶功能

- [定制喵中的「模板」](https://help.customeow.io/zh/article/5a6a5yi25za15lit55qe44cm5qih5p244cn-1fy2no5/)
- [使用组件的条件判断实现组件的显示隐藏控制](https://help.customeow.io/zh/article/5l255so57ue5lu255qe5p2h5lu25yik5pat5a6e546w57ue5lu255qe5pi56s66zqq6jep5o6n5yi2-1dxls92/)
- [工作流-WorkFlow能干什么](https://help.customeow.io/zh/article/workflow-36no1x/)

### 加价与追销

- [什么是追销产品？](https://help.customeow.io/zh/article/5lua5lmi5piv6l96zsa5lqn5zob77yf-1ggsy/)
- [什么是加价产品？](https://help.customeow.io/zh/article/5lua5lmi5piv5yqg5lu35lqn5zob77yf-pbohnp/)
- [关于加价产品和追销产品以及其在购物车绑定方法](https://help.customeow.io/zh/article/5ywz5lqo5yqg5lu35lqn5zob5zkm6l96zsa5lqn5zob5lul5yk5yw25zyo6lst54mp6l2m57ur5a6a5pa55rov-1pyslym/)