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 tab:

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 then the height of the preview, then the sticky preview has no effect.

Mobile

On mobile you can choose from different sticky positions:

Overlay

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: (make sure to add the CSS to your global stylesheet and not in the options Display settings)

.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  */ 
}

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;
}
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.