How can I use masks to crop the live preview?

The layers on the live preview can be cropped into any kind of shape.

Follow the steps below to learn how to set it up.

Example:  

You can view the Live example on the Demo store:  https://www.cloudlift.app/collections/live-product-options/products/live-product-options-mask-shapes

Setup

There are two different techniques to achieve a cropped preview.  

You can either use a PNG image overlay with transparent parts (simpler) or a custom SVG mask (advanced).

1) PNG Overlays:

Create a png image that is transparent where the image should be visible. The transparent parts act as a way to crop the preview layer:

Note: This image is just an illustration of the transparent parts, a real transparent version can be found here. 

In the live preview, add a layer of type "Overlay" and upload the png image with the transparent parts. 

Move the layer at the very bottom (to show it on top):

Any image below this layer will now only show the transparent parts:

2) SVG Mask: 

Create a SVG file with a shape that defines the outlines of the crop:

Keep the SVG as simple as possible, it's best to use a single <path> element:

<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en" height="20px" width="20px">
    <path fill="none" stroke="#000" stroke-width="0.1" d="M10,6 Q10,0 15,0 T20,6 Q20,10 15,14 T10,20 Q10,18 5,14 T0,6 Q0,0 5,0 T10,6 Z"/>
</svg>

In the live preview, add a layer of type "Mask":

The app comes with pre configured shapes. Select svg to upload your own shape:

The SVG mask is applied to the full preview. You can also apply it to specific layers only, this can be useful if the other layers do not cover the full preview. 

Example templates

You can find example templates for both techniques in the Templates page inside the app: