This guide explains how the customizer behaves on a phone or tablet. It is for merchants who want to know what their shoppers see on a small screen, so you can answer questions with confidence. Most shoppers personalize on their phone, so the customizer is built to work well with a finger, not just a mouse.
Layout on a phone
On a narrow screen, the customizer changes shape. The live preview moves to the top, and the personalization controls sit below it. This means a shopper can type or pick an option, then scroll up a little to see the result. The same design they build is what reaches the cart.
The inputs and buttons use comfortable touch sizes. Text boxes, dropdowns, date fields, and number fields are about 44 pixels tall. That is the size Apple and Google recommend for a tap target, so a finger lands on the right control without zooming in.
The Add to Cart bar stays pinned at the bottom of the screen. As the shopper scrolls through a long form, the action bar does not scroll away. The shopper can finish their design and add it to the cart from any point in the form.
If you want to see how the form fields and the preview work in general, read how a shopper personalizes a product and the live preview.
Camera and touch cropping
Photo uploads are built for phones. When a shopper taps the upload area on a phone, the device can open the camera so they can take a photo right there. This is on by default. You can turn the camera off per field if you would rather only accept files from the photo library.
After a photo comes in, a cropper-mode image field opens a crop overlay. The overlay responds to touch. The shopper drags the corner handles with a finger to frame the photo, then applies the crop. There is a Change photo button if they want to start over with a different image.
To read the preview more closely, the shopper can pinch and zoom with their browser. The preview measures the space it has and scales the design to fit the screen. When the phone rotates between portrait and landscape, the preview resizes to fit the new shape.
The number fields deserve a note. Native phone spinners are tiny and easy to miss. Instead, number fields show a minus button and a plus button on either side of the value. Each button is a large tap target, so a shopper changes a quantity with a clear tap rather than chasing a small arrow.
For more on the upload flow, including file types and high-resolution checks, see uploading a photo.
Does the customizer work on tablets too?
Yes. The responsive layout adapts to the screen width, so tablets get touch-sized controls and the same preview behavior as phones.
Can a shopper take a photo with the camera instead of uploading a file?
Yes, on a phone or tablet. Tapping the upload area can open the device camera. This is enabled by default, and you can turn it off per field.
Why do number fields show plus and minus buttons?
The buttons give a large, reliable tap target on touch screens, which is easier to use than the small native number spinner.
What happens to the design when the phone rotates?
The preview measures its container again and resizes the design to fit the new screen shape, so it stays fully visible.
Next
Learn what shoppers see end to end in how a shopper personalizes a product.