타이머 블록은 상품 목록 스케줄러 노출 설정을 '설정 안 함'으로 선택한 경우, 페이지에 직접 타이머 블록을 추가해 행사 시작까지 남은 시간을 안내할 수 있는 기능입니다.
타이머 블록 만들기
[식스샵 프로 > 웹사이트 > 블록 메이커] 에서 블록 메이커 시작하기 버튼을 클릭합니다.
왼쪽 상단의 + 블록 추가를 클릭한 뒤, 블록 이름에 ‘타이머 블록’을 입력해 주세요.
타이머 블록에 입력된 기존 값을 모두 지우고, 아래 값을 새로 입력해 주세요.
아래 박스 우측의 복사 버튼을 클릭하면 쉽게 복사할 수 있어요.
<style>
.countdown-box {
display: flex;
flex-direction: column;
gap: 20px;
padding: 30px 0;
text-align: center;
background-color: {{property.backgroundColor}};
}
.countdown-box .title {
font-weight: 700;
font-size: 20px;
line-height: 140%;
letter-spacing: 0%;
color: {{property.textColor}};
}
.countdown-values {
display: flex;
justify-content: center;
}
.countdown-values .time-box {
display: grid;
grid-template-rows: 1fr auto;
grid-template-columns: 1fr 20px;
row-gap: 4px;
}
.countdown-values .time {
font-weight: 700;
font-size: 32px;
line-height: 140%;
letter-spacing: 0%;
width: 60px;
height: 45px;
align-content: center;
text-align: center;
color: {{property.textColor}};
{{#if property.hasBorder}}
height: 80px;
border: 1px solid {{property.borderColor}};
border-radius: 8px;
{{/if}}
}
.countdown-values .dots {
display: flex;
gap: 8px;
flex-direction: column;
justify-content: center;
align-items: center;
}
.countdown-values .dots .dot {
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: rgba(181, 182, 184, 1);
}
.countdown-values .time-label {
font-weight: 400;
font-size: 14px;
line-height: 140%;
letter-spacing: 0%;
text-align: center;
color: rgba(181, 182, 184, 1);
}
.countdown-values .time-box.ss {
grid-template-columns: auto;
}
.countdown-values .ss .time-label{
grid-row: 2;
}
</style>
<template>
<div class="countdown-box">
<span class="title">
{{{property.startTitle}}}
</span>
<div class="countdown-values">
<span class="time-box dd">
<span class="time"></span>
<span class="dots">
<span class="dot"></span>
<span class="dot"></span>
</span>
<span class="time-label">일</span>
</span>
<span class="time-box hh">
<span class="time"></span>
<span class="dots">
<span class="dot"></span>
<span class="dot"></span>
</span>
<span class="time-label">시간</span>
</span>
<span class="time-box mm">
<span class="time"></span>
<span class="dots">
<span class="dot"></span>
<span class="dot"></span>
</span>
<span class="time-label">분</span>
</span>
<span class="time-box ss">
<span class="time"></span>
<span class="time-label">초</span>
</span>
</div>
</div>
</template>
<script>
const container = bm.container;
const context = bm.context;
let timerId;
let usingEndTime = false;
function getTargetDate() {
if (context.property.periodType === 'range') {
return usingEndTime
? new Date(context.property.endDateTime)
: new Date(context.property.startDateTime);
} else {
return new Date(context.property.endDateTime);
}
}
function updateCountdown() {
const now = new Date();
const target = getTargetDate();
let diff = target - now;
// 🔥 종료 시간이 지났다면 블록 제거
const end = new Date(context.property.endDateTime);
if (now > end) {
container.remove();
clearInterval(timerId);
return;
}
diff = Math.max(0, diff);
const seconds = Math.floor(diff / 1000) % 60;
const minutes = Math.floor(diff / (1000 * 60)) % 60;
const hours = Math.floor(diff / (1000 * 60 * 60)) % 24;
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
// DOM 노드
const ddEl = container.querySelector('.dd');
const hhEl = container.querySelector('.hh .time');
const mmEl = container.querySelector('.mm .time');
const ssEl = container.querySelector('.ss .time');
const titleEl = container.querySelector('.title');
// 타이틀 갱신
titleEl.innerHTML = context.property.periodType === 'range'
? (usingEndTime ? context.property.endTitle : context.property.startTitle)
: context.property.endTitle;
// 일(day): 표시 여부
if (days > 0) {
ddEl.style.display = 'grid';
ddEl.querySelector('.time').textContent = String(days).padStart(2, '0');
} else {
ddEl.style.display = 'none';
}
// 시분초
hhEl.textContent = String(hours).padStart(2, '0');
mmEl.textContent = String(minutes).padStart(2, '0');
ssEl.textContent = String(seconds).padStart(2, '0');
// 시작 → 종료 전환
if (
context.property.periodType === 'range' &&
!usingEndTime &&
diff <= 0
) {
usingEndTime = true;
updateCountdown(); // 즉시 전환
}
}
function startCountdown() {
usingEndTime = false;
updateCountdown();
timerId = setInterval(updateCountdown, 1000);
}
bm.onContextChange = () => {
// context 값이 바뀌면 다시 시작
clearInterval(timerId);
startCountdown();
};
bm.onDestroy = () => {
// 블록 제거 시 타이머 정리
clearInterval(timerId);
};
// 처음 시작
startCountdown();
</script>
CSS
복사
세팅 빌더 탭으로 이동한 뒤, 아래 박스의 내용을 복사해 더보기 메뉴에서 붙여넣기를 선택하고, 메뉴가 생성되었다면 오른쪽 상단의 저장을 눌 러 타이머 블록 설정을 완료해 주세요.
{"settings":[{"id":"periodType","label":"기간 유형","description":"기간 계산 방식을 선택하세요.","type":"RADIO","options":[{"label":"종료 시간","value":"end","icon":""},{"label":"시작 및 종료 시간","value":"range","icon":""}]},{"content":"시작 시간 타이머","isVisible":"property.periodType !== \"end\"","type":"TITLE"},{"id":"startDateTime","label":"날짜","description":"양식에 맞춰 날짜와 시간을 입력해 주세요.","placeholder":"YYYY-MM-DD HH:MM","isVisible":"property.periodType !== \"end\"","type":"TEXT"},{"id":"startTitle","label":"제목","description":"","placeholder":"텍스트를 입력해 주세요","isVisible":"property.periodType !== \"end\"","type":"RICH_TEXT"},{"content":"종료 시간 타이머","type":"TITLE"},{"id":"endDateTime","label":"날짜","description":"양식에 맞춰 날짜와 시간을 입력해 주세요.","placeholder":"YYYY-MM-DD HH:MM","type":"TEXT"},{"id":"endTitle","label":"제목","description":"","placeholder":"텍스트를 입력해 주세요","type":"RICH_TEXT"},{"id":"textColor","label":"글자 색상","description":"","type":"COLOR_PICKER"},{"id":"backgroundColor","label":"배경 색상","description":"","type":"COLOR_PICKER"},{"id":"hasBorder","label":"테두리 사용","description":"","type":"CHECKBOX"},{"id":"borderColor","label":"테두리 색상","description":"","isVisible":"property.hasBorder === true","type":"COLOR_PICKER"}],"property":{"periodType":"end","startDateTime":"2025-09-30 00:00","startTitle":"<p>행사 시작까지 남은 시간</p>","endDateTime":"2025-10-01 00:00","endTitle":"<p>행사 종료까지 남은 시간</p>","textColor":"#ffffff","backgroundColor":"#000000","hasBorder":true,"borderColor":"#AAAAAA"}}
CSS
복사
타이머 블록 추가하기
디자인 에디터에서 빈 페이지를 추가하거나, 타이머를 노출할 페이지로 이동해 주세요.
섹션 추가 메뉴에서 확장 탭을 선택하고, 블록 메이커에서 타이머 블록을 추가해 주세요.
타이머 블록 설정하기
행사 기간 설정하기
•
종료 시간 설정: 현재 시점부터 행사 종료 시점까지의 시간을 설정할 수 있습니다. 행사 종료 시간이 도래하면 타이머가 자동으로 사라집니다
◦
웹사이트에는 사이트 게시 이후에 타이머가 노출됩니다.
•
시작 및 종료 시간 설정: 행사 시작 시간과 종료 시간을 설정할 수 있습니다. 시작 시간이 되면 타이머가 작동하여 행사 종료까지 남은 시간을 표기하고, 종료 시간이 되면 타이머는 자동으로 사라집니다.
타이머 색상 설정하기
•
글자, 배경, 테두리 색상을 설정할 수 있습니다.
◦
‘일, 시간, 분 초’ 글자와 ‘:’의 색상은 옅은 회색으로 고정되어 있습니다.
너비/여백 변경하기
•
타이머 블록이 포함된 커스텀 섹션의 너비를 ‘가득 채우기’ 또는 ‘그리드 맞추기’로 설정할 수 있습니다. Round 테마만 해당
•
데스크톱과 모바일의 안쪽 여백(상하)을 각각 설정할 수 있으며, 모두 0으로 설정하면 타이머 블록이 섹션을 꽉 채우게 됩니다.
타이머 블록에 상품 노출하기
타이머 블록이 추가된 페이지에 상품 섹션을 추가하여 타이머와 상품을 노출해 주세요.
1. 상품 섹션으로 노출하기 안내서를 참고하여 판매 스케줄러에 추가한 상품을 노출해 주시면 됩니다.

