Javascript can be added to your Shopify store to create custom functions and behaviors. An example is using an event listener to connect custom Javascript code with a quiz completion.
This guide will go over a method that allows you to add custom JS code without editing theme code directly.
💡 What you'll learn about
Adding Javascript to a page (jump to section)
Use cases for custom Javascript code (jump to section)
💡 Prerequisites
Developer tools are available on the Octane Plus plan.
Using these features will require you to create custom code on your website that targets with your desired developer tool. This document serves as a starting point for those with the technical proficiency to build the next steps.
Adding Javascript to a page
While Javascript code can be added directly into your theme by editing theme code, this guide will focus on methods that allow you to avoid editing your website's code directly.
This includes:
Adding Javascript in the HTML section of page content
Adding Javascript in a custom liquid block in the theme editor
Both of these methods accept code in HTML fields - this means any Javascript you add will need to be encased in a <script> tag.
Example:
<script>
document.addEventListener('octane.quiz.completed', function (e) {
console.log('completed');
console.log(e.detail);
}, false);
</script>
Adding Javascript in the HTML section of page content
After a new page has been created (Sales channels → Online Store → Pages), you can select the < > icon to add HTML code into the content area of the page.
Javascript can be added here as long as it's enclosed in a <script> tag.
Adding Javascript in a custom liquid block in the theme editor
Javascript code can also be added in a custom liquid block. This is a type of block that can be added in the theme editor.
In the theme editor, custom liquid blocks can be added to a page template by going to: Template → Add section → Custom Liquid.
In the "Custom Liquid" field, Javascript can be added as long as it's enclosed in a <script> tag.
Use cases for custom Javascript code
Here are some use case examples for using custom Javascript code with an Octane AI quiz.
📕 Publishing a quiz
The publish code for an Octane AI quiz includes a script enclosed in a <script> tag which allows quizzes to render dynamically without requiring the quiz's full code to be added into your website. Instead, the script is injected asynchronously into the website.
Quizzes can be published through both of the methods listed above.
For best practice, we recommend using the custom liquid block, which will be less limiting on quiz formatting and allow you to easily add custom CSS to the quiz.
📕 Listening for the 'octane.quiz.completed' custom event
Octane Plus users will be able to listen for a quiz completed custom event, which lets you create custom code that runs whenever a quiz is completed.
Quiz completed custom events include:
Quiz answers
Recommended products
Opt-in data
Results page URL
Custom logic can be built using this data such as redirecting to another URL or generating personalized, dynamic content at the end of a quiz.
📕 Listening for the 'octane.quiz.addToCart' event
The add to cart custom event triggers every time the add to cart button is clicked. This is useful for creating custom functionality related to adding items to a cart, such as creating compatibility with custom cart drawers or updating the website (like a shopping cart icon) when an item has been added to the cart.