Overview
In this article, you will learn about the Custom code editor and how to use it.
The Custom code editor allows you to insert custom CSS and Javascript code into your page. If you are looking to customize an element or create a new effect on the page, the Custom code editor can help you insert custom code and level up your page design, increasing the conversion rate of your store.
You can even prevent some issues on your page by adding custom code such as sticky sections not working, avoiding blank spaces on top of the pages, etc.
Requirements
This is an advanced feature that requires knowledge of web design languages such as HTML, CSS, and Javascript. If you do not understand this feature, please avoid using it as it could seriously harm your page.
How To Access PageFly Custom Code Editor
To access PageFly Custom code editor, navigate to the 8th icon on the left toolbar. Click on it to access the Custom code editor.
How To Work With PageFly Custom Code Editor
Learn how to easily add custom code to modify text content and style on your pages.
- Step 1: View the Custom CSS and Custom Javascript boxes. In the example below, we will add a code to fix the error: Sometimes when you see your pages on the mobile, the page ends up with an undesired extra space to the right. (It slides from the left to the right).
- Step 2: Click on the Save button
- Click the Dismiss button or the Close icon on the top if you don’t want to use the custom code anymore. When you take this action (Dismiss or Close), the custom code that you changed will not be saved.
- Click the Save change button if you want to save the custom code you made and it will be applied to your page editor.
- CUSTOM CSS code: You don’t have to place any <style> tags in this area as they’re already added for your convenience.
- CUSTOM JAVASCRIPT code: You don’t have to place any <script> tags in this area as they’re already added for your convenience.
- The Custom code editor only supports JavaScript/ CSS code, so it doesn’t allow you to add HTML code.
Use Cases
1. Fix Sticky Section Doesn’t Work
You can use this feature to fix the issue that the sticky section in PageFly doesn’t work. Please check our guide here.
2. Remove Blank Space On Top Of The Page
You can also use this feature to remove the blank space on top of the page (the space between the header and the first section) when you integrate a Shopify free theme, like Debut or Narrative with PageFly. You can check this article for more details.
Frequently Asked Questions
Can I Use Custom Code If I Don’t Have Coding Knowledge?
This advanced feature requires knowledge of web design languages such as HTML, CSS, and Javascript. If you don’t have coding knowledge, please refrain from using it yourself. You can reach out to us to get assistance from our technical support team.
Previous article
