Shopify App | Documentation

CI Product Designer

If you have any questions beyond the scope of this guide, feel free to email us at info@cynoinfotech.com.

Information

Product designer tool to make every order unique. Product customization make your store more interactive, creative, and conversion-ready by letting customers design their own products. With the product personalizer, shopper can easily customized their own product such as t-shirt, phone covers, bags and many more. Customer can select images, colors, fonts and cliparts with categories. Additionaly, customers get a real-time preview and can create their own draft design before placing the order.

Key Features:

1. Seamless setup with a user-friendly interface and fast integration.
2. Merchant can upload images, fonts, colors and cliparts from assets.
3. Shoppers can create and save their own design drafts, perfect for later edits or approval before checkout.
4. Print on demand tool supports with custom color and variant color options.
5. Custom colors available for product masking images.

Enable App

Enable App Embed

To make Product Designer work properly on your storefront, app embed must be enabled. follow these steps to enable app embed:

Customize Button Position

The Customize Product Button lets shoppers open the design tool. By default, it appears above the Add to Cart button:

App Settings

Welcome to the Settings panel. Here you can customize every aspect of your Product Designer experience. Use the tabs below to navigate between different setting categories.

Button Appearance

Match the Customize Product Button to your store’s branding by adjusting its appearance in the app settings.

A button that blends with your theme looks professional and builds customer trust.

Available customizations

• Button Text: Change from default "Design It" to your preferred text.
• Colors: Adjust button background, border, and text colors for normal and hover states.
• Size & Spacing: Control width, padding, margins, and border radius.
• Typography: Modify font size and weight.
• Effects: Enable/disable button shadow.

Additional Settings

Configure how the design tool behaves and integrates with your store.

Design Requirements

• Require Design Before Add to Cart: When enabled, the Add to Cart button will first open the design tool.Customers must create a design before adding the product to cart.
• Redirect to Cart: Automatically redirect customers to the cart page after adding a product with design. Disable to keep them on the product page..

File Upload Limits

• Maximum File Size: Set the maximum file size (in MB) customers can upload in the design tool.

Customer Notes

• Enable Note Field: Allow customers to add custom notes with their design.
• Field Title: Customize the note field label.
• Required Field: Make notes mandatory before adding to cart.

Element Selectors

If you have a custom theme and the Customize Button doesn't appear or you're facing display issues, you can add custom Class or ID selectors..

When to use this section

• Button not showing on product pages.
• Button appearing in wrong location
• Conflicts with custom theme elements

Available Selectors to configure

• Inject Selector: Where the design button should be inserted.
• Add to Cart Form Selector: Identify the add to cart form.
• Add to Cart Button Selector: Identify the add to cart button.
• Checkout Button Selector: Identify the checkout button.

Setup Personalized Products

Choose which products you'd like customers to personalize and configure how they can be customized.

This ensures only selected products show the Customize Product button and design tool, keeping your store clean and efficient.

Add New Products

How to add products for personalization:

1. Navigate to Products Section

• From the Product Designer app, go to the Products page
• Click the "Add New" button in the top right corner

2. Select Products from Your Catalog

• A Shopify product picker will open showing your store's catalog
• Browse or search for products you want to enable for personalization
• Select one or multiple products using checkboxes
• Click "Add" to confirm your selection

3. Automatic Setup

• Selected products are automatically added to your personalized products list
• Basic configuration is applied with default settings
• Products appear in the table with "Active" status

Product Configuration

Customize how each product can be personalized:

Accessing Configuration

1. In the products table, find the product you want to configure
2. Click the "Configuration" button in the Actions column
3. A configuration modal will open with two main sections

1. Personalization Settings

Enable specific personalization features for this product:

🎨 Product Colors

Enable Product Colors: Allow customers to change product colors

Color Options:

• Custom Colors: Use predefined color palette from your settings. Custom colors apply exclusively to product masking images
• Variant Color Options: Use existing product color variants.

📁 Upload Feature

Enable Upload: Allow customers to upload their own images/graphics

✏️ Text Personalization

Enable Text: Allow customers to add custom text with various fonts and colors

🖼️ ClipArt Library

Enable ClipArt: Provide access to clipart image library

2. Preview & Print Area Setup

Canvas Preview & Image Selection

Main Image for Canvas

