Search
⏰

타이머 블록 활용하기

타이머 블록은 상품 목록 스케줄러 노출 설정을 '설정 안 함'으로 선택한 경우, 페이지에 직접 타이머 블록을 추가해 행사 시작까지 남은 시간을 안내할 수 있는 기능입니다.

타이머 블록 만들기

[식스샵 프로 > 웹사이트 > 블록 메이커] 에서 블록 메이커 시작하기 버튼을 클릭합니다.
왼쪽 상단의 + 블록 추가를 클릭한 뒤, 블록 이름에 ‘타이머 블록’을 입력해 주세요.
타이머 블록에 입력된 기존 값을 모두 지우고, 아래 값을 새로 입력해 주세요.
아래 박스 우측의 복사 버튼을 클릭하면 쉽게 복사할 수 있어요.
<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으로 설정하면 타이머 블록이 섹션을 꽉 채우게 됩니다.

타이머 블록에 상품 노출하기

타이머 블록이 추가된 페이지에 상품 섹션을 추가하여 타이머와 상품을 노출해 주세요.