70–80% of your customers shop on mobile devices. If the product customizer is hard to use on a phone, you lose sales. This article covers practical changes that improve the mobile customization experience.

Overview

The product customizer scales automatically to fit smaller screens. The Auto-Resize Canvas setting in Chamevo > Settings > Layout (enabled by default) resizes the canvas to match the container width. But responsive scaling alone is not enough — you need to consider element sizes, tap targets, module count, and testing.

Canvas and element sizing

Set your canvas dimensions for the largest screen first. You configure the canvas size per view in the Product Builder, or set defaults in Chamevo > Settings > Advanced under Default Canvas Width and Default Canvas Height. The customizer scales this down proportionally on mobile. A canvas that looks good at 900px wide may have elements too small to tap at 360px wide.

• Make text elements large enough to read at 40% scale. If your canvas is 900px and a phone renders it at ~360px, that is roughly 40% of the original size. A 14px font on the canvas becomes about 6px on screen — too small. Use 24px or larger for customer-editable text.
• Space elements apart. Tapping accuracy on mobile is lower than mouse clicks. Leave at least 40px of canvas space between elements so customers can select one without accidentally hitting another.
• Avoid overlapping elements. Overlapping elements are frustrating on mobile. Customers cannot reliably tap the one they want.

Module selection

Each module adds a panel to the interface. On mobile, too many modules crowd the screen and create confusion.

• Limit to 3–4 modules. The default set (Text, Images, Graphics, Layers) works well. Adding Names & Numbers, My Designs, and Pixabay all at once creates a cluttered mobile interface.
• Remove modules that customers do not need. If your product only has text customization, disable the Images and Graphics modules. Edit your print profile in Chamevo > Print Profiles, open the General tab, and use the Disable Modules setting to hide specific modules.
• Consider a mobile-specific product. If your desktop product has many modules and features, assign a different product customizer for mobile visitors. Create a simpler version with fewer elements and modules for phones.