Sticky side-column theme customization | Experiences Help Center

Locate the product.experiences.liquid template »

General instructions for editing the product.experiences.liquid template »

Sticky Side Column

In certain situations, you may find that the content on your experience's product page exceeds the side column that contains the booking widget. This can cause an unsightly blank space on your webpage.

A remedy is to make the booking widget scroll with the content in the page. Here's how to do that.

Add the following style block below the CSS imports that we mentioned above.

<link href="https://dev.experiencesapp.services/themes/default.css" rel="stylesheet" />
<link href="https://dev.experiencesapp.services/embedded.css" rel="stylesheet" />

/* Sticky Column */
<style>
  @media only screen and (min-width: 800px) {
    .product__display-grid-sticky {
      display: flex;
      align-items: flex-start;
    }
    
    .product__display-grid-sticky .product__display-grid__col1 {
      position: -webkit-sticky;
      position: sticky;
      top: 3.125em;    
      width: 100%;
    }
  }
</style>

2. Move the HTML element with the product__display-grid__col1 class into a new "sticky" positioned div .
Here's the general layout of the original HTML structure:

  <div class="product__display-grid">
    <div class="product__display-grid__col1">
      ...
    </div>
    <div class="product__display-grid__col2">
      ...
    </div>
    ...
  </div>

Here's what it would look like with the sticky positioned column:

  <div class="product__display-grid">
    <div class="product__display-grid-sticky">
      <div class="product__display-grid__col1">
        ...
      </div>
    </div>
    <div class="product__display-grid__col2">
      ...
    </div>
    ...
  </div>

Sticky column: