Apply JavaScript to Static Pages in Shopify Supply Theme

How to apply javascript to static pages in Shopify

Directly below is the rich text editor for a static page in Shopify. Static pages do not display dynamic content as do product catalog pages. In stead, static pages display unchanging content. Most common examples include the 'About Us' and 'Contact Us' pages. 

Adding HTML code is straight forward. You simply click the button highlighted in the image. However, if you entered javascript this way, it will not work. 

This post illustrates how it is possible to apply javascript to static pages in Shopify. The workaround involves 2 major parts: 1) creating an entirely new template with javascript for each page (ie versus placing content in the rich text editor shown above) and 2) selecting that template within the rich text editor (while leaving the rich text editor window empty).

Part 1: Create a new template

• Log in to Shopify
• Make the following selections 'Online Store', 'Theme', the '...' button and then 'Edit HTML / CSS'
• Click 'Add a new template' (in the left column)
• Select 'page' from the drop down menu (as pictured in the image immediately below)
• Write the name of the new template (in the text box after the word 'called' in the image below). I suggest using a recognizable name like that of the static page. In my example, I called the template 'Contact_Us'. Do not name it 'contact' because Shopify has another page template named 'contact'.
• Click the 'Create template' button. The contents of the new template (as a liquid file) should appear

• Enter your code, including javscript into the space immediately after the code {{ page.content }} and before the next </div> tag, as shown by the red dot in the image immediately below
• Click 'save' (in the top right corner)

• Return to the rich text editor
• Leave the 'Content' empty (as shown below). That is where you would have otherwise entered all of the details that should appear on the webpage
• In the 'Template' drop down menu to the right of that empty 'content' box, select the template. In this example 'page.Contact_us' as pictured immediately below

--

--

RELATED CONTENT

• Shopify liquid file basics

Javascript code to open a URL in a popup window

Pop-up windows that open on top of a current webpage. Depending on your coding, they may (not) require their visitor's request as a clickable link. Pop-up windows can host a wide variety of content types like opt-in forms for generating leads (read about a sales funnel), a promotional video, a news release, third-party advertisements that can earn the site owner money if visitors watch and so on.

Javascript code to open a URL in a popup window

This code will require the visitor to request the pop-up window via a clickable link.

• Copy all of the code below. 
• Replace only the highlighted section with your chosen URL.

--

--

<script type="text/javascript">

// Popup window code

function newPopup(url) {

popupWindow = window.open(

url,'popUpWindow','height=400,width=600,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')

}

</script>

<p><a href="JavaScript:newPopup('http://www.website.com');" title="">Open a popup window</a></p>

---

Javascript code to embed a Youtube video into a popup window

This code will require the visitor to request the pop-up window via a clickable link.

• As pictured below, click the 'Share' tab in the 'Description' section of the Youtube video 

• As pictured below, select the 'Embed' tab
• The code will be highlighted in blue. Extract only the code that is a URL. Here is a closer look at the entire code and the section that should be extracted. Do not discard the entire code just yet.

<iframe width="560" height="315" src="https://www.youtube.com/embed/xPk8ZH7iD_Y" frameborder="0" allowfullscreen></iframe>

• Insert URL into the javascript code as highligted below
• Insert the width and height into the code as also highlighted below.

<script type="text/javascript">

// Popup window code

function newPopup(url) {

popupWindow = window.open(

url,'popUpWindow','height=315,width=560,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')

}

</script>

<p><a href="JavaScript:newPopup('https://www.youtube.com/embed/xPk8ZH7iD_Y');" title="">See embedded Youtube Video in a popup window</a></p>

---

JavaScript Code to toggle between show and hide text

Here is some javascript code that you can copy and paste into a webpage. It can allow your webpage visitors to toggle between showing and hiding the full contents of a page beyond a certain point or within a range of lines. This is useful if you need to make a webpage appear shorter. Examples include FAQs pages.

This is what your visitors see when they land on the webpage

This is what your visitors see when they click on the 'Show More' link 

--

--

<script type="text/javascript">
    function showthecontent(){
        document.getElementById("showmore").style.display = "none";
        document.getElementById("thecontent").style.display = "block";
    }
    function hidethecontent(){
        document.getElementById("thecontent").style.display = "none";
        document.getElementById("showmore").style.display = "block";
    }
</script>
<a id="showmore" href="javascript:showthecontent();" title="Title Text">Show More ... </a>
<div id="thecontent" style="display:none">
    <a href="javascript:hidethecontent();" title="Title Text">Show Less ...</a>
    <div class="yourElements">
     
            Text to be hidden / shown
     
    </div>
</div>

---

Below is javascript code for a FAQs page.

<script type="text/javascript">
    function showthecontent(){
        document.getElementById("showmore").style.display = "none";
        document.getElementById("thecontent").style.display = "block";
    }
    function hidethecontent(){
        document.getElementById("thecontent").style.display = "none";
        document.getElementById("showmore").style.display = "block";
    }
</script>
<a id="showmore" href="javascript:showthecontent();" title="Title Text">QUESTION 00 HERE</a>
<div id="thecontent" style="display:none">
    <a href="javascript:hidethecontent();" title="Title Text">Hide Answer 00</a>
    <div class="yourElements">
   
QUESTION 00 HERE
    <br> 
ANSWER 00 HERE
    <br>
          <a href="javascript:hidethecontent();" title="Title Text">Hide Answer 00</a>
    </div>
</div>