Custom liquid section not showing on published website

JGTQM2018
New Member
6 0 0

Hi everyone thank you for your input in advance. 

 

I've just added a custom liquid to my store with the code below. Everything is working on the back end theme editor but once i save it nothing is showing up on my webpage. 

 

https://aiwa-int.com.au/pages/warranty

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search Retailer Contact</title>
<style>
.center {
text-align: center;
margin: auto;
width: 50%;
padding: 10px;
}
#retailerInput {
width: 100%;
padding: 10px;
border-radius: 20px;
border: 1px solid #ccc;
margin-bottom: 10px;
font-size: 16px;
}
#searchBtn {
padding: 10px 20px;
border: none;
background-color: #C8102E;
color: white;
border-radius: 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>

<div class="center">
<h2>Search for Retailer Contact</h2>

<input type="text" id="retailerInput" placeholder="Type retailer name...">
<button id="searchBtn" onclick="searchRetailer()">Search</button>
</div>

<script>
function searchRetailer() {
var retailer = document.getElementById("retailerInput").value.toLowerCase();

switch(retailer) {
case "bigw":
window.open("https://aiwa-int.com.au/pages/product-registration");
break;
case "jaycar":
window.open("https://aiwa-int.com.au/pages/product-registration");
break;
// Add more cases for other retailers here
default:
alert("Retailer contact page not found. Please try again.");
}
}
</script>

</body>
</html>

 

 

Reply 1 (1)

tim
Shopify Expert
3329 254 1201

Despite this code being not 100% right, I was able to save it and show on my test site.

 

On your site I see no sections rather then default page section, so you must be saving somewhere else (wrong template, market?).

 

Also, rather than creating new template and adding Custom liquid section you should be able to paste your HTML code into page content field of your page after clickng the  <>  button.

 

And when I say not 100% right I mean that your page already has html and head and body tags, so outputting them is wrong (though browser ususally would be able to ignore it). And there is already a rule for center class.

 

The code needs to be like this:

<div class="center page-width">
  <h2>Search for Retailer Contact</h2>

  <input type="text" id="retailerInput" placeholder="Type retailer name...">
  <button id="searchBtn" onclick="searchRetailer()">Search</button>
</div>

<style>
  #retailerInput {
    max-width: 300%;
    padding: 10px;
    border-radius: 20px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    font-size: 16px;
  }
  #searchBtn {
    padding: 10px 20px;
    border: none;
    background-color: #C8102E;
    color: white;
    border-radius: 20px;
    font-size: 16px;
    cursor: pointer;
  }
</style>

<script>
  function searchRetailer() {
    var retailer = document.getElementById("retailerInput").value.toLowerCase();

    switch(retailer) {
      case "bigw":
        window.open("https://aiwa-int.com.au/pages/product-registration");
        break;
      case "jaycar":
        window.open("https://aiwa-int.com.au/pages/product-registration");
        break;
      // Add more cases for other retailers here
      default:
      alert("Retailer contact page not found. Please try again.");
    }
  }
</script>

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.