f:I[36257,["6870","static/chunks/6870-762df273f6f3d7f4.js","9963","static/chunks/9963-c86be93a245ac055.js","5953","static/chunks/5953-d21dc7a68f080374.js","385","static/chunks/app/%5BshowcaseId%5D/%5Bplatform%5D/standalone/page-bfc9717a714bd2d6.js"],"ShowcaseFullscreenLayout"] 11:I[55237,["6870","static/chunks/6870-762df273f6f3d7f4.js","9963","static/chunks/9963-c86be93a245ac055.js","5953","static/chunks/5953-d21dc7a68f080374.js","385","static/chunks/app/%5BshowcaseId%5D/%5Bplatform%5D/standalone/page-bfc9717a714bd2d6.js"],"ShowcaseContent"] 10:T4e9,

Create a custom, mobile-optimized apparel editor UI using the CE.SDK headless API. This example focuses the UI on a few key editing options to guide the user through customizing their t-shirt design.

Edit & Preview Mode

The editable page is overlaid on a t-shirt mockup to give users an idea of where to position elements. Toggling from edit to preview mode allows reviewing the design in the context of the entire t-shirt.

A custom toolbar at the bottom of the editor features only the most essential editing option in order of relevance allowing users to overlay text, add images, shapes, and stickers and upload new image assets.

Context Menu

Selecting an element shows a context menu in place of the toolbar listing again the most important editing features. Upon selecting a text element, for instance, users can easily change font, color, and alignment, whereas selecting a shape highlights the ability to choose from a range of predefined colors.

This example is easily extendible or modifiable, you could for instance add select filters to the image context menu or remove the ability to add stickers and shapes altogether.

Edit & Preview Mode

Toolbar

Context Menu