사용자 지정 CSS

모든 카운트다운 유형의 디자인 설정 맨 끝에는 Custom CSS (Developer Zone) 상자가 있습니다. 이곳에 입력한 내용은 시각적 컨트롤로 설정한 모든 것 위에 덧붙여져 스토어프런트의 해당 카운트다운에 적용됩니다.

디자인 설정 맨 끝에 있는 Custom CSS 상자입니다.

주의

이것은 최후의 수단이지 첫 번째 방법이 아닙니다. 여기에 작성한 CSS는 검증되지 않고, 미리보기에 정확히 반영되지 않을 수 있으며, 테마가 바뀌어도 계속 적용됩니다. 먼저 시각적 컨트롤을 사용해 보세요. 대부분의 스토어에 필요한 기능을 다룹니다.

실제로 유용한 경우

• 세밀한 위치 조정 — 간격이 특이한 테마에서 카운트다운의 여백을 조정해 제대로 맞출 때.
• 반응형 조정 — 모바일 설정으로 다룰 수 없는 중단점에 대한 미디어 쿼리.
• 테마 세부 요소에 맞추기 — 테마 곳곳에서 쓰이는 특정 모서리 반경이나 그림자를 컨트롤로 정확히 재현할 수 없을 때.
• 요소 숨기기 — 다른 방법으로는 끌 수 없는 카운트다운의 일부를 제거할 때.

작성 방법

이 상자에는 <style> 태그 없이 선택자와 규칙으로 이루어진 일반 CSS를 입력합니다.

.samita-countdown {
  margin-top: 24px;
}

@media (max-width: 749px) {
  .samita-countdown {
    margin-top: 12px;
  }
}

카운트다운의 컨테이너에는 samita-countdown 클래스가 있고, 렌더링된 각 카운트다운에는 카운트다운 ID를 기반으로 한 ID가 부여됩니다. 더 구체적인 대상을 지정하려면 브라우저 개발자 도구에서 렌더링된 카운트다운을 검사하고 그곳에서 찾은 클래스를 사용하세요.

참고

카운트다운 내부의 클래스 이름은 앱이 업데이트될 때 바뀔 수 있습니다. 깊은 내부 선택자 대신 .samita-countdown과 직접 만든 재정의로 CSS의 범위를 한정하면 깨질 가능성이 훨씬 줄어듭니다.

범위 한정하기

이 상자의 CSS는 자동으로 카운트다운에만 한정되지 않습니다. img { ... } 같은 선택자는 페이지의 모든 이미지에 영향을 줍니다.

카운트다운에만 적용되도록 항상 규칙 앞에 접두사를 붙이세요.

/* Good — scoped */
.samita-countdown img { border-radius: 4px; }

/* Risky — affects the whole page */
img { border-radius: 4px; }

실제 페이지에서 테스트하기

빌더 미리보기는 테마를 재현하지 않으므로, 미리보기에서 잘 맞는 CSS가 제품 페이지에서는 맞지 않을 수 있습니다. 저장한 뒤 실제 페이지를 열어 데스크톱과 휴대폰에서 확인하세요.

CSS를 직접 작성하고 싶지 않다면

지원팀이 테마별 조정을 도와드릴 수 있습니다. 앱의 Custom CSS 상자 옆에는 “Chat with us to customize countdown in your theme.“라고 설명된 Chat now! 버튼이 있습니다. 페이지 링크와 변경하려는 내용을 적어 지원팀에 문의하셔도 됩니다.

다음 단계

• 카운트다운 디자인하기
• 표시 위치
• 지원팀에 문의
• 카운트다운이 표시되지 않을 때