How can I change the preview size on the product page?

The configured live preview dimensions are always used as a reference to position the layers on the preview:

The actual preview size on the product page depends on the available space (width) on the page. This makes the live preview responsive based on the actual screen size of the device.

In this example, the live preview is scaled down from 1000 > 750 pixels to fit into the available space:

On a mobile device, the preview is scaled to 385 pixels in width while keeping the ratio constant:

Changing displayed size on page

If your theme has a lot of space available, and you want to limit the space used by the app, you can add the following CSS to your store to limit the preview size:

.cl-po--preview-wrapper {
   max-width:600px;
   margin:auto;
}

This will limit the preview to 600px in width, while keeping it centered on the available space.

If you use the app gallery, and want to limit the full gallery space, you can use this CSS instead:

.cl-po--gallery-wrapper {
    max-width: 600px;
    margin: auto;
}

You can add custom CSS directly in our app as described here: How can I add custom CSS and Javascript? (Section Global)