# PageFly Page editor - FAQs

### Overview

This [FAQs section](https://help.pagefly.io/manual/page-editor-faqs/) addresses common questions users have about using the PageFly page editor.

### Frequently Asked Questions

#### How To Make Shopify Product Images Sticky When Scrolling In PageFly?

You can follow these steps:

**Step 1**: Select the Main media element.

![](/files/lcNkYH8q3ooHrha2AQ9m)

**Step 2**: On the Styling tab, pay attention to the Advance/CSS code section.

![](/files/Oy6nsFKBmwlsjlxjijXZ)

**Step 3**: Paste this code into CSS code:

```css
position: sticky;
top: 0;
z-index: 1;
```

**Step 4**: Save & publish the page.

To get more details, you can check out this video tutorial.

{% embed url="<https://www.youtube.com/watch?v=MS0fyVs8bpM>" %}

#### How To Configure Hover State & Active/Selected State For Elements In PageFly?

**Normal State/Mouse over State/Active/Selected State**

Click on the element such as the button, then in the Styling tab, click on the “**Normal state**” to open the dropdown. There are 3 states to set: Normal state, Mouse over state and Active/Selected state.

![](/files/Oudqk8Z1hT7PaLGhdkaG)

There are several elements that you can apply these states:

* Button
* Heading
* Tabs
* Accordion
* Icon
* …

![](/files/JmPngOUpMsIWUn8C6Iq8)

**How To Configure**

Let’s take a look at the “**Button**” element as an example:

* **Step 1**: Select the “**Button**” element. Click on the Styling tab.
* **Step 2**: Select Mouse over state (or Selected/Active state).
* **Step 3**: Configure the button with options on the Styling tab.

![](/files/L0dlyrEQUXgXqvy7AalX)

#### How To Fix Horizontal Scroll Issue On Mobile In PageFly page?

You can follow these steps:

**Step 1**: Open the page with the issue. Click on the “**Add custom code**” icon located on the bottom-left sidebar.

![](/files/ti8RefYH3G10A5iOxI1y)

**Step 2**: Add 1 of these codes:

**Step 3**: Save & publish the page.

To find more information, you can visit this article: [Responsive Mobile Horizontal Scroll Issue](https://help.pagefly.io/manual/responsive-mobile-horizontal-scroll-issue/)

Want to know more? Check out the video tutorial below:

{% embed url="<https://www.youtube.com/watch?v=b6nBY2qwv4k>" %}

#### How To Add Gradient Color In PageFly Page Editor?

You can add gradient color for both background & elements. To do that, please follow these steps.

* **Step 1**: Pick a CSS code for gradient color. To do that you can visit: [cssgradient.io](http://cssgradient.io)
* **Step 2**: After adjusting the color, click on the “**Copy to Clipboard**” button
* **Step 3**: Add gradient color for background: Paste the CSS code you just copy into the CSS code section on the Styling tab.

![](/files/920gwImkj8wkHGSBIdQX)

Add gradient color for elements:

* **Step 1**: Click on the element you want to add.
* **Step 2**: On the General tab, scroll to the Attributes section.
* **Step 3**: In the “**HTML class**”, type “**gradient**”.
* **Step 4**: On the bottom-left toolbar, click on the “**Add custom code**” icon and paste the code below:

```css
.gradient {
  background: linear-gradient(90deg, green, rgba(121, 9, 65, 0.9128443613773635) 72%, rgba(0, 212, 255, 1) 99%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
```

![](/files/Ye6E3GH77ksW8n0XiD6V)

### Tips & Best Practices

#### Saved section

PageFly allows you to create reusable sections that you can integrate into various pages of your store.

**Step 1**: Hover to the section you want to save, and choose “**Save section**”.

![](/files/De8sl6Z0zdg9gXsKXiUK)

**Step 2**: Save the section as unpublished.

![](/files/6PFpjYVAHGEXB7NCYmnz)

**Step 3**: Head over to the left side panel, click on “**Sections**”, click on the section you just named & remember to publish it.

![](/files/QyZ7sbxS7GzZV7z0JPcP)

**Step 4**: Click on the “**+**” icon located on the top right of the section on the page that you want to reuse & choose “**Saved**”.

![](/files/6vwrFoSGHYefDavt1j61)

**Step 5**: Choose the section you prefer.

#### Name/Duplicate Section

There are 2 methods to change the section name that you can apply.

* Change from the General tab:

From the General tab, scroll to the “**Attributes**” section and click on “**More settings**”.

![](/files/HFwi3IltV3xrJOvyT5Wi)

* Change from the Page content:

Hover and click on the three dots icon of the selected section in the Page content, then choose “**Rename**”.

![](/files/hgyvdZNDoxj1IrCNAJeE)

### Addition Resources

* Video tutorial: [How to Align Shopify product list on the PageFly page](https://www.youtube.com/watch?v%3DQ3I0Lzh3jKA%26list%3DPLJrJOSZ-86toKcoc3VZ02IAP_ET0vnR5K%26index%3D3)
* Video tutorial: [How to Add PageFly Page & Sections to Shopify theme](https://www.youtube.com/watch?v%3D7tGxVbqmQ2E%26list%3DPLJrJOSZ-86toKcoc3VZ02IAP_ET0vnR5K%26index%3D8)
* Manual: [How to Use PageFly Click Action](https://help.pagefly.io/manual/direct-to-a-link-a-section-a-pop-up-an-email-address-or-a-phone-number-by-click-action/)


---

# 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/faq-and-troubleshooting/faqs/page-editor-faqs.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.