# Sticky product details

{% columns %}
{% column width="41.66666666666667%" %}
The product overview section has two columns for the product media and product details. 

When the product media column has more content, visitors may need to scroll down to view the entire column. As a result, the product details — including the buy button — may scroll out of view.

You can enable **sticky product details** to keep the product details visible when scrolling down to view the longer product media column. 

The product details column will "stick" to the top of the window until visitors have scrolled to the bottom of the product overview.
{% endcolumn %}

{% column %}

<figure><img src="/files/JKJS2Sw0lTUpV9Actnqw" alt=""><figcaption></figcaption></figure>

&#x20;
{% endcolumn %}
{% endcolumns %}

{% columns %}
{% column width="50%" %}

{% endcolumn %}

{% column %}
&#x20;
{% endcolumn %}
{% endcolumns %}

<details>

<summary>Why aren't the product details sticking?</summary>

The product details will stick when the product media column is taller and has more content. If the product details column on the right is taller than the product media column, it will not trigger the sticky effect.

</details>

<details>

<summary>I want to show the buy button when scrolling down the entire page</summary>

To display an "add to cart" button when scrolling down the entire product page, consider enabling the [Sticky add-to-cart bar](/cornerstone/product-pages/product-page-blocks/buy-buttons.md#enable-sticky-add-to-cart-bar).&#x20;

</details>

***

#### Steps

1. In the product template, click the **Product overview** section to open the settings.
2. Toggle on **Enable sticky product details**.

   > We recommend turning off this option when the product details is longer than the column with the product media.
3. Click **Save**.

<br>

***

> **Related links**
>
> [Breadcrumbs](/cornerstone/product-pages/layout-and-style/breadcrumbs.md)\
> [Product media gallery](/cornerstone/product-pages/layout-and-style/media-gallery.md)\
> [Navigation buttons](/cornerstone/product-pages/layout-and-style/navigation-buttons.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/cornerstone/product-pages/layout-and-style/sticky-product-details.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.