> ## Documentation Index > Fetch the complete documentation index at: https://docs.meowgic.ai/llms.txt > Use this file to discover all available pages before exploring further. # How to build a product customization order workflow with Meowgic > Build a no-code product customization order workflow with Meowgic, link customer data to carts and orders, and retrieve it in your app admin. A complete product customization experience requires both customer-facing customization options and a reliable order workflow. Product customization iceberg model: input fields, live preview, image upload, and the customization button appear above the surface, while data storage, customization ID generation, product linking, cart and order integration, and admin lookup form the order workflow below. This guide focuses on building the product customization order workflow. It does not cover which customization inputs you should collect. We recommend starting with a customization button, a modal, and a separate product template. This setup has the least impact on other parts of your store, minimizes the work required from merchants, and helps customers stay focused on customization. ## Product customization order workflow overview Tell Meowgic how to save customization data, generate a customization ID, add the product to the cart, and carry the ID through to the order. Create a separate product template, hide the original purchase buttons, and confirm that other products are not affected. Complete a test order and confirm that you can use the customization ID to retrieve the customer's data in the app admin. ## 1. Describe the product customization order workflow in Meowgic When creating your app, add the following order workflow requirements to the feature description: Entering product customization order workflow requirements in Meowgic, including saving customization data, generating a customization ID, and linking it to the cart and order. ```text theme={null} Create a product customization Block and place it in the purchase area of the product page. The Block displays a “Custom Now” button. When a customer clicks it, open the customization modal. Enable an admin area for the app and save the complete customization data submitted by the customer. After the customer completes the customization, save the data first, then generate a unique customization ID. Write the customization ID to the product as a line item property, then add the product to the cart. Make sure the ID appears in both the cart and the order. Provide an ID lookup feature in the app admin so merchants can view the complete customization data submitted by the customer. If saving the data fails, do not add the product to the cart. ``` ## 2. Configure a separate product template for customizable products We recommend using a separate product template for customizable products. The steps below use Shopify as an example. Other ecommerce platforms may use different menu locations and interface labels, but the configuration principles are the same.
In the Shopify theme editor, create a dedicated template for customizable products based on the default product template. Selecting Create template from the product template menu in the Shopify theme editor to create a separate template for customizable products.
Enter a template name, then click **Create template**. Entering Custom Pillow in the Shopify Create a template dialog and clicking Create template.
Find the **Buy buttons** block and click the visibility icon on the right. Locating the Buy buttons block in the customizable product template and clicking the visibility icon to hide the native purchase buttons.
Confirm that **Buy buttons** is hidden and that only **Custom Now** remains on the product page. The Buy buttons block is hidden in the Shopify theme editor, leaving only the Custom Now button on the customizable product page.
Check whether other product templates contain the product customization Block. If they do, hide it so it does not affect regular products. Checking the default product template for the Pillow Customizer block to prevent the customization entry from appearing on regular products.
Go to the Shopify product editor and find the **Theme template** setting. Locating the Theme template setting on the Shopify product editing page, where the product currently uses the Default product template.
Select **custom-pillow**, then click **Save**. Assigning the custom-pillow theme template to the customizable product and clicking Save.
Open your storefront and check the purchase buttons on both the customizable product and other products. After you hide the original purchase buttons, customers must complete the customization before purchasing and cannot bypass the workflow.
Check the customizable product. The customizable product page displays only the Custom Now button, with the native Add to cart and Buy it now buttons hidden.
Check another product. A regular gift bag product page displays the quantity selector, Add to cart, and Buy it now buttons without a Custom Now button, showing that it is unaffected by the customizable product template. > If your theme includes quick-add or sticky purchase buttons, check whether customers can use them to bypass customization. ## 3. What does the customization ID do? A customization ID works like a claim ticket: * The complete customization data stays in the app admin. * The cart and order store only the customization ID. * The merchant uses the ID from the order to retrieve the complete data. A Shopify `line item property` is an extra piece of information attached to an item in the order. A customization ID works like a claim ticket: full customization details stay in the app, the cart and order store only the ID, and the merchant uses the customization ID from the order to retrieve the complete details. The complete customization data flow is: **Customer completes customization → App saves the data → App generates a customization ID → ID appears in the cart and order → Merchant uses the ID to retrieve the data** ## 4. How to test a product customization order Before publishing, complete an entire order as a real customer would. ### 1. Check the customizable product buttons Open the customizable product page. Confirm that it displays only **Custom Now** and that the native **Add to cart** and **Buy it now** buttons are hidden. The customizable product page displays only the Custom Now button, with the native Add to cart and Buy it now buttons hidden.
### 2. Upload a test image Click **Custom Now** and upload a test image that represents a realistic customer request. After the customer clicks Custom Now, the image upload dialog lets them upload a JPG, PNG, or WebP image and choose Remove background or Face cutout.
### 3. Adjust the crop and processing method Drag the crop frame to select the part of the image you want to keep. Choose **Remove background** or **Face cutout** based on the product, then click **Confirm & continue**. After uploading a cat photo, the customer adjusts the crop frame, selects Remove background, and clicks Confirm and continue.
### 4. Adjust the preview and add the product to the cart After the preview loads, adjust the outline width and color, then click **Confirm & add to cart**. The custom pillow preview shows the cat with its background removed, along with controls for outline width and color and a Confirm and add to cart button.
Wait for the system to save the design. Do not close the page or click the button again until saving is complete. The custom pillow preview is saving the design, with the button showing a Saving your design status.
### 5. Confirm the customization ID in the cart and order Once the design is saved, a dialog displays the customization ID and confirms that the product has been added to the cart. After customization is complete, a success dialog displays the customization ID PC-79HMCYR2 and confirms that the product was added to the cart.
Open the cart and confirm that the same customization ID appears below the product. The customized pillow in the shopping cart displays the customization ID PC-79HMCYR2.
After checkout, check the customization ID on the order confirmation page. The customized product on the order confirmation page displays the same customization ID, PC-79HMCYR2, as the shopping cart.
Open the corresponding order in the Shopify admin and confirm that the same ID appears below the product. The Shopify order details page displays the customization ID PC-79HMCYR2 beneath the customized product.
### 6. Look up the complete customization data by ID Enter the customization ID from the order in the Meowgic app admin, then search for it. Entering the customization ID PC-79HMCYR2 in the Meowgic app admin to find the corresponding customer customization record.
Open the result and confirm that you can view the complete customization data submitted by the customer. The Meowgic app admin displays the complete data for customization ID PC-79HMCYR2, including the original image, background-removed image, and trimmed result.
### 7. Check the purchase flow for other products Finally, open a product that does not use the customizable product template. Confirm that its original purchase buttons and order flow still work normally. If every check passes, your product customization order workflow is ready. ## Frequently asked questions The complete workflow includes collecting the customer's customization content, saving the data in the app admin, generating a unique customization ID, linking the ID to the product, adding the product to the cart and order, and using the ID to retrieve the complete data. This setup has the least impact on other parts of the store, reduces the work required to configure and maintain the experience, and helps customers stay focused on completing their customization without bypassing the workflow. If the native **Add to cart** or **Buy it now** buttons remain visible, customers may bypass the customization workflow and place an order without the required customization data. The customization ID is the unique link between the customer's customization data and the Shopify order. The complete data stays in the Meowgic app admin, while the cart and order store only the ID. Merchants use the ID to retrieve what the customer submitted. With the approach described in this guide, the complete customization data is not written directly to the Shopify order. The cart and order store only the customization ID, while images, text, previews, and other details stay in the Meowgic app admin. Using a separate product template and assigning it only to customizable products limits the changes to those products. Regular products can continue using their original purchase flow. Check them. If customers can use these buttons to bypass **Custom Now** and add a customizable product directly to the cart, hide or disable them on customizable product pages. No. With the workflow described in this guide, the app must not add the product to the cart when saving fails. This prevents orders whose complete customization data cannot be retrieved. Complete a realistic order as a customer. Confirm that only customizable products display **Custom Now**, regular products still work normally, the app generates a customization ID, the cart and order display the same ID, and you can use that ID to retrieve the complete data in the Meowgic app admin.
## Related reading Learn how to use images, reference links, and visual editing to build apps more accurately. Learn how to create and configure an app in Meowgic. Learn how to integrate an app with your store. Learn about Meowgic's core capabilities and the complete workflow from creating to publishing an app.
## Article created Created this article.