This tutorial shows you how to use the HTML element to add custom code into your page.

The HTML component is very useful. This allows you to embed custom code that you want onto the page.

  1. Click and drag the HTML component into a dropzone on the page.
  2. Click on the highlighted HTML component to open the HTML editor.

You can see that the bottom half of the editor window had opened up a text box. You can enter HTML in here and see the results in the editor above immediately.

Click outside of the HTML editor box or the close icon to close the editor.

How to include CSS and Javascript on your page

The HTML element can also be used to add custom CSS and JavaScript into your page by including the appropriate <style></style>  and <script></script> tags respectively.

Can Liquid be used in the HTML element?

Templating languages, such as Liquid, are not supported within the HTML element. Such languages require placement within the store's theme to function.

However, if your embed code contains Liquid that represents simple product data, it is possible to use that embed code in an HTML element by replacing the Liquid tags.

As an example, let's say you have an embed code looks like the following:

<div data-product="{{product.id}}" class="example-reviews-widget"></div>

The  {{product.id}}  portion is a Liquid tag (denoted by the double curly brackets). That tag can be replaced with the product's actual ID number.  The updated code would look like the following:

<div data-product="123456789" class="example-reviews-widget"></div>

With that Liquid tag replaced, the embed code can now be used in an HTML element.

Did this answer your question?