HTML 소스 코드를 활용하면 헤더의 로그인 아이콘 하단에 가입 유도 말풍선을 적용할 수 있어요.
디자인 에디터의 헤더 영역에 HTML 섹션을 추가해 주세요.
헤더 영역의 HTML 섹션에 아래 HTML 소스 코드를 입력해 주세요.공통에 입력하면 모바일과 데스크톱에 동일한 말풍선이 적용됩니다.
모바일과 데스크톱에 다른 문구나 말풍선 디자인을 적용하려면, 기기별 항목을 선택하여 각각 조정해 주세요.
TIP: HTML 섹션의 디자인 탭에서 상하 여백 사용을 체크 해제하면 헤더 상단에 여백이 생기지 않습니다.
자세한 설정 방법은 헤더 영역의 HTML 섹션에 css, js 스크립트 추가 시 여백 제거하기를 참고해 주세요!
헤더 영역의 HTML 섹션에 css, js 스크립트 추가 시 여백 제거하기를 참고해 주세요!말풍선 적용 코드 (모든 테마 동일)
js의 //, css의 /**/형태로 주석 안내된 항목은 원하는 내용으로 변경하여 사용해 주세요!
<script>
let wrapper;
let observers = [];
const isMenuOpen = () => {
return document.querySelector('[class*="Sidebar_sidebar__"]') !== null;
};
const getLoginButton = () => {
if (isMenuOpen()) {
return document.querySelector('[class*="SidebarUserMenu"] [href="/auth/login"]');
}
return document.querySelector('[href="/auth/login"]');
};
const updatePosition = (target) => {
if (!target || !document.body.contains(target) || !wrapper) {
wrapper?.remove();
wrapper = null;
cleanupObservers();
return;
}
const bubble = wrapper.querySelector(".floating-bubble");
if (!bubble) return;
const rect = target.getBoundingClientRect();
if (isMenuOpen()) {
const height = bubble.offsetHeight;
wrapper.style.top = `${rect.top - height - 10}px`;
bubble.classList.add("reverse");
} else {
wrapper.style.top = `${rect.bottom + 10}px`;
bubble.classList.remove("reverse");
}
wrapper.style.left = `${rect.left + rect.width / 2}px`;
if (rect.width > 0 && rect.height > 0 && rect.bottom > 0 && rect.left > 0) {
wrapper.style.opacity = "1";
}
};
const cleanupObservers = () => {
observers.forEach((obs) => obs.disconnect?.());
observers = [];
window.removeEventListener("scroll", onScrollOrResize);
window.removeEventListener("resize", onScrollOrResize);
};
const onScrollOrResize = () => {
const loginButton = getLoginButton();
if (loginButton && wrapper) {
updatePosition(loginButton);
}
};
const trackPositionChanges = (target) => {
const resizeObserver = new ResizeObserver(() => updatePosition(target));
resizeObserver.observe(target);
observers.push(resizeObserver);
const mutationObserver = new MutationObserver(() => updatePosition(target));
mutationObserver.observe(target, {
attributes: true,
childList: false,
subtree: false
});
observers.push(mutationObserver);
window.addEventListener("scroll", onScrollOrResize);
window.addEventListener("resize", onScrollOrResize);
};
const observeMenuToggle = () => {
const obs = new MutationObserver(() => {
const loginButton = getLoginButton();
if (wrapper) {
wrapper.remove();
wrapper = null;
}
if (loginButton) {
requestAnimationFrame(() => {
setTimeout(() => {
attachBubble(loginButton);
}, 30);
});
}
});
obs.observe(document.body, {
childList: true,
subtree: true
});
observers.push(obs);
};
const attachBubble = (loginButton) => {
if (document.querySelector(".floating-bubble-wrapper")) return;
wrapper = document.createElement("div");
wrapper.classList.add("floating-bubble-wrapper");
wrapper.style.opacity = "0";
const floatingBubble = document.createElement("div");
floatingBubble.classList.add("floating-bubble");
// 말풍선 내부 문구, <br>로 줄바꿈
floatingBubble.innerHTML = "회원 가입 시<br>2,000 포인트 적립 🎁";
wrapper.appendChild(floatingBubble);
document.body.appendChild(wrapper);
requestAnimationFrame(() => {
setTimeout(() => {
updatePosition(loginButton);
}, 50);
});
trackPositionChanges(loginButton);
observeMenuToggle();
};
const observeLoginButton = (loginButton) => {
const io = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
attachBubble(entry.target);
io.disconnect();
}
});
});
io.observe(loginButton);
};
const init = () => {
const loginButton = getLoginButton();
if (loginButton) {
observeLoginButton(loginButton);
}
};
init();
const mo = new MutationObserver(() => {
const btn = getLoginButton();
if (btn && !document.querySelector(".floating-bubble-wrapper")) {
observeLoginButton(btn);
}
});
mo.observe(document.body, { childList: true, subtree: true });
window.addEventListener("pageshow", () => {
const loginButton = getLoginButton();
if (loginButton && wrapper) {
updatePosition(loginButton);
}
});
window.addEventListener("popstate", () => {
const loginButton = getLoginButton();
if (loginButton && wrapper) {
updatePosition(loginButton);
}
});
</script>
<style>
.floating-bubble-wrapper {
position: fixed;
transform: translateX(-50%);
z-index: 9999;
opacity: 0;
transition: opacity 0.3s ease;
}
/* 말풍선 박스 영역 */
.floating-bubble {
position: relative;
/* 배경색 */
background: #222;
/* 글자색 */
color: #fff;
/* 여백 상+하/좌+우 */
padding: 8px 10px;
/* 둥근 모서리 */
border-radius: 10px;
/* 글자 크기 */
font-size: 12px;
/* 행간 */
line-height: 120%;
/* 문구 정렬 */
text-align: center;
/* 그림자 */
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
/* 애니메이션 */
animation: floatUpDown 2s infinite ease-in-out;
white-space: nowrap;
}
/* 말풍선 삼각형 영역 */
.floating-bubble::after {
content: "";
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
border-width: 6px;
border-style: solid;
/* 색상 - # 부분만 수정 */
border-color: transparent transparent #222 transparent;
}
.floating-bubble.reverse {
animation: floatDownUp 2s infinite ease-in-out;
}
/* 모바일 사이드 메뉴 내부 말풍선 삼각형 영역 */
.floating-bubble.reverse::after {
top: auto;
bottom: -12px;
/* 색상 - # 부분만 수정 */
border-color: #222 transparent transparent transparent;
}
/* 상, 하로 움직이는 애니메이션 */
@keyframes floatUpDown {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-3px);
}
}
@keyframes floatDownUp {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(3px);
}
}
</style>
HTML
복사
헤더 영역의 헤더 선택 후, 오른쪽 패널의 [디자인] 탭에서 로그인 버튼 보이기를 체크해 주세요.로그인 버튼이 보이는 상태에서만 적용된 말풍선이 노출됩니다. 이후 사이트를 게시하면, 웹사이트에 적용됩니다.
모든 설정이 완료되었다면 확인해 주세요!
•
말풍선 설정만으로 가입 적립금 혜택이 자동 적용되는 것은 아닙니다.
만약 ‘가입 시 적립금 지급’과 같은 말풍선을 설정해 두었다면, [식스샵 프로 > 스토어 설정 > 적립금 설정]에서 ‘가입 축하 적립금’ 항목도 함께 작업해 주세요.
•
웹사이트에 이미 로그인한 상태에서는 말풍선이 미노출되는 것이 정상입니다.
말풍선이 잘 적용되었는지 테스트할 때는 로그아웃 후 확인해 주세요.
HTML 섹션 안내서로 돌아가기
식스샵 프로 가이드로 돌아가기