How to add html, css and javascript to a home page

Store Design

Topic summary

A user working with Shopify’s Dawn theme needs help integrating custom HTML, CSS, and JavaScript code for a countdown timer on their homepage. The countdown is designed to redirect users to a product page when it expires.

Current situation:

  • User has complete code ready (HTML structure, CSS styling, JavaScript timer logic)
  • Code includes a “DROP 0/01” countdown display with days/hours/minutes/seconds
  • Features a background video element and custom fonts
  • Needs conversion from standalone HTML page to Shopify homepage integration

Technical details:

  • Uses Dawn theme
  • Code includes timer calculations and auto-redirect functionality
  • Styling uses flexbox layout with custom color scheme

Response received:
Another user provided basic guidance suggesting CSS placement before </head> tag and JavaScript before </body> tag, offering further assistance if needed.

Status: Discussion remains open with initial guidance provided but full implementation steps not yet detailed. The original poster has not confirmed whether they need additional help with the Shopify-specific integration process.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

I need to add an countdown and text on the home page, when the timer will run out it will redirect user to a product site. I already have the code done but I need help converting it to spotify. I need it to be a home page not a new page. I am using Dawn theme

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Countdown</title>
	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
		<section class="coming-soon">
			<div>
				<h2>DROP 0/01</h2>
				<div class="countdown">
					<div class="container-day">
						<h3 class="day text-color-main">Time</h3>
						<h3>Days</h3>
					</div>
						<div class="container-hour">
						<h3 class="hour text-color-main">Time</h3>
						<h3>Hour</h3>
					</div>
						<div class="container-minute">
						<h3 class="minute text-color-main">Time</h3>
						<h3>Minute</h3>
					</div>
						<div class="container-second">
						<h3 class="second text-color-main">Time</h3>
						<h3>Second</h3>
					</div>
				</div>
			</div>
		</section>
<script src="timer.js"></script>

<video autoplay muted loop id="myVideo">
    <source src="" type="video/mp4">
</body>
</html>

CSS

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Roboto';
}

h2{
	font-size: 5rem;
	font-weight: bold;
	padding: 3rem;
	color: #ffffff;
}

h3 {
	color: #ffffff;
	font-family: 'Roboto';
}

.coming-soon {
	min-height: 100vh;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center; 
}

.countdown {
	display: flex;
	justify-content: space-around;
	text-align: center;
}

.day,
.hour,
.minute,
.second {
	font-size: 3rem;

}

.text-color-main {
 background-color: #ffffff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.waiting {
	height: 50vh;
}

#myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
  }

js

const countDown = () => {
	const countDate = new Date('December 31, 2022 00:00:00').getTime(); // CHANGE THE TIME TO A DROP COUNTDOWN
	const now = new Date().getTime();
	const gap = countDate - now;

// Calculations for Time
const second = 1000;
const minute = second * 60;
const hour = minute * 60;
const day = hour * 24;

// Calculate missing days
const finalDay = Math.floor(gap / day);
const finalHour = Math.floor((gap % day) / hour);
const finalMinute = Math.floor((gap % hour) / minute);
const finalSecond = Math.floor((gap % minute) / second);

document.querySelector('.day').innerText = finalDay;
document.querySelector('.hour').innerText = finalHour;
document.querySelector('.minute').innerText = finalMinute;
document.querySelector('.second').innerText = finalSecond;

if(gap < 1000){
    location.href = ''; //PRODUCT SITE
    audio.play();
}

};

setInterval(countDown, 1000);
2

Hello @Loftop ,

you can put css before tag

and javascript before tag

or I can help you add it, pls contact with me

thank you

1 Like