• The selected image becomes the main background displayed on the canvas
• This image serves as the base for all personalization previews
• Customers will see their designs applied to this specific product image

How to Select the Main Image

1. Browse Available Images: View all product images and uploaded custom images in the gallery
2. Click to Select: Click any image thumbnail to set it as the main canvas background
3. Visual Confirmation: Selected images show a blue border and checkbox indicator
4. Automatic Update: The canvas immediately refreshes with your chosen image

Setting the Print Area

1. Drag and Resize: Click and drag the dashed border box to define where personalization elements will appear
2. Position Precisely: Move the box to the exact location on your product
3. Adjust Size: Resize the box to match your desired personalization area
4. Real-time Preview: See exactly how designs will position on your selected product image

Print Area Guidelines:

• Position the box over the printable surface of your product
• Ensure the area is large enough for typical design elements
• Avoid edges where printing may not be possible
• Consider your product's physical constraints

Image Management

• Product Images: Automatically loads your product's existing images
• Custom/Masking Images: Upload additional images specifically for personalization

Color Application (For Custom Colors)

• When custom colors are enabled, click color swatches to apply them to the preview
• Colors apply to product masking images for realistic previews
• Note: If the selected color doesn't apply to the image, it may not be a valid masking image.

Personalized Assests

Add your own creative assets like fonts, cliparts, and color palettes to enhance the personalization experience.

These assets give customers more creative freedom and keep designs aligned with your brand.

Colors

Create custom color palettes for customers to use in their designs.

Branded color schemes ensure designs stay consistent with your store's visual identity.

Adding Colors

