You can use custom code to take your site to the next level. Using custom code you can build your own custom section using HTML, CSS and JS. You can also edit another section in the same page.
A few other examples you can use custom code for is to add widgets, youtube videos, embed code or pretty much anything you want it to be rendered in that specific page.
Adding a custom code section
You can find Custom Code under your sections. By clicking the following symbol, a custom code section will be added to your website.
The Custom Code Section
As other sections, you can add a title, subtitle and change your section design. In the example below, we are adding a new youtube video and centering it. Please note that the iframe code was provided by youtube.
Please note that some JS code and iframes might not show up in the editor. They will show up when your site is published.
Using custom code to modify other elements of the site
If you are adding a custom code to change other parts of the site, you can disable margins and width constraints and your section layout won't be displayed on the page.
All sections on your page are built from tiny HTML elements containing CSS classes. You can find their name by looking at your browser Dev Tools to identify what's the class name (in this case cta__titles) of the element you want to edit.
If you now insert the following code you can change the section in a way the editor isn't able to right now. In the following example, we add a red border and some spacing (padding) around our section.
<style>
.cta__titles {
border: 5px solid red;
padding: 20px;
}
</style>
So the result of this code section looks like this:
Modifying CSS on a specific section
When using custom code to modify a property from a class you will notice that all the sections that uses that class also gets modified, that happens because we didn't specify what section we want that change to take effect. Using CSS we can specify an element ID (you can learn on how to modify your section ID here).
In the code below we are specifying that we want to modify the class .hero_title from the section #hero (we could have renamed #hero to anything else, for example, #productX so if we had two hero sections in our page, it would only change the specific one we want).
<style>
#hero .hero__title {
border: 5px solid red;
padding: 20px;
}
</style>
Modifying CSS for different devices
You can change the CSS of an element by using custom code. Once you have identified what element you want to change, you can set a @media tag to specify the changes you want on any devices below the max specified, anything above that will fallback to the original CSS for that element.
Max-width is just one of the options when working with style on different devices. You can find more information on how to work with other devices as well here.
<style>
@media (max-width: 1000px) {
.cta__titles {
div {
background: yellow;
}
}
}
</style>
Important Note
Custom codes are powerful, they allow you to add an extensive amount of features to your site but they can also cause side effects if not done correctly. Make sure when adding a custom code you test it thoroughly.
Another downside is you have to code to a certain extent. We hope you can understand we cannot provide full support with specific custom code because this is beyond our support resources. If a feature is very complex to do it yourself we recommend you to hire a freelancer to get this really important feature done for you.
Examples
-
Custom Code Examples
HTML, CSS and JS examples using custom code