After adding a “Custom liquid” section to any page on my store and using the below, my footer is no longer available. It completely disappears. Can anyone determine the issue?
or tell me why the added custom liquid, which is independent from the footer, somehow stops the footer being visible.
The coding I’m using in the custom liquid field is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Decking Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.calculator {
max-width: 400px;
margin: 0 auto;
}
label {
display: block;
margin: 10px 0 5px;
}
input, select, button {
width: 100%;
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #28a745;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
.results {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f9f9f9;
}
.results p {
margin: 5px 0;
}
.layout-selector {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.layout-option {
flex: 1 1 calc(33% - 10px);
border: 1px solid #ccc;
border-radius: 4px;
text-align: center;
padding: 10px;
cursor: pointer;
background-color: #f9f9f9;
}
.layout-option img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto 5px;
}
.layout-option.selected {
border-color: #28a745;
background-color: #e9ffe9;
}
.layout-image {
font-size: 0.9em;
color: #555;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="calculator">
<h2>Decking Calculator</h2>
<p>Welcome to the Decking Calculator! Use this tool to estimate the number of decking boards, clips, and other materials required for your deck based on its size, layout, and additional features such as breaker boards.</p>
<label for="deckLength">Deck Length (mm):</label>
<input type="number" id="deckLength" placeholder="Enter length in mm">
<label for="deckWidth">Deck Width (mm):</label>
<input type="number" id="deckWidth" placeholder="Enter width in mm">
<label for="gapWidth">Gap Width (mm):</label>
<select id="gapWidth">
<option value="2">2 mm</option>
<option value="4">4 mm</option>
<option value="6">6 mm</option>
</select>
<div class="layout-image">* Select a layout to see its material requirements:</div>
<div class="layout-selector" id="layoutSelector">
<div class="layout-option" data-layout="parallel">
<img src="images/parallel.png" alt="Parallel Layout">
<span>Parallel</span>
</div>
<div class="layout-option" data-layout="diagonal">
<img src="images/diagonal.png" alt="Diagonal Layout">
<span>Diagonal</span>
</div>
<div class="layout-option" data-layout="chevron">
<img src="images/chevron.png" alt="Chevron Layout">
<span>Chevron</span>
</div>
<div class="layout-option" data-layout="pictureFrame">
<img src="images/pictureFrame.png" alt="Picture Frame Layout">
<span>Picture Frame</span>
</div>
<div class="layout-option" data-layout="random">
<img src="images/random.png" alt="Random Layout">
<span>Random</span>
</div>
</div>
<label for="breakerBoards">Number of Breaker Boards:</label>
<select id="breakerBoards">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<label>
<input type="checkbox" id="useFascia"> Include Fascia Boards
</label>
<button onclick="calculateDecking()">Calculate</button>
<div class="results" id="results"></div>
</div>
<script>
let selectedLayout = "parallel"; // Default selection
// Handle layout selection
document.getElementById("layoutSelector").addEventListener("click", function(e) {
const option = e.target.closest(".layout-option");
if (!option) return;
// Deselect all options
document.querySelectorAll(".layout-option").forEach(option => option.classList.remove("selected"));
// Select the clicked option
option.classList.add("selected");
// Update selected layout
selectedLayout = option.getAttribute("data-layout");
});
function calculateDecking() {
const boardLength = 5400; // mm
const boardWidth = 138; // mm
const spacerClipsPerBoard = 16;
const lockingClipsPerBoard = 1;
const starterClipsPerBoard = 16;
const deckLength = parseFloat(document.getElementById("deckLength").value);
const deckWidth = parseFloat(document.getElementById("deckWidth").value);
const gapWidth = parseFloat(document.getElementById("gapWidth").value);
const breakerBoards = parseInt(document.getElementById("breakerBoards").value);
const useFascia = document.getElementById("useFascia").checked;
if (isNaN(deckLength) || isNaN(deckWidth) || deckLength <= 0 || deckWidth <= 0) {
alert("Please enter valid deck dimensions.");
return;
}
// Material multiplier for layout
let materialMultiplier;
switch (selectedLayout) {
case "parallel":
materialMultiplier = 1.0;
break;
case "diagonal":
materialMultiplier = 1.1;
break;
case "chevron":
materialMultiplier = 1.2;
break;
case "pictureFrame":
materialMultiplier = 1.15;
break;
case "random":
materialMultiplier = 1.05;
break;
default:
materialMultiplier = 1.0;
}
const totalBoardWidth = boardWidth + gapWidth;
const boardsRequired = Math.ceil((deckWidth / totalBoardWidth) * materialMultiplier);
// Spacer clips calculation
const spacerClips = boardsRequired * spacerClipsPerBoard;
// Locking clips calculation
let lockingClips = boardsRequired * lockingClipsPerBoard;
if (selectedLayout === "random") {
const buttJoints = Math.ceil((deckLength / boardLength) * boardsRequired);
lockingClips += buttJoints * 2; // 2 per butt joint
}
// Starter clips calculation
const perimeterBoards = Math.ceil((2 * (deckLength + deckWidth)) / boardLength);
const starterClips = perimeterBoards * starterClipsPerBoard;
// Breaker boards adjustment
const breakerBoardClips = breakerBoards * lockingClipsPerBoard;
// Fascia board calculation
let fasciaBoards = 0;
if (useFascia) {
const perimeter = 2 * (deckLength + deckWidth); // mm
fasciaBoards = Math.ceil(perimeter / boardLength);
}
// Display
