How to add custom code to GemPages by Liquid Element

In this article, we will learn what a Liquid element is and how to use it to customize your store with coding further.

About Liquid element

The Liquid element allows you to add Liquid, HTML, Javascript, or CSS codes to customize sections and integrate third-party apps using GemPages. 


To add a Liquid element to your page, kindly follow these steps.


Step 1: From the GemPages dashboard, open your preferred template to edit. Drag and drop a Liquid element to your desired position.



Step 2: Right-click on the Liquid element, then select “Edit” to open the code panel. 



Step 3: Add the custom code to the corresponding code panel and click on “Save” when finished. 



Step 4: Finally, hit “Publish” to start rendering the code of your newly created Liquid element.



Settings tab

With the Settings tab, you can set the name for that specific Liquid element for differentiation. You can also choose how the element is positioned with 3 options: left-aligned, centered, and right-aligned.



Design tab

To style how the element looks, please navigate to the Design tab and follow the instructions in this article

For pages that don't include the Header and Footer, integrating third-party apps might also require updating to the “theme.gem-layout-none.liquid” file on the Shopify theme code.

If you're interested in learning more about powerful, user-friendly GemPages, feel free to explore the Help Center or get in touch with our delicate customer support via email or live chat.

Was this helpful?