> ## 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). # Beginner Guide: Create Your First Customization Feature Step by Step **Customization feature: image upload + text engraving** ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/67e61aa3-d7f1-4053-884c-e45a38c88322.png?x-oss-process=image/format%2Cwebp) > **Note:** The labels “1” and “2” in the tutorial images only indicate the click order in that screenshot. ## 1. Create a customization feature ### 1. Create a blank feature set Click **Feature Set** in the left-hand menu, then click **Create** in the upper-right corner. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/ab4475a7-4ce0-44bb-bb70-47f6046fcceb.png?x-oss-process=image/format%2Cwebp) Click **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) Click **Skip**. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/4b0410c1-20a9-4797-8b0d-062874acbebd.png?x-oss-process=image/format%2Cwebp) ### 2. Explore the builder and rename your feature You are now on the customization-feature builder page. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/1a3de54b-eaf8-428a-8ce7-5c51cbf56f84.png?x-oss-process=image/format%2Cwebp) Click the upper-left corner to rename the customization feature. Press Enter when you are done. ![](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) ## 2. Add image-upload and text components ### 1. Find and add components The panel on the left is the component library. Merchants can build a customization feature by adding components to the workspace on the right. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/806bbab3-36bb-4637-ae01-55942183f251.png?x-oss-process=image/format%2Cwebp) Scroll down to view more components. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/2fd44638-e5af-422f-b78a-1515c27628f7.gif) Click a component category. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/3f01b2cf-0a49-4c5a-94e3-86e518f6e85e.gif) Once you find the component you want, drag it to the workspace on the right, or click the **+** icon that appears when you hover over the component. **Drag and drop** ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/482b2a50-9a52-4279-9548-460b3beb0fa1.gif?x-oss-process=image/format%2Cwebp) **Click the Add button** ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/30221d80-c35f-42ba-8769-4292689311b0.png?x-oss-process=image/format%2Cwebp) ### 2. Add an image-upload component Now, add an image-upload component. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/ac3e8666-89e1-42cb-8f9d-46ce4a67d8af.png?x-oss-process=image/format%2Cwebp) After adding a component, its configuration options automatically expand on the left. You can enter a component title (Label), among other settings. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/4e52a6f7-3b5f-4103-8130-249824ba5bfa.png?x-oss-process=image/format%2Cwebp) ### 3. Configure image cropping Add an image-cropping feature to the image-upload component. **1. Configure the crop ratio** ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/437b0b51-4722-4dcb-8d9f-a948fb1e0b5a.png?x-oss-process=image/format%2Cwebp) **2. Select Set crop ratio, then click Done** ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/c5cfb67e-8f50-4fa2-be62-46369908fcf9.png?x-oss-process=image/format%2Cwebp) After configuration, you can see that the crop feature is enabled. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/784559b6-5ee2-4dc9-b4b9-1cad69e89398.png?x-oss-process=image/format%2Cwebp) ### 4. Add a text component Click the small Back button in the upper-left corner. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/ad47bec8-d0bc-4901-8c30-f5c21d952f13.png?x-oss-process=image/format%2Cwebp) Click **Add Component**. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/a18d600e-95cc-47a9-9b99-e265aa090a3d.png?x-oss-process=image/format%2Cwebp) Add a **Text** component. ![](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. Reorder components To change the component order, drag and drop the components. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/fc5fa494-2e2b-42fb-8528-8552b13c389f.gif) or ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/ec7de7c7-f41d-4db7-8b04-6c79ab4aad66.gif) ## 3. Preview, test, and save When you finish building the feature, click **Preview & Save** in the upper-right corner to enter the customization-feature preview. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/37d3c2eb-5dcc-4824-b74a-61866715a48e.png?x-oss-process=image/format%2Cwebp) ### Mobile modal-style preview ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/ac3c8190-03ab-4b36-b5e0-4e48ce0e77e7.png?x-oss-process=image/format%2Cwebp) ### Desktop modal-style preview ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/46e463f3-5aa5-413a-a5ce-c9cedb1ae6e5.png?x-oss-process=image/format%2Cwebp) On this page, you can test the customization feature by uploading images, entering text, and more. Once everything looks correct, click Save in the upper-right corner. ### Integrate with your product detail page Once the customization feature is built, the next step is integration. [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/) ## 4. Add a preview to your customization feature Next, add a preview to your customization feature. Merchants need to complete the following: 1. Create the design template. 2. Connect the component data with the design-template layers. ### 1. Create a preview design template #### Create a 2D preview First, create the design template. 1. Click **Preview Design** in the left navigation. 2. Click **Create** in the upper-right corner. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/0c16f94b-cd04-4ec5-a344-70448370f59f.png?x-oss-process=image/format%2Cwebp) Choose **2D Preview**. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/b40639f9-001d-4bda-94cd-6120ab27a192.png?x-oss-process=image/format%2Cwebp) You are now in the Preview Design canvas. You can still double-click the upper-left corner to rename the preview design template; this is not demonstrated here. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/4dd39864-4ebc-407e-ae14-1a7daf383df5.png?x-oss-process=image/format%2Cwebp) #### Add the product mockup and preset image Try dragging assets from a local folder onto the canvas. First, upload a blank product mockup. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/bc93e824-d6e9-4d5e-87d5-6f87f9677a2f.gif) This product supports image upload and text engraving, so first add the preset image for the image-upload position to the preview design. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/fcd78ac7-6134-4598-842c-b2daf98e6925.gif) After adjusting it, click an empty area of the canvas. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/7e5c627c-32c7-4e53-894d-3da0146b6d79.png?x-oss-process=image/format%2Cwebp) #### Add a text layer Click **Add Design Element**. - There are many types of design-element layers, including text, shape, image, and calendar layers. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/e1265033-f783-4fec-bc10-478d070aa9cd.png?x-oss-process=image/format%2Cwebp) Click **Add Text Layer**. ![](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) #### Adjust the position and save Drag the text layer on the canvas to adjust its position. When finished, click Save in the upper-right corner to complete the preview design template. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/8a121829-1454-44b9-8a66-a360c33c90cc.gif) ### 2. Connect components to design layers #### Import the preview design template Return to the customization-feature page and click **Add Component**. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/cf49077c-fb21-487a-9f0a-a2086cb19966.png?x-oss-process=image/format%2Cwebp) Add a Preview component. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/438a2c4f-6cbe-42bc-94f1-a37d06abbef0.png?x-oss-process=image/format%2Cwebp) Click **Import**, then select the preview design template you just created. ![](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) At this step, AI can recognize layers and create components automatically, but this tutorial skips that step. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/ccee9492-dfb3-4080-88b2-0f4a7f53a99a.png?x-oss-process=image/format%2Cwebp) #### Add custom layers After adding the component, click the Workflow panel at the bottom to connect component data with design layers. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/9c91fd6a-2f0b-4268-b12a-abcb6ea2bf1e.png?x-oss-process=image/format%2Cwebp) Click **Add Custom Layer** in the Preview component. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/65bc51dc-0049-4607-8011-cb414122483e.png?x-oss-process=image/format%2Cwebp) After opening it, first expand the text layer. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/f2acb3e8-1ea7-42e0-b79b-120c780e0860.png?x-oss-process=image/format%2Cwebp) After expanding it, you will find options such as content, color, outline color, font, and size. Select the appropriate layer, set it as a **Custom Layer**, then click Add. ![](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) Return to the WorkFlow page, where you can see that the custom layer has been added. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/066b8bfa-ce6f-4a37-8c14-12e5ad70e802.png?x-oss-process=image/format%2Cwebp) #### Connect components to custom layers Next, connect the nodes. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/f7921643-dc75-40f2-8f53-a8f3c9d6bda5.gif) The connections are complete. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/36d83409-783c-4c5b-9621-1350fcf63da4.png?x-oss-process=image/format%2Cwebp) #### Preview the final result Click Preview in the upper-right corner to see the result. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261022/0f26d045-2e44-4b21-87c9-676d2e680a03.gif) ## Further Reading ### Getting Started - [Connect Your Store](https://help.customeow.io/en/article/connect-your-store-9kzhxj/) - [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/) - [What Can Workflow Do?](https://help.customeow.io/en/article/what-can-workflow-do-3jwgks/) ### 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/)