...
Decide where the widget should be placed on the page. For example, below the header element.
In the code, find the closing tag for the header element (
</header>
).Paste the widget's HTML code below the closing header tag.
For example:Code Block <script src="https://app.tireconnect.ca/js/widget.js"></script> <div id="tireconnect"></div> <script> TCWidget.init({ apikey: 'SUBSTITUTE_YOUR_API_KEY_HERE', container: 'tireconnect' }); </script>
...
Paste the widget's HTML code into the Write HTML… field.
For example:Code Block <script src="https://app.tireconnect.ca/js/widget.js"></script> <div id="tireconnect"></div> <script> TCWidget.init({ apikey: 'SUBSTITUTE_YOUR_API_KEY_HERE', container: 'tireconnect' }); </script>
Click the Preview button to see how the widget will appear.
...
In the code editor, open the theme.liquid file located under the Layout section.
Decide where you want the widget to appear:
Paste the widget code inside the <body> element.
For example, you :Code Block <script src="https://app.tireconnect.ca/js/widget.js"></script> <div id="tireconnect"></div> <script> TCWidget.init({ apikey: 'SUBSTITUTE_YOUR_API_KEY_HERE', container: 'tireconnect' }); </script>
You can place the widget code near the closing </body> tag to include it in a consistent location consistently across your site.
Save and Preview:
...