Custom Code Element

About Custom Code element

The Custom Code element allows you to insert HTML, JavaScript,  CSS, or Liquid code to tailor sections and seamlessly integrate third-party apps with GemPages.  

To add a Custom Code element to your page, kindly follow these steps:

Step 1: Go to GemPages Dashboard and choose the page you want to edit to access the Editor.

Step 2: Drag & drop the Custom Code element from the left sidebar under Advanced section to the desired area.

Click on the element to reveal the configuration on the left sidebar of the Editor including the Settings and Advanced tab. 

Configure the Settings Tab

Name

Enter your desired name for your Custom Code. This helps you distinguish between multiple elements on your page. 

Custom Code

Please locate the appropriate tab for HTML, CSS, and JavaScript, and insert the code snippet into the code panel.

Background

In the “Background” section, you have the option to modify the background appearance by selecting a color from the provided palette or inserting a background image. 

• Color: Choose a color from the color palette or input a hex color code in the box. 
• Image: Click on “Browse gallery” to switch to picture mode.

Next, hit “Add Image” and upload the image from your device. Alternatively, if the image is already uploaded in your Shopify Admin > Content > Files, you can simply input the image’s URL into the “Image Source” field.

Align

This parameter allows you to determine how the element is positioned on your page. There are three options to choose from: left-aligned, centered, and right-aligned.

Configure the Advanced Tab

For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.

Note: In addition to using the element, you can also add custom code to an existing GemPages element on your page. This alternative approach saves time because you don’t have to start coding from the beginning for that element.

Step 1: Find the GemPages element where you want to apply custom code, then right-click and select “Custom Code.”

Step 2: Locate the appropriate tab for CSS, and Script, and insert the code snippet into the code panel. Hit “Save” when you finish.