Modilo lets a merchant prepare, sell, and produce personalized print products on Shopify. The application covers the whole workflow: manage assets, build print-ready templates, connect them to Shopify products, collect customer personalization, monitor generated orders, and export final PDF files for production.
A new template starts with two canvases. The print canvas is the production artwork used for the final PDF. The preview canvas is the customer-facing mockup shown in the storefront personalizer. They can use different images and different units because they serve different jobs.
The print canvas is the exact area that will be rendered into the final production PDF. Use upload when you already have a prepared print background or dieline.
Use blank generation when you do not need a background image yet. The print setup uses physical dimensions, so the canvas represents real output size.
Gallery assets are reusable merchant files. Selecting one here is faster than uploading the same print background again.
The preview canvas is what the customer sees while personalizing the product. It can be a product photo, a mockup, or a simplified preview background.
If you do not have a product mockup yet, create a blank preview. Preview canvas dimensions are entered in pixels because the output is visual, not production-size PDF artwork.
Gallery preview assets are ideal for product photos and reusable mockups. In this example, the framed poster mockup becomes the customer-facing canvas.
The Print panel in Template & Settings lets you replace the active print background, upload a new one, choose from previous assets, or generate a blank print image.
The Preview panel controls the customer-facing mockup. Replace the image here when you want the storefront preview to show a different product photo or a cleaner customer view.
Add content adds a new editable field to the template. Choose the function that matches what the customer should enter, upload, generate, or select, then finish its settings in the right panel.
The highlighted menu shows the available modules. Each tile creates a different kind of template field, such as text, photo upload, AI image, calendar, map, puzzle, word cloud, QR code, or dynamic artwork.
Add duplicate repeats an already existing content field. Use it when the same customer input should appear more than once in the template.
The duplicate uses the same customer value as the original field. It does not create a new customer question, so the customer fills the content once and the template can reuse it in another place.
Objects can be positioned directly on the print canvas and the preview canvas. Use drag and drop for quick layout work, then use the coordinate fields when the placement must be exact.
The print canvas controls the final production file. Select an object and use its X, Y, Width, Height, and Rotation settings when you need precise placement for printing.
The preview canvas controls what the customer sees on the storefront. It can use different placement from the print canvas, so the live mockup looks natural on the product image.
The Layers panel helps you work with complex templates without losing control of the design.
Text Area is the multi-line text module. Use it for messages, poems, dedications, addresses, and any customer text that may need wrapping across multiple lines.
The highlighted fields define what the customer sees and what the merchant uses as a realistic design sample.
These settings keep long customer text predictable inside the prepared box.
The highlighted checkbox enables font and color choices on the customer side. The font tiles below decide exactly which fonts the customer can choose from.
Single-line text is for short values that must stay on one line: names, initials, years, titles, labels, and small captions.
The highlighted settings prepare a short customer input and show a realistic sample on the canvas.
Picture creates a customer photo upload field. The merchant prepares the upload label, sample image, crop behavior, and shape.
The highlighted field sets the upload label and sample photo for testing. Fit mode controls how the image behaves inside the prepared area.
The highlighted controls set the cutout shape for the uploaded photo. You can use a built-in shape or upload a custom mask.
AI photo lets customers upload a photo and generate a styled result from merchant-approved prompt presets.
The highlighted controls set the heading customers will see and the photo used for editor testing. If you leave the sample photo in the field, it remains available as the sample picture for the customer.
The highlighted model selector chooses which image generation model the field uses. The aspect ratio setting decides whether generation follows the placed box or a fixed ratio.
The highlighted tiles are the visible AI styles in the customer personalizer.
The highlighted Customer order list controls the order in which selected AI styles appear on the customer side.
The highlighted zoom and pan controls are only for testing inside the editor. Customers adjust their own uploaded photo on the storefront.
Layout photo creates a multi-photo upload field with several slots, useful for collages, grids, family products, and multi-photo gifts.
The highlighted layout selector chooses the default layout for the photo field. You can also test in the editor how each layout will look before publishing.
The highlighted settings apply to the selected layout preset and reflow all photo boxes in that layout.
The highlighted upload rows provide preview-only sample photos for each slot in the layout.
The highlighted list controls the layouts that customers will see as available choices. Customers can switch only between the layouts you allow here.
Face cutout focuses on detected faces from a customer photo and places them into prepared design positions.
The highlighted controls prepare the face cutout field and generate sample faces for testing.
The highlighted Box 1, Box 2, and following rows represent individual boxes that reuse the same face field.
The highlighted zoom and pan controls are only for testing inside the editor. Customers adjust their own uploaded photo on the storefront.
BG removal removes the background from a customer image so the subject can be composited into the design.
The highlighted controls prepare a sample image and generate a cutout for testing.
These controls decide how the transparent cutout sits in its box.
Dynamic switches prepared artwork based on customer choices, such as animals, colors, outfits, themes, icons, or product variants.
The highlighted folders are matched by filename. A swatch, preview image, and print image belong together only when their filenames are the same.
After selecting the source folders, press Load swatches to load the available options. This screen lets you test whether swatch, preview, and print files are paired correctly.
Add AI character generates character-style artwork from customer input and selected prompt styles.
The highlighted controls let the merchant upload a default photo and test how the character generation behaves before publishing the template.
The highlighted controls let the merchant choose the AI model and select which prepared prompts will be available to the customer.
The highlighted Customer order list controls the order of selected character styles on the customer side.
Curved text places customer text on an arc, useful for badges, ornaments, circular layouts, and decorative names around artwork.
The highlighted fields define the customer input and the visual style of the curved text.
Arc settings decide how the text follows the curve and how it reacts to long values.
Spiral text turns longer customer text into typography artwork, often used for poems, quotes, vows, letters, and poster designs.
The highlighted controls let the merchant set the heading label, default spiral text, font, text color, and font size.
A center image can sit inside the spiral when the design needs a focal point.
These controls change how tightly the text fills the spiral.
Calendar builds month and date layouts for birthdays, anniversaries, family gifts, event products, and special-date posters.
The highlighted controls set the calendar name, layout style, month and year. Separate header and separate year let you place the month and year anywhere on the canvas as independent elements.
The highlighted fields let you set custom labels for the month and year, change their font sizes, and stack the month and year vertically.
The highlighted controls decide whether weeks start on Monday or Sunday and how weekends stand out in the calendar.
The highlighted controls adjust letter spacing, weekday abbreviations, day-name font size, and the divider line position.
The highlighted controls let you change the font for the month, year, day names, and day numbers. You can also adjust the calendar colors as needed.
The highlighted controls let you change text and background colors for the separated month and year. The Add mark button adds days that should always be marked in the calendar.
Object adds fixed merchant-controlled artwork such as frames, icons, overlays, decorations, and helper graphics.
The Object tile creates a merchant-controlled design element. An object is added to Print by default, and it can also be shown on Preview by enabling the highlighted Show on preview checkbox.
Star map creates a sky map from a selected date and location, commonly used for posters, anniversaries, births, and memory products.
The highlighted shape cards define the visible cutout of the sky map. The customer option can let shoppers choose the shape on the storefront.
The highlighted tiles select the map color style. When customer choice is enabled, selected tiles become the styles shoppers are allowed to choose from.
The highlighted checkboxes control constellation lines, Milky Way, and grid visibility. The default values below set the starting date and time.
The highlighted fields set the default event used to render the sky. City search fills latitude and longitude, and Download map exports the generated image.
Moon phase creates a moon image from a selected date and optional supporting text.
The highlighted phase message shows the calculated phase for the current date. The style cards choose the moon rendering, and customer choice can expose selected styles on the storefront.
The highlighted settings choose the generated image size, the default date, and whether the customer can change that date on the storefront.
The highlighted fields rename the eight moon phases shown to customers and used in generated output labels.
Word Search creates a letter puzzle from customer or merchant-provided words.
The highlighted label is what the customer sees as the name of the wordsearch. The words entered here become the default words shown to the customer.
The highlighted controls choose how found words are marked, how large filler letters appear compared with word letters, and whether word letters are bold.
These settings make found words visible and style the wordsearch for the design.
Crossword builds a generated crossword puzzle from entered words.
The highlighted label is what the customer sees as the name of the crossword. The words entered here are the default words and can be tested directly in the editor. Words that cannot be placed will not appear in the crossword, and the customer is informed about that on the frontend. The Visual style control sets the look of the crossword tiles.
The highlighted corner shape changes the tile corners, and the checkbox can let customers choose the crossword style on the storefront.
Word Cloud turns a list of words into shaped typography artwork.
The highlighted Heading label is what the customer sees as the name of the word cloud field. The words entered here are the default words used for the customer.
The highlighted shape cards choose the mask the words should fill. Upload image and Pick from folder let you use your own mask.
The highlighted controls choose the font, maximum word count, customer generated image size, and rotation range. More words make the cloud denser. Higher output resolution usually takes longer to generate for the customer.
The highlighted palette tiles set the colors used across the generated words. Custom lets you define your own color set.
QR code creates a scannable code from a URL or text value.
These controls decide what the QR code contains and how reliably it scans.
These tools control how customer fields behave outside the canvas itself: required inputs, conditional visibility, option order, storefront preview, and Variable Data Printing.
Required makes a field mandatory before the customer can continue. Conditional display hides or shows a field based on another customer choice.
The Order tab controls the order stored in uiOrder. This is the order in which the customer sees fields in the storefront personalizer.
Option sets create standalone customer controls. They are not placed on the print or preview canvas like text, photos, or generated artwork.
The Preview tab loads the template through the same personalizer core used on the customer side. It shows the option controls as the customer will see them.
VDP means Variable Data Printing. Use it when one text field should create several print files with different text values, such as name labels, place cards, stickers, certificates, or numbered copies.
Use the Clipart editor to prepare reusable layered clipart systems. It is built for products where the customer chooses variants, such as character parts, outfits, hair, accessories, family members, or other multi-layer illustrations.
Import ZIP creates layers and variants from image folders. Before uploading, prepare a real .zip file, not RAR, 7z, or another archive type. The folder structure is important: one folder level must contain either folders or images, never both at the same time.
Prepare the artwork in normal folders first. In this example, the first visible level contains only folders: children, dad, and mother.
Inside children, the next level again contains only folders: daughter and son. This tells the import that the customer can later choose between these branches.
Inside daughter, the folders are pants, body, tshirt, and hairs. These are separate artwork parts that will become separate clipart layers or layer groups.
The final folder, Type 1, contains only image files: 58.png, 59.png, 60.png, 61.png, and 62.png. This is the level where the importer reads real variants.
The mother folder follows the same logic as daughter: it contains part folders such as pants, body, tshirt, and hairs.
The import dialog asks for the first basic rule. Pick one means "make a choice". Show all means "use everything inside this folder".
Folder settings lets you correct the behavior for every folder before import. Read each row like this: "Should the customer pick one item from this folder, or should everything inside this folder be used together?"
The review step decides how imported layers are grouped in the editor.
Manual import means building the clipart structure directly in the Clipart editor: create layers, drag image files into them, add customer options, and then use conditions to decide when each layer is visible. This uses the same editor data as a ZIP import, but you create it step by step by hand.
When there are no layers yet, the left panel says that you can import a ZIP or add a layer manually. For manual import, use the Add layer button at the bottom of the left panel.
After a layer exists, drag image files into its Drag images here area. Every accepted image becomes one variant inside that layer.
Use Add option in the Customer Preview panel when the customer needs to choose one value, for example Animal.
The checkbox on a customer-preview block selects that block for customer-view ordering. When one or more blocks are selected, the footer offers To start and To end.
The pen button on the dropdown opens the dropdown editor. This is where you change the internal placeholder labels into real customer-facing text.
In this example, the dropdown has been renamed to Animal and the visible selected value is Cat. The selected canvas layer is still a normal image layer; the dropdown only becomes useful after layers get conditions.
Click the artwork layer that should depend on the dropdown. The layer remains editable in the left panel and can be positioned on the canvas while the customer option stays visible on the right.
Open Conditions on a layer and add a display condition. In the screenshot, one layer is shown when Animal equals Cat, and another layer is shown when Animal equals Lion.
Open the dropdown in the Customer Preview and switch between its values. The editor evaluates the conditions and only draws the layers whose rules match the selected value.
The left panel controls the internal layer stack. The canvas in the middle shows the composed artwork. The customer preview on the right shows the choices that will later be shown to the customer.
The layer list supports manual layers, groups, visibility, locks, expanding and collapsing, and deletion.
When a layer is expanded, its Group field controls which editor group the layer belongs to.
The Move hidden conditional layers too checkbox changes how grouped movements work.
The customer preview panel is generated from dropdown fields, text fields, layers, variants, swatches, conditions, and the saved customer-view order.
Add option creates a new customer-facing dropdown field.
Swatches control how options are presented in the customer preview. A swatch can be image-based or color-based. Color swatches are visual selectors; the original image stays drawn on the canvas.
The small color tool on a customer swatch opens the color swatch editor for that option.
The swatch color dialog can extract a color from the image or accept a manually entered color value.
After saving color swatches, the customer preview shows color blocks for the options.
Swatch zoom-in crops generated swatches around the visible content and saves the updated swatch images.
Group copy opens the Character group combinatorics wizard. It generates a new clipart setup for products where customers choose how many characters appear and which group is placed into each position.
The Group copy button starts a guided workflow for copying selected groups into character positions.
Select which existing groups can be copied into generated character positions.
The count step defines how many characters the customer can place in the artwork.
The display step controls how customers choose the character count and each position.
The layout step defines where each generated character position should sit on the canvas.
After applying, the generated clipart contains copied groups, count controls, position controls, and visibility conditions.
Bulk rename collects variant names and dropdown options, sends the instruction for AI rename, and lets you review the suggested mapping before applying it.
Bulk rename collects variant names and dropdown options, sends the instruction for AI rename, and lets you review the suggested mapping before applying it.
The dashboard is the main starting point for the merchant. It links to the core parts of the app.
Use this area to save API keys for OpenAI image models, such as GPT Image 1.5 or GPT Image 2, and for Grok models from xAI. Modilo needs these keys only when a template uses AI generation.
Create or sign in to an OpenAI Platform account, open the API keys page, create a new key for your project, copy it once, and paste it into Modilo. OpenAI treats API keys as secret Bearer credentials, so keep them private and use provider billing/usage tools to watch spending.
Create or sign in to an xAI account, add credits or billing in the xAI Console, open the API Keys page, create a key, copy it, and paste it into Modilo. If xAI shows model or endpoint permissions, make sure the key can use the Grok or Imagine model you want.
This is where you save the prompts used by AI Image and AI Character fields. A prompt is the instruction sent to the selected AI model, for example watercolor portrait, cartoon pet, oil painting, or full-body character illustration.
The Library is the merchant file area. Some folders store reusable assets for new templates, while others collect files generated from customer uploads and completed orders.
Gallery stores all designs created in the Editor. Use it as the overview of existing templates and saved design work.
This folder contains the print files generated from customer orders. Use it when you need to find or download production output for completed orders.
Create folders here for Dynamic image assets that will later be selected in the Editor. Do not upload images directly into the Dynamic images root folder; always create a project folder first.
Upload reusable backgrounds for the Print file here, such as a finished Illustrator template where the customer will only change text or photos.
Upload reusable preview backgrounds here, such as a blank mug mockup without print. These images are used for the customer-facing preview side of templates.
This folder stores translation-related files used by the app for customer-facing wording and localization.
Use this folder for reusable product mockups that help customers see the personalized design in a realistic product context.
Upload fonts used by template text fields. OTF is recommended. Most TTF fonts will probably work too, but each font should be tested before using it in a live product.
This folder stores AI-edited photos generated from customer images.
This folder stores photos uploaded by customers. After an order is completed, uploaded photos are renamed using the order number, so the merchant can search for them by order number.
Settings let you adjust the customer personalizer without editing a template. Use this page to set storefront languages, button texts, button colors, form styling, photo controls, and the appearance of special customer controls. After you click Save settings, the saved look is used in the customer-facing personalizer.
Use this when one shop has more storefront domains or language paths. Each row tells the personalizer which language it should show for that domain or path.
Use the Custom tab to add or edit your own translations for texts shown to customers in the personalizer.
System translations are the app's built-in customer-facing texts. Custom translations are checked first, so a custom translation overrides the matching system translation.
This is the main button customers click after finishing personalization. Here you can set its text, add translated versions, and match the button style to the shop.
These settings control the buttons customers use when they upload a photo. The same upload style is used across photo upload, AI photo, face cutout, AI character, and layout photo slots.
Use this section for buttons that create something for the customer, such as an AI image, AI character, moon phase, star map, QR code, word game, word cloud, or spiral text.
These buttons are used when the customer uploads a photo and then starts an image-processing action. They have separate styling so they can stand out from normal Generate buttons.
When customers can choose an AI style, they see small style cards such as Cartoon, Watercolor, or Sketch. This section controls how those cards look.
This part controls the buttons used for word-game style products and the small swatches customers use when choosing a design or color option.
This section controls the text style in the customer form, especially field labels and small help or hint texts.
Use these settings to make the customer form match the shop design and keep the fields easy to read.
Photo Controls are used when customers zoom or move an uploaded photo. Plate Switcher is used when a product has more than one side, page, or plate that the customer can switch between.
These settings are used by Layout Photo templates, where customers choose a photo layout and upload photos into multiple slots.
Use this section when a Star Map product lets customers choose the map shape or visual style.
Some calendar templates let customers mark a special day, such as a birthday or anniversary. This section controls how that marked-day area looks.
Shopify Sync is where you choose which Modilo template belongs to each Shopify product. Products are shown on the left, saved Modilo templates are shown on the right.
The template code in the main product row is the default template for that Shopify product. Variant rows are used when a specific variant needs its own template instead of the product-level one.