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:
Decking Calculator
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.calculator {
label {
input, select, button {#ccc ;
button {#28a745 ;
button:hover {#218838 ;
.results {#ccc ;#f9f9f9 ;
.results p {
.layout-selector {
.layout-option {#ccc ;#f9f9f9 ;
.layout-option img {
.layout-option.selected {#28a745 ;#e9ffe9 ;
.layout-image {#555 ;
Decking Calculator
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.
Deck Length (mm):
Deck Width (mm):
Gap Width (mm):
2 mm
4 mm
6 mm
* Select a layout to see its material requirements:
Parallel
Diagonal
Chevron
Picture Frame
Random
Number of Breaker Boards:
0
1
2
3
4
5
6
Include Fascia Boards
Calculate
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