Articles on: User Interface & Modules

Mobile Settings in Fancy Product Designer

Many of your customers customize products right from their smartphones. This article covers the mobile-specific settings in Fancy Product Designer, how to preview your products on different screen sizes, and what to do if the default mobile experience doesn't quite fit your store.


Mobile Settings

You can find these settings under Global Settings > Advanced.


Mobile Pinch Gestures Behaviour

This setting controls what happens when a customer uses a two-finger pinch gesture on the canvas. Choose one of three options:

  • None – Pinch gestures have no effect.
  • Zoom in/out and pan canvas – Customers can zoom and move around the whole canvas.
  • Scale selected image with pinch – Customers can resize the currently selected image by pinching.



Canvas Touch Scrolling

Turn on "Canvas Touch Scrolling" to let customers scroll the page with touch gestures outside of any element on the canvas.


Important: This setting only matters if the designer is embedded directly on the product page (Designer Mode "Product Page"). In "Customize Button" mode, the designer opens as a fullscreen overlay, so there's nothing to scroll around it.



In Canvas Text Editing

When this setting is on, customers can edit text directly on the canvas via double-click on desktop or a tap on mobile.


Preview How Your Designer Looks on Mobile

Before you publish a customization, you can check how the canvas behaves on smaller screens right inside the Product Builder.

  1. Open a product in the Product Builder.
  2. Click the "Mobile" or "Tablet" icon above the canvas.
  3. Review how the canvas scales at that screen size.


Important: This preview only shows how the canvas area itself scales. It doesn't show a full preview of your live product page layout, since that also depends on your theme.




If the Default Experience Isn't Ideal

The options above cover most stores. If your customers still struggle with the designer on mobile, for example because the embedded canvas feels cramped, you have one more option.
Switch to Designer Mode "Customize Button" under Settings > Integration > Theme. Instead of embedding the designer on the product page, customers see a "Customize" button. Clicking it opens the designer in a fullscreen overlay, which tends to work better on small screens.
Important: The Designer Mode isn't device-specific. If you switch to "Customize Button" because it works better on mobile, desktop visitors will see the same button and overlay too, instead of the designer embedded on the product page.
If you'd like help adjusting how the designer is placed on your product page, reach out to us via the in-app chat.



Known Limitations on Mobile

  • The "Done" button in the Customize Button overlay only shows a checkmark on mobile, not the full label, since there isn't enough space for more.
  • The backend admin panel isn't optimized for mobile use. We recommend managing your products and customizations from a desktop.
  • The options to move or remove an upload zone element doesn't work well on mobile. You can move or remove the content of an upload zone, but you can't reliably change the zone itself.


Key Takeaways

  • Adjust pinch and touch scrolling behaviour under Global Settings > Advanced.
  • Use the Mobile/Tablet preview in the Product Builder to check how your canvas scales, keeping in mind it doesn't preview your full designer layout.
  • If the embedded designer feels cramped on mobile, "Customize Button" mode can help, but keep in mind it changes the desktop experience too.


If you have any questions, reach out to us via the in-app chat. We are always happy to help.

Updated on: 14/07/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!