Liquid element

In this article, we are going to learn what is a Liquid Element and how to use it.

What is Liquid Element? 

The Liquid element allows you to add Liquid/ HTML/Javascript or CSS codes to your pages and also integrate third-party apps or custom code on Gempages. 

How to Use a Liquid Element on Gempages

  • Step 1: Drag & drop a Liquid element from the left sidebar to your page.


  • Step 2: Right-click on the Liquid element, then select Edit to open the code panel for HTML, Script, and CSS. 


  • Step 3: Add the custom code to the corresponding code panel and click on Save


  • Step 4: Hit Publish to start rendering the code of your newly created Liquid Element.



For pages that do not have Header and Footer such as Landing pages, we might need to add code on them.gem-layout-none.liquid file on Shopify theme code as well to integrate some third-party apps with Gempages. However, this process should be done carefully, so the best solution is to contact our technical support for further assistance.

By using Liquid elements we can incorporate more features from third-party apps. At the same time, it's also a good way to customize your website and make it outstanding. 

Was this helpful?