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.
Click and drag the HTML component into a dropzone on the page.
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.