# How to make a sticky section without code in PageFly

### About Sticky Section

In this article, you will learn how to create a [sticky section](https://help.pagefly.io/manual/make-a-sticky-section/) without using custom CSS code.

{% hint style="warning" %}
**Note**:

* This feature might not work on some Shopify themes depending on how the theme developer creates the theme.
* This feature only applies for a section. In case you need to make a button sticky, please contact our Support team. (this documentation doesn't apply to make a button sticky).
  {% endhint %}

Summary: Sticky sections help keep important content visible as customers scroll through your store. By making specific sections "sticky," you ensure that they remain fixed in place, providing customers an easy access to critical information without having to scroll back to the top.

Sticky sections are particularly useful for calls to action, or any content you want to keep prominently displayed as users explore your storefront.

You can read the rest of this manual, or watch a tutorial on how to set up the Sticky Section feature in PageFly:

{% embed url="<https://youtu.be/ZwJ21DP5z38>" %}

### How To Access PageFly Sticky Section

#### From Page Editor

In Page editor, follow these steps to access the Sticky Section settings:

* Step 1: Click on the section that you want to make it sticky
* Step 2: Go to **General** tab > Scroll down to "**Enable Sticky Top**" > Select "**Yes**"

![](/files/VMCjzvpZ9tzgHGc5udRT)

{% hint style="info" %}
**Note**: This feature only works on the live page and might not work due to theme conflict.
{% endhint %}

* Step 3: Publish the page from the Publish button on the menu bar, and go to the live page to see the result.

![](/files/vjDiCGCIg8jqFEc3dRPI)

### How To Configure For PageFly Sticky Section

When you turn the **Enable Sticky Top** feature on, there are two advanced settings to adjust.

**Top Offset**: to adjust the spacing between the top edge of the viewport and the sticky section.

![](/files/AbdhI9kCAjYjKMj18EJu)

**Apply elevation** (in **More settings** button): Stack level of a section, one with greater stack level will be in front of a lower one.

![](/files/lt06HmiioowDBXK2N1jp)

### Common Cases

#### 1. The Section Is Not Sticky

Although you followed all the steps above, the sticky section still doesn't work. You don't know why?

"I set this section sticky but it doesn't work on live view":

![](/files/ZBq1aiuFRmSbSHh4M5AF)

The reason is that there is a containing section of this section including a code from the theme that is "overflow:hidden;". This code overrides the sticky code and makes the sticky section not work. To fix it, please follow these steps:

* Step 1: On live page, right click on the sticky section and open Inspect

![](/files/5gQmEHnzG0oJaYM2AFpk)

* Step 2: From the sticky section, check containing sections of this section one by one

![](/files/T26f5KPytyNsBlV9SGYk)

* Step 3: Check until you see the code "**overflow:hidden**; in the Styles tab of the section

![](/files/U9RLxGbJtYjfkjhQ5f7c)

* Step 4: Copy the **Class Name** of this section. Back to PageFly page editor, open **Custom Code Editor**

![](/files/b35Nr4e7K9tM17oawHov)

* Step 5: Add this code: .classname {overflow: visible !important;}

In this case, Class Name of section is "pagefly-container" so the [code you need to add](https://gist.githubusercontent.com/Sally165/53dbedfaa73cb488aa31ba1a8bbf2f44/raw/54eb05cb0500747a48536358a951f86ecba2ac75/Sticky%20section) is

![](/files/euNbgDRZg2XOQCgcBIti)

* Step 6: Publish the page and check the Live View

![](/files/gv2jVZvOjL4iBBz96sXM)

If you have followed the above solutions, the sticky section still doesn't work, please reach out to us via 24/7 in-app Live Chat so that we can help you directly.

#### 2. Create A Sticky Product Add To Cart Button

To make an "Add to Cart" button stick to the top of the screen, first add the "Add to Cart" button element to a section on the page. Then, for that same section, turn on the "Sticky Top" setting. This will cause the "Add to Cart" button to remain visible at the top of the viewport as visitors scroll down the page. The video below demonstrates the full process.

{% embed url="<https://youtu.be/SyCsCorvFNU>" %}

### Frequently Asked Questions

**1. Why am I not seeing "Enable Sticky Top"?**

Enable Sticky Top setting only applies to Section elements. To access this setting, click on a section using one of the following areas in the Page Editor:

* Page Outline
* Canvas
* Breadcrumbs

![](/files/ku9tu7J4cC8FuVOPAuNx)

**2. Can I make the button have a transparent background while it's stuck at the top?**

Yes, you can! Please drag and drop a button element into a section and make the section both transparent and sticky. You can follow [this guide](#h.fxl71515r4l8)

### Additional Resources

* [5 Steps to Create Full-width Section on PageFly Pages](https://help.pagefly.io/manual/create-a-full-width-section/)


---

# 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.pagefly.io/pages-and-sections-creation/sections/make-a-sticky-section.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.