* Variants without a PNG mask image will appear as non-customizable. This allows you to mix pre-designed variants with customizable variants within the same product.

* Download the configuration image example: Download

* The PNG mask defines the printable area. All non-printable areas should be transparent. It must align proportionally with the background image and have the same width/height ratio.

   1. Open your background product image in Photoshop.

   2. Use any selection tool to select the area you want to keep as the printable region.

   3. Invert the selection, then use the background eraser tool and click once to clear the unwanted area.

   4. Press Delete or Backspace to remove the remaining selected region.

* The SVG outline is used for positioning during printing. It must align proportionally with the PNG mask and have the same width/height ratio. If no SVG outline image is provided, an outline path using the background image dimensions will be exported together with the design for your reference.

   1. Create a new Illustrator file, then click File > Place... to insert your PNG mask image.

   2. Click Object > Artboards > Fit to Artwork Bounds to reset the dimensions.

   3. With the PNG selected, open Window > Image Trace.

   4. With the default presets, make sure the mode is Black and White, then adjust Threshold to show the working area. Usually this is around 250. Click Trace to apply.

   5. Go to Object > Image Trace > Expand to convert it into vector paths.

   6. Remove the object background, set the stroke color and width, then save it as an SVG file.

* While most themes are compatible with the app, about 10% of themes refresh the cart drawer or product images frequently. This may prevent the app from collecting product information correctly. If the app or designs do not appear, please let us know and we will check for a workaround.

* The Buy with Shop button on the product page does not support the customization step. We recommend hiding this button in the theme for customizable products.

* Although the export resolution can be as large as 4000px wide, bigger files can significantly increase upload time during Add-to-Cart and may reduce conversion.

* Depending on the SVG metadata, the outline may not perfectly align with the mask. Always verify exported files before launching.

If there are display issues in the theme and the settings page cannot adjust certain behavior, you can dispatch the following event messages to document.body.

* designer:init - Some themes load the cart drawer dynamically and the app cannot find it. Send this after initializing the cart drawer.

* designer:cart - Refreshes the cart drawer.

* designer:variant - Updates the designer when the variant option changes. Very few themes need this because they change variants asynchronously.

* designer:open - Opens the designer. Can be triggered by any custom button.

* designer:save - Saves the current work to browser local storage.

* designer:load - Loads the saved work from browser local storage.

* designer:saved - Notifies the UI to show the success message.

* designer:loaded - Notifies the UI to show the success message.

* designer:export - Generates the export file for the cart. May be useful if the theme handles Add-to-Cart using jQuery or other technologies.

You can add event listeners to document.body for the following messages to control your custom design button.

* designer:close - Fired when the designer closes. Useful for toggling your button state.

* designer:disable - Fired if the current variant is non-customizable. Can be used to hide your button.

* designer:enable - Fired if the current variant is customizable. Can be used to show your button.

* Or you can use the pre-defined DOM class ezprint directly for your custom button, for example:
<button class="ezprint" style="padding: 10px 30px; background: #ABC;">Add Design</button>

* The cart item images should be replaced by custom designed images automatically in most themes. If the images in cart do not change, it may be because the cart content was dynamically replaced when opening. You can try dispatching the designer:cart event manually to document.body after the theme resets the cart page.

* Depending on the specific Shopify plan, the checkout widget may not be available on the checkout page.