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 code from third-party apps
Many apps will provide you with shortcode bracketed by div tags that may look something like this <div></div> that is intended to render a section or component of their app on the page.
Note, however, that <div id='content'></div> functions differently, in that that request will only be fulfilled once on any given page. Due to how visibility settings work, the code needs to be placed on a region of the page that is shown to all devices in order for the embedded content to render on all devices.
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.
FAQ
I've added code to the page in the HTML element and nothing is rendered live.
Consider the tags that surround the content that you've added and the documented purpose for that code. If the code you have is contained inside <script> tags, this is going to run scripts on your page to support content that is typically contained within <div> tags. Having exclusively content added in an HTML container within script tags is unlikely to render any object for the end user to see.
As with any custom code, we always recommend double-checking the user documentation and checking that you have followed the appropriate embed process.
I'm stuck, who do I turn to for help?
Generally speaking, the provider of the code is the best party to speak to regarding embedded solutions as they will have the most insight into how their code is intended to work and whether the code in question is valid for placement inside the HTML element, given the callouts above.
Shogun makes no promises that we will be able to resolve issues faced when working with third-party app code, but we would be happy to take a look at the use case and advise, troubleshoot, or redirect as appropriate.