1. From the Product Designer app, go to Assets → Colors
2. Click Add New to open the color creation modal
3. Enter a descriptive Label (e.g., "Brand Blue", "Summer Coral")
4. Set the color using:
   • Code Input: Type the exact hex code (e.g., #FF6B35)
   • Color Picker: Click the color box to choose visually
5. Click Save - the color becomes available in the design tool

Managing Colors

• Edit: Click the menu icon → Edit to modify existing colors
• Status Toggle: Quickly activate/deactivate colors without deleting
• Bulk Actions: Select multiple colors to delete at once
• Search & Filter: Find colors by name or filter by active status

Fonts

Add custom typography or Google Fonts to expand text styling options..

Diverse font libraries allow customers to match text styles with their design vision.

Adding Custom Fonts

1. From the Product Designer app, go to Assets → Fonts
2. Click Add New and ensure "Upload Custom Font" is selected
3. Drag and drop or click to upload .TTF font files
4. The font name is automatically extracted from the file
5. Toggle activation status if needed
6. Click Save - fonts process automatically and appear when ready

Adding Google Fonts

1. Choose Google Font as the source type
2. Enter the Font Label (display name in the designer)
3. Paste the Google Font URL from fonts.google.com
4. Save to instantly add the font to your library

Managing Fonts

• Preview: See how each font renders in the fonts list
• Status Toggle: Quickly activate/deactivate fonts without deleting
• Bulk Actions: Select multiple fonts to delete at once
• Search & Filter: Find fonts by label or filter by active status

Cliparts

Organize and upload clipart images into categorized libraries.

Diverse font libraries allow customers to match text styles with their design visionCategorized cliparts help customers quickly find the perfect graphics for their designs.

Setting Up Categories

1. From the Product Designer app, go to Assets → Cliparts
2. In the Categories panel, click Add New
3. Enter a descriptive Category Name (e.g., "Holiday", "Animals", "Business")
4. Set active status and save
5. Categories appear in the left panel for easy navigation

Uploading Cliparts

1. Select a category from the left panel
2. Click Upload Cliparts (only available when a category is selected)
3. Drag and drop or select multiple image files
4. Supported formats: JPEG, JPG, PNG, SVG
5. Maximum file size: 2MB per image
6. Click Upload - images process and appear in the selected category

Managing Cliparts & Categories

• Category Management: Edit, delete, or reorganize categories
• Clipart View: Browse all images within each category
• Bulk Upload: Add multiple cliparts to a category at once
• Quick Delete: Remove individual cliparts with one click

Customer Designs

The Customer Designs page provides a centralized dashboard where store owners can view, manage, and export all product designs created by customers through the Product Designer tool.

Each record represents a design session linked to a product and optionally connected to an order.

Advanced Filtering & Search

You can quickly locate designs using:

• Text Search: Find designs by product, order ID, or customer details
• Filter by Order Status:
  • Linked to Order: Designs already part of a Shopify order.
  • Not Ordered: Designs created but not yet purchased.
• Filter by Design Status:
  • Draft: Saved but not added to cart.
  • Added To Cart: Design added to cart but not yet ordered.
  • Ordered: Completed orders containing this design.

Design List Overview

Each row shows:

• Design ID and Name
• Preview thumbnails for each design side
• Linked order and customer info (with direct Shopify Admin links)
• Customer notes entered during design
• Design Status and Created Date

Export & Download Options

For each design, click the Downloads button to export design files in various formats.

You can export each side of a design as:

Product Designer Tools

Welcome to the Product Designer, a tool that lets you fully personalize your products before purchasing.

You can add text, upload images, use cliparts, and create unique artwork directly from the product page.

1. Accessing the Designer

You can launch the designer directly from the product page of any customizable item.

Steps

1. Open a customizable product.
2. Click the “Design It” button to launch the Design Tool popup.
3. The design editor will open, allowing you to add text, images, cliparts, and shapes to the product.
4. Start creating your design using the available tools.

2. Available Tools and Features

Once the Designer is open, you can use the toolbar to create and edit your design.

Available Tools:

🎨 Color Tabs

The Color Tabs section lets you change how your product looks.

• Change product color from the Color Tabs
• Choose from preset color options or color images

✏️ Add Text

• Click the Text button to add text
• Edit text content directly on the canvas
• Customize font family, size, color, and alignment.
• Rotate or move text freely

🖼️ Upload Image

Upload your own image or logo

• Click the Upload Image button to add your own logo or artwork
• Supported formats: JPG, PNG, SVG.
• Drag to move, resize, or rotate the image on the canvas.

🖼️ Cliparts

• Open the Cliparts tab to browse available icons and graphics.
• Click any clipart to add it to the canvas.
• Adjust its position and size as needed.

📚 Layers Panel:

The Layer Panel shows every object you’ve added.

You can:

• Reorder layers (bring forward / send backward)
• Lock / unlock elements
• Hide / show layers
• Delete unwanted layers

🔄 Undo / Redo:

Step backward or forward through your design history

• Use Undo (↩) to revert your last action
• Use Redo (↪) to restore the previous state.

🧭 Move & Align Objects:

When an object is selected, you’ll see arrow controls to move it precisely:

• Move Up / Down / Left / Right
• Align to canvas center (horizontal or vertical)
• Rotate using the rotation handle or rotate buttons

👁️‍🗨️ Preview Design:

View your complete design in preview mode (no editing)

🗑️ Reset Design:

Clear all objects and start a new design layout.

3. Object Controls

When an object (text, image, clipart) is selected, several controls appear in the bottom toolbar:

4. Saving and Ordering

You can save your current design at any time.

💾 To Save a Design:

1. Click the Save Design button in the editor.
2. If logged in, your design will be stored in My Designs tabs.
3. Guests can still save temporarily by email, but must log in to view or edit saved designs later by same email

🛒 When Adding to Cart::

1. The system will automatically save your design and attach a preview image to your cart item.
2. The same preview image appears in your cart, checkout, and order confirmation page
3. Your print-ready design is also stored in the merchant dashboard for production

5. Managing Saved Designs

You can view and manage all your saved designs from the “My Designs” tab in the designer.

Features:

• Preview: See thumbnail previews of each saved design.
• Edit: Click the edit icon ✏️ to reopen a design in the editor.
• Rename: Use the rename option to give your design a custom name.
• Delete: Remove unwanted designs (available only for designs in Draft status).

Note: Designs that have already been added to cart or ordered cannot be deleted

Support

If this documentation doesn't answer your questions, please feel free to email us at info@cynoinfotech.com

Our support team operates in the GMT +5:30 time zone and responds to all inquiries within 12-24 hours on weekdays. In rare cases, the response time may extend to 48 hours, especially during the holidays, which may take longer..

Please don't forget to rate our app 5 stars ( ) on the App Store if you are satisfied with our app and customer support! Your feedback is greatly appreciated and helps us improve our services. Thank you!

Changelog

Version 1.0 (16 October, 2025)

Initial Release