How to insert Custom Code to your page

 

This article will introduce you to the Custom Code add-on so you can take full advantage of your coding skills in EcomSolid.

 

From the very beginning, EcomSolid was built upon the no-code philosophy, and customers have been enjoying designing their entire store without fumbling around a single line of code. That, however, does not mean your coding skills have to go to waste, EcomSolid has you covered!


Using the Custom Code add-on, you can add and render custom code right from inside the Editor in under 3 minutes.

 

If you are looking to insert tracking codes (Facebook Pixel and Google Analytics being two examples), the code will need to be implemented on your theme. Follow this article for full guidance.

 

Add the Custom Code add-on to your page


The Custom Code add-on can be applied for either a single page, all pages of a page type, or theme-wide

If you want to use your code for, let’s say, all product pages, then head over to the EcomSolid Dashboard > Theme Editor, and select Product Pages in the drop-down menu on the topbar and follow the instructions below from Step 2.



If you want the add-on to be used for the whole store, click on the Add-Ons tab > 3-dot button > Move to Global

 


 

Step 1: In your EcomSolid Dashboard, click on the Pages tab and select one of your pages or create a new page to enter the Page Editor.



Step 2: In the Editor, select the Add-Ons tab and hit “Add Add-on” at the bottom of the left sidebar.



Step 3: Type “custom” into the search bar, when you see the Custom Code add-on, hit “Add”. After a few seconds, the add-on will appear in the Editor at the top and the settings are available on the left sidebar.



The Content tab is composed of two main zones: Display Position and Code, which we will discover in the next section. 

 

 

Configure the Content tab

 

Display Position


Reposition the Custom Code add-on in two ways:

  • Pick a spot in the drop-down menu: After you’ve chosen a spot, the Editor will scroll the spot into view and reposition the add-on.

 

 

  • Target a specific spot: Click on either the "Change position" button or the target icon in the Custom Code add-on toolbar:

Click on any “+” button to situate the add-on in the corresponding position

 


Click on any atom highlighted in blue to select the atom, you will then be able to place the Custom Code add-on either above or underneath the atom.

 

Code

 

Entering incorrect codes or using the wrong code fields could result in errors for your whole site or a section. If you are not comfortable with coding, please contact our EcomSolid Support Team for further assistance from experts.

 

Once you’ve found a spot for the add-on, it’s time to add your custom code.


The Code zone is straightforward: You can add HTML, Liquid,  CSS, and JavaScript code into the Custom Code add-on.


To give you an example of how Custom Code works, let’s try adding a simple headline at the top of the page by HTML, style it with CSS, and finally, give it a simple function using JavaScript.


Step 1: Add this HTML heading to the Code HTML field:

 

<h1 class="titletop">THE TITLE YOU CAN'T MISS</h1>

 

 

 

Step 2: Style the heading. Copy and paste the code below it into the Code CSS field, this will center the heading and paint the text grey.

 

.titletop {

  width: 100%;

  text-align: center;

  color: black;

} 

 


Now let’s give the heading a nice blue color to match the rest of the theme by editing the color attribute:


 

 

Tip: Sometimes codes conflict, to make sure an attribute is prioritized, end the code with “!important” before closing.

 

Step 3: Configure the JavaScript field. 

 

The application of JavaScript itself is very broad and dynamic. We’re just going to show you a demo of what the Custom Code add-on is capable of with JavaScript.

 

In this case, we’ll customize the heading so it pops up an alert box whenever clicked on.

Copy and paste this code below into the Code Javascript field:

 

var myElement = document.querySelector(".titletop");

myElement.addEventListener('click', function(event) {

    alert("I am here because you clicked on the Title");

});


 


Now, whenever the headline is clicked on, it will popup an alert box inside the browser.

 


 

Configure the Design tab


Don’t forget to fine-tune the Custom Code add-on’s appearance using the Design tab, which allows you to adjust the Color, Background color, and Padding.


 

Rename your Custom Code add-on

 

You can rename an add-on for easier management:


Step 1: Inside the Editor, select the Add-Ons tab.


Step 2: Find the add-on you want to rename, select the 3-dot button


Step 3: Select Rename



Step 4: Edit the name using the field


Step 5: Hit “Rename” to complete the action.



Check out more of our articles here, and if you need any further information, our EcomSolid Support Team is here to help.

We can be reached at any time via email or live chat.

 


Was this helpful?