How can I make the live preview sticky?

The app can show a sticky overlay of the live preview to make sure the configured options can always be seen live on the preview. 

You can enable sticky preview on the Settings page:

In the Location settings section, enable the setting:

Desktop

On Desktop, the preview will be sticky next to the options. The preview is visible while scrolling for the duration of the height of the options (Shown in green). If the height of the options is less than the height of the preview, then the sticky preview has no effect.

Mobile

On Mobile, you can choose from different sticky positions:

The overlay position will show a full overlay at the top. The overlay is shown before the preview is not fully visible.

Right/Left

The right/left position is shown when the preview is not fully visible anymore. 

CSS

The different mobile sticky positions styles can be targeted with the following CSS:

.cl-po--preview-sticky.mobile.overlay {
    background: black; /* black backgroubd */ 
}

.cl-po--preview-sticky.mobile.left  {
    left: 20px !important; /* more space from left  */ 
}
.cl-po--preview-sticky.mobile.right  {
    padding-top: 50vh !important;  /* more space from top  */ 
}

Important: make sure to add the CSS to in the global Theme settings CSS section and not on options Display settings.

The top property should not be changed, as the app dynamically updates this property to show/hide the sticky preview.  Instead, you can use padding to move the sticky preview location on the screen. 

Hide on desktop

If you want to hide the sticky preview on desktop (e.g your theme already has a sticky feature) but keep it on mobile, you can add the following CSS: (make sure to add the CSS to your global stylesheet and not in the options Display settings)

.cl-po--preview-sticky:not(.mobile) { 
    display:none;
}