Insert Custom HTML & CSS to your pages

If you are looking to insert some custom codes for analytics and tracking purposes, please follow the tutorial called "Adding Custom Code".

Today we are going to see how you can very easily implement some custom HTML into any of your pages. Let's do it step by step so we can understand all the options we have there. 

 

Adding Custom Code Add-on

First, log in to your dashboard on EcomSolid and click on customize. It will open the visual editor. Once you're there, click on Library at the very top of the page. 

Once you opened it, switch from the section tab to the add-ons tab. Scroll down to the end or select the default tab. You will see the "Custom Code" add-on to the right side of your page. Click to open it and press the add button. 

Now the Library should disappear and your left sidebar should show "Custom Code" on the top. 


How to position it? 

The first thing you'll find is the Display Position section. From there you can: 

 

  • Select a hook [Inside Product List]Currently, EcomSolid only provides you the choice to place it Inside the Product List, but we will update this helpdesk frequently as soon as new features are released.
    Your custom HTML code will show up just below your product's name on your store. Use it as an additional description space! 

  • Pick a positionClick on this button and GemPages will show you a little "+" all the available places where you can drop this custom HTML Code, isn't that fantastic?
    Just click on where you would like it and it will automatically put it there. 

 

 

 

Editing the HTML Code

Right under the Display Position section, you will find a code editor. This one is to be used strictly for HTML.

Let's try it out. Let's say we want to add informative text placed right under my sticky header that will attract my users' attention. 

First let's type: 

 

<h1> THE TITLE YOU CAN'T MISS </h1> 

 

Now, notice how it doesn't show up perfectly like the other H1 titles. This is because you can style it. If you'd just like to use HTML, we can modify the size, the color, the background-color and even align the text: 

 

<h1 style="font-size: 20pt; color: blue; text-align:center">THE TITLE YOU CAN'T MISS </h1>

 

This is a good start if you slowly want to implement some HTML in your pages and you would like to have better freedom when you are designing your online shop!

 

 

Another thing you can do if you are using HTML only, go to the design section on the top left of your page. There you will find 3 options: 

  • Color: If you have not added a color style element to your text, you can do it right there!
  • Background-color: If you have not added a color style element to your text, you can do it right there!
  • Padding: Lets you insert some space around the element you are working on. 

 

Editing the CSS Code

However, you may need to add some CSS if you want it to look even better and if you would like to be able to style it however you want. 

 

Let's check this out. First, in your HTML editor, let's delete all the styles from your h1 title and we will add a class to it.

 

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

 

In your CSS editor, you need to link that class to your h1 element. Simply enter: 

 

.titletop {
}

 

Now we need to add everything we just deleted. Just simply add some and modify your CSS class: 

 

.titletop {
  width: 100%;
  text-align: center;
  color: grey;
} 

 

 

 

If you feel like it, you can play around with different CSS elements that you can add to your title. 

 

Bonus

Using the CSS code editor, you can also animate the text or images you have inserted. Let’s say I want my title to grow bigger when the user just loaded my website and I want it to come back to normal after 2 seconds.

For that, we will need to use the @Keyframe and some animation properties to link it to our class above. 

 

Let’s build our Keyframe. Copy this code on top of .titletop {} to declare it. 

 

@keyframes bounceIn {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

 

Now, let’s set up our animation properties. We will need to add more information into the .titletop class! 

 

.titletop {
  width: 100%;
  text-align: center;
  color: grey;
  animation-duration: 2s;
  animation-name: bounceIn;
}

 

If you click save and preview, you will now have a title that will automatically grow when you open your page. 

 

 

 

There are multiple uses you could think of with this feature. You can use it for announcing a new product, adding important information you think your customers should know, adding an animated image, and many more! 

 

For beginners who would like to know more about CSS animations, you can follow these two links right here: 

- CSS Animation for Beginners

- CSS List of Animation

 

 

 


Was this helpful?