# 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.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-c0ee1993968edc38b0d8c02630e43bc55f41e980%2FAD_4nXduUvc4iEx0uQ1nP5imCAz6J1JoAW2d6-6-WW8PFA1-yanwf6UBqkbZKnSyNYJ75oqyRtBdGZrymhyHfcHyM0sAoxmmU66QnMrTOhIXtBq8F9ZybgzL_9PbdJpn9Q2_fB3ywBGf6Px4oxo_mCPjEAkey8pSaVd3bHnZWve8drTA7AQ.png?alt=media)

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

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-f4ea6e4b57f64a0abeeb941f256a682609bf5438%2FAD_4nXcniSoYeU0K9Afk7YdyBTBa4Tlx5HZzW7eXzDzeNkx77mRjP-pR_4nshdcqCHoGqYkmUa3gZbgVct0gEqhj_CBUreGPfOxD5L1v5QKeQg0KRHTLcwJytdd84gMMhk8WSF9L5nbrIvE3T7mfLvQ-igkey8pSaVd3bHnZWve8drTA7AQ.png?alt=media)

**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.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-f07acace452649b7c16d31d14b39d0373a8b27f5%2FAD_4nXdQd12LVF8nWQpaGacBQQPJFcbGp8NPlIyBRyzKLdNnZ7fTtlv-gcgz3OBhRZL11DtYIdYah4mTp2_KDtLglk4YxolP99EehYogsW8reivJww6Z34_lK9rbztuaSDHnawogI5GMoPkkF7zniuFJkey8pSaVd3bHnZWve8drTA7AQ.png?alt=media)

There are several elements that you can apply these states:

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

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-1477f0a2199ff0c3586fdffe2bea000593be1a26%2FAD_4nXfkAghpUcdBB6YxgSz-f4sPZ9i_dcx0T1NNE-z7oCxVrAJ0BSYxHKEeUW016ea0r5_Dq-dPmIAAzIN7K_rt76PPL5WfF8AXOF3TUKS6MjsjE4wBPjUSATGq7fXyuD0p4LvuPHsKpO8VF9Hj5w2RzQkey8pSaVd3bHnZWve8drTA7AQ.gif?alt=media)

**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.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-29237806422acdf138e6392dacb99f98be05c524%2FAD_4nXdT6OpIpiRmS9usn5J15UmX6l-SW9MpOzJ4ENXZiJkCvscd8EX1383axdjb9s8fUpZBF4kI_zakk59_1cY9FmrwotLNu5qGG6qMUOZHugTBjvziOuUEusF8CYML6UMA2PAqSk0N4bk9B_40v45P9Qkey8pSaVd3bHnZWve8drTA7AQ.gif?alt=media)

#### 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.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-c84e0f1ac29ce1bbaa929c382ad18a1f22f74222%2FAD_4nXdz6BgJb34knIAP_heujBcINVAUIPNOAzvDLBKbZ7GitfemTlDGoBrh-tD9OXBW6ncBTtrOiUTFf8wExzGfnNjAwDf_HNfHK5N-8wKRwRxM05VFM7dPpSVDtyxqkJDFz1HCcia3-uu2FDO3X11StAkey8pSaVd3bHnZWve8drTA7AQ.png?alt=media)

**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.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-966ca9dc300cfa0724fe3f8adfec1db02d3c5b19%2FAD_4nXeMbzYGcve_Dm7oGbS4AEOF053IWgjm0yMTO29ZhmAF8mck_8kJsCJlWkJ42xYIKtFYYtB7QJN5edgKRkX5mCBdOFyRg_eTPvEnXhYqm-YwDn_0C3KH4F3AQRhZNtHxJH2tsJMbPMXqIsRNxtimzwkey8pSaVd3bHnZWve8drTA7AQ.gif?alt=media)

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

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-6b7714721c925dba7a54b0b8ca193ce5bba3360c%2FAD_4nXfYKTCSlPoaOF4Sig1iCsoJdTRmOonDiVyrWK0-PWUBgx2mNsp3kbtBW1LDFj3aSCTBq5X77tsjgEAR41SXhBkmhQ6ozSk-rRRTBrGE1z-MqK9FHxjTr_8aOGjF2T8QzJ4eOHdiSd3mrTOeIifQXAkey8pSaVd3bHnZWve8drTA7AQ.gif?alt=media)

### 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**”.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-f334a56f6f09f5a5eb00cb543cb2cf8ea251da34%2FAD_4nXfmYFU9EjAGzfLJs4Fu2VzC0qvlXisYOErpDSZ-HQ2qkdDI8efoXtPwDoBJuOBTY9XVTFlfGPMPHuFllxC9Q6mUTq42cDFQUjnZ2wJzMcTnQT3p0V0kScGWHgAFghMp3DbhvWdzwhw67VMzBO6Iswkey8pSaVd3bHnZWve8drTA7AQ.png?alt=media)

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

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-0554f0fcd4c3cc0fd07c55a97cd7417ea0550c72%2FAD_4nXdMTT6eXj3kXPnlxUMQBz8Pr0Tsqn_yy1JjObSm9DY6faxYwVmtfytrB7tKTxTkPkvnjwfU6yQnFpr9KTFDWF-mmyCCGf1wOM5I5h1Cpt6tN52eGGYU6Ugi69zMrgXtuOvFAX5qZCG6XZ1YnunPwgkey8pSaVd3bHnZWve8drTA7AQ.gif?alt=media)

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

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-6ad9b30c549b8a1284ca00b656a9c73caf697cc8%2FAD_4nXcufa84uXD2wvgZFwD5lZCMTL342TC-HDs6dXAVPf04ccsWVl4niEWcIxNyQHk1j4NhEXqU1QQW7NQrNDIBl_a0FVpwacD8XYiCefRFC1b1NCVCKXnoKZb6FRJdph9u-QLU-F3DTvn1yqYVhGemzAkey8pSaVd3bHnZWve8drTA7AQ.png?alt=media)

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

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-b5e92872d88650eee09e1da657431dd392261efb%2FAD_4nXdTPE4QCZGfq2MH1YFdsv5WBgoOjuvsGfvLDmrPutWwm8Qxl_arCPrGzvQiIw-S5RA4OTu-TGsEabmnHoo0hNYJVpNrJIPlWfZFKb3-BhZAp1DZERd76GNpLJyFFBVa_qlEo0Hkq0YrP4f1L37jygkey8pSaVd3bHnZWve8drTA7AQ.gif?alt=media)

**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**”.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-fa3e7c8ca1a36081dd2afdbeb5b09f9cea7ad5bc%2FAD_4nXccVxf35rVSOXXaulaWR9W0-I1hD5-_iWeGKZyOmQk6ZcnkvfDrmRazMsfbOE8f0pTCB0jg_13NUx1DKF_mqFcaoQ4gqxrbQf1Hko2qh2aMlYRcsNUgWGgDhIRJ-AacASTWuUDlw62oUVcCce-5eAkey8pSaVd3bHnZWve8drTA7AQ.gif?alt=media)

* Change from the Page content:

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

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-d9beb136acf188ffad1ca75d04bb49f258f6c9bc%2FAD_4nXe8evWiUHcRZcTQYkGszQsxahSxGEIFK_elGCl4W6u_RG1_vl3q7wbm64J_lHl2KjXXoWIDML2imG506WRHQv1VsFxFqVZVp423grdM8-eicZ62MEwzIF4dN-rqcw84CnGfq3niXkDls9l945qlhwkey8pSaVd3bHnZWve8drTA7AQ.gif?alt=media)

### 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/)