All Collections
Element Tutorials
Advanced
How to embed HTML code in Shogun
How to embed HTML code in Shogun
If you are looking to add custom code or integrate a 3rd party app, the HTML element is very useful.
E
Written by Edward Savoy
Updated over a week ago

Please note: Shogun is unable to provide support for custom code.

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

The HTML component is very useful. This allows you to embed the 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 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 to 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 that 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?