> ## 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).

# What Can Workflow Do?

## How it works

Workflow connects component data to template layers with links, turning static layers into dynamic ones.

## What can it do?

### Display entered text in a preview

When an engraving component is connected to a text layer in a Preview template, entered text appears in the preview.

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/59157388-c29c-4f50-8f4b-ab8261999e24.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/cb51354f-0ce4-4244-8970-73dcf79f4a78.gif)

#### Connect a multiline-text component

It can also connect to a multiline-text component.

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/9f432c41-7177-49e9-ac3d-9b31c4fbfc5d.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/ad666ac7-47dd-40dd-9617-8bcfb53f9996.gif)

### Change the text font and color

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/f2c81ab5-a01a-4228-ab1a-5f6929b7fad3.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/3e9841eb-7bb6-42be-8210-b13a7af17c74.gif?x-oss-process=image/format%2Cwebp)

### Let customers upload photos

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/4175dbca-9b6c-4a7f-96ef-f459f558b8fd.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/59d405bd-7c05-433a-897b-89ff28667fe9.gif)

### Change the preview image

Connect an image-picker component to an image layer in a template to switch the preview image based on the selected option.

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/6dc7b9ed-23f2-4133-a487-3a98935b99d9.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/6f8ee375-3a8c-4724-a72e-0cdab909edf1.gif?x-oss-process=image/format%2Cwebp)

### Connect one output to multiple inputs

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/fd5c7c4e-c7c4-44d8-a22f-153ad4af443a.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/5d4f7408-7c28-494f-8787-951c5abeba00.gif?x-oss-process=image/format%2Cwebp)

> **Tip:** Group multiple layers to simplify your workflow. For text layers, make sure to select the checkbox.

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/ae4a2677-ece8-4bc2-867a-54f9db021659.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/13cae38b-e05f-4929-9b6a-2f88a73ed17c.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/1c2ac009-5ee2-449b-9c9b-ab2954c32556.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/3db2a9cf-b129-4cb6-9af6-2e43b4aa77ed.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/870fd9e4-8192-417c-8a49-fba489219e81.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/36824f50-91bb-4783-81fc-dc142a1f8bc4.png?x-oss-process=image/format%2Cwebp)

### Multiple outputs connected to one input

- Coming soon.

### Process data with functions and conditions

In addition to direct connections, right-click the Workflow panel to add **Condition** and **Function** nodes for data processing.

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/c7f6cad4-5ac3-4c8a-88ba-fa37481a70ab.png?x-oss-process=image/format%2Cwebp)

For example:

#### Function — Extract Initials

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/0e3d612d-12d2-426f-a54e-fb3b2d87f90c.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/fbebec3a-984c-4626-8a2b-e348b093bf7c.gif)

#### Function — Combine Content from Two Single-Line Text Fields

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/06d8b4df-6697-4e21-9bea-5c32cb5e482c.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/7f978045-87c6-4837-889d-9b6139229a81.gif?x-oss-process=image/format%2Cwebp)

#### Condition — Set Output Based on User Selection

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/ac0d8481-b83c-439b-9394-d13a39f2dea9.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/a7767cdd-22e3-4750-8003-1efb5b2327f2.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/7bfcb5c6-063e-427e-97fc-f6885bf60ca5.gif?x-oss-process=image/format%2Cwebp)

> More functions and conditions are available to explore.

## Entry points

### One-step customization

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/2ce6f73c-a65b-4cde-8f97-58f479ef97dd.png?x-oss-process=image/format%2Cwebp)

### Feature sets

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/5edd7511-a4ea-4986-82db-6ffc1c22a94d.png?x-oss-process=image/format%2Cwebp)

## How to use it

To connect nodes, click and hold an output, then drag it to an input.

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/497942a5-be57-4f94-8dfc-e9977d597acc.gif?x-oss-process=image/format%2Cwebp)

### Move around the interface

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/ddcd997e-9e83-4e0f-8a11-0fd7acec23ba.gif?x-oss-process=image/format%2Cwebp)

## Cards

Components appear in Workflow as cards that show inputs and outputs; some components have no inputs. Card inputs are on the left and outputs are on the right.

