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;
}

The sticky preview covers my theme header

The sticky preview uses z-index: 100  by default. If your theme has a sticky header with a lower z-index, the preview scrolls over it.

Why the CSS has to be global

When the preview becomes sticky, the app switches it to position: fixed  and moves the element to the end of the <body> , so it is no longer inside the config's container.

To make sure the CSS rule applies, put the rule in the global Theme settings CSS section instead.

Fix

1. Open your theme's header in the browser devtools and read its computed z-index . Many themes use a value between 5 and 50, and watch out for a separate announcement bar above the header with its own value.
2. Add the following to Settings > Global > Custom CSS, with a value below your header's z-index:

@media screen and (min-width: 769px) {
  .cl-po--preview-sticky,
  .cl-po--preview-wrapper {
    z-index: 5 !important;
  }
}

A small positive number is preferable to 0 , so other fixed elements added later can still be layered underneath.

If the z-index change has no effect, check that:

• the rule is in the global CSS and has no #configId  prefix, since a rule added on a config never reaches the sticky preview;
• no ancestor of the preview has transform , filter , opacity  or will-change  set, since those create a new stacking context that a z-index alone cannot escape.