About Custom Code element
The Custom Code element allows you to insert HTML, JavaScript, or CSS 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 the 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 Custom Code 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. If you need more space, you can easily expand the coding panel by clicking on the arrow icon.
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.
And there you have it! If you need any further assistance along the way, our GemPages Support Team is always here for you!