Custom code editor

This element is available on all PageFly plans

In this article, you will learn about the Custom code editor and how to use it.

About Custom code editor

The Custom code editor allows you to insert custom CSS and Javascript code to 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.

Important: 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.

Inserting custom code

Navigate to the bottom left corner, hover over it to see feature Add custom Code popping up and make a left-click.

custom code editor

Insert the custom code to the suitable section and hit the Update button.

  1. Click the Dismiss button or the Close icon on the top if you don’t want to use the custom code anymore. And when you take this action (Dismiss or Close), the custom code that you changed will not be saved. 
  2. Click the Save change button if you want to save the custom code you made and they 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.

Was this helpful?

Try out all PageFly features with Free plan
Don’t have Shopify store yet? Create store

PageFly Help Center is now available in French, Portuguese and Chinese.Please check the flags on the page header.

I got it!