### Text components

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/b2e823d0-f523-4442-8aa1-1a13eb8d1612.png?x-oss-process=image/format%2Cwebp)

### Photo upload components (one image)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/0c9b8464-e3c0-4a1a-82ed-f5829d31fb3d.png?x-oss-process=image/format%2Cwebp)

### Photo upload components (sixteen images)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/baf394a0-fbc2-4ccf-9d68-b312583dbcc3.png?x-oss-process=image/format%2Cwebp)

> **Note:** Preview, Mockup Preview, and 3D Preview display cards in Workflow only after importing a template. Inputs appear only after adding custom layers.

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/aeb890d6-419f-4ff5-80e7-8eed4ad81e06.png?x-oss-process=image/format%2Cwebp)

### Preview component example

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/9e8c341f-8fbf-42ff-895e-19c8320b540f.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/993989d5-19ea-46d7-832c-3bb08a428f6d.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/5f6bec99-e097-413a-8570-3a6f784742f7.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/835bea49-8221-4b79-8bb4-2d705cf35c26.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/73dd9867-9596-4ebf-bb0a-890eb1aa0d23.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/c8afb5f2-81a9-44ca-820f-f9a50e43a626.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/af0a0c7d-f62d-44ec-8316-c6e67abd21dc.png?x-oss-process=image/format%2Cwebp)

> **Note:** Schematic, Pop Modal, Description, Alert, and Countdown components have no inputs or outputs, so they do not appear as cards in Workflow.

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/e443252d-2ecf-487a-8c45-9d71b0be27a1.png?x-oss-process=image/format%2Cwebp)

## Data types

Inputs and outputs can connect only when they have the same data type. Dashed-line effects indicate compatible connection points while dragging.

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/f3be3cbe-5120-4eef-8963-0fe6e9584781.png?x-oss-process=image/format%2Cwebp)

The **Value** next to a data type is the name of the component input or output and is unrelated to its type.

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/71a81f77-0a04-4ad2-845b-0607bf86d3d2.png?x-oss-process=image/format%2Cwebp)

For example, in a music-selection component, **Name** is the song chosen by the customer, while the data type is text.

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/e7f384f5-06e2-497b-8c48-37509a5dd0cb.png?x-oss-process=image/format%2Cwebp)

> **Tip:** Expand a text layer using the arrow on the right to select more data types.

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/b3f10a48-fcbd-4ddb-8bf5-eda1dd9bff6e.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/630a86d8-8d5d-46ce-819d-e811c7df52cb.png?x-oss-process=image/format%2Cwebp)

> **Text ratio** must connect to text content and is commonly used with a menu-selector component whose values are numbers.

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/3ae041af-5c9f-42ce-9785-aeeb0786a3c8.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/f67e7e60-9638-4d1d-857c-4a3f190c9353.png?x-oss-process=image/format%2Cwebp)

## Further Reading


### Getting Started

- [Connect Your Store](https://help.customeow.io/en/article/connect-your-store-9kzhxj/)
- [Beginner Guide: Create Your First Customization Feature Step by Step](https://help.customeow.io/en/article/beginner-guide-create-your-first-customization-feature-step-by-step-3th848/)
- [How to Integrate a Customization Feature into a Product Landing Page (Product Detail Page)](https://help.customeow.io/en/article/how-to-integrate-a-customization-feature-into-a-product-landing-page-product-detail-page-9b1ke5/)

### Advanced Features

- [Templates in CustoMeow](https://help.customeow.io/en/article/templates-in-customeow-d69xbk/)
- [Use Component Conditions to Control Whether Components Are Shown or Hidden](https://help.customeow.io/en/article/use-component-conditions-to-control-whether-components-are-shown-or-hidden-1r2defw/)

### Add-on Pricing and Upselling

- [What Is an Add-on Price Product?](https://help.customeow.io/en/article/what-is-an-add-on-price-product-959ka/)
- [What Is an Upsell Product?](https://help.customeow.io/en/article/what-is-an-upsell-product-9pmt71/)
- [Cart Binding for Add-Price and Upsell Products](https://help.customeow.io/en/article/cart-binding-for-add-price-and-upsell-products-bi7wjx/)