학습 내용
재고 있음 버튼과 양식이 테마의 스타일과 일치하도록 각 무료 Shopify 테마의 주요 변 경 사항에 대해 알아보십시오. 클라비요 "사용 가능 시 알림" 버튼과 양식은 다양하게 구성할 수 있습니다. 디자인 기본 설정에 따라 색상, 글꼴, 텍스트 및 기타 요소를 변경할 수 있습니다.
이월 재고 설치는 특정 무료 Shopify 테마에만 지원되며 사용자 지정 테마를 사용하는 Shopify 스토어에는 지원되지 않습니다. 현재 클라비요 지원팀은 사용자 지정 테마를 사용하는 스토어에 대한 재입고 구현을 지원할 수 없습니다. 스토어에서 사용 중인 Shopify 테마를 확인하려면 Shopify 테마 감지기를 사용하면 됩니다.
시작하기 전 안내 사항
아직 통합에 대한 단계별 지침을 읽어보지 않았다면 이 문서를 계속 진행하기 전에 Shopify 시작하기 가이드를 읽어보시기 바랍니다.
재입고 기능 및 활성화 방법에 대한 자세한 내용은 Shopify용 재입고 설치 방법가이드를 참조하십시오.
버튼 및 양식 스타일 지정 방법버튼 및 양식 스타일 지정 방법
- 스니펫을 설치할 때 이 글에서 무료 테마에 대한 스타일링 스니펫을 찾아보세요.
- 기본 스니펫은 아래와 같습니다.
트리거내에서 줄 항목을 업데이트(또는 추가)합니다:{}및 모달: {} 스타일링 코드조각에 표시된 내용에 따라 기본 코드조각의 섹션을 수정합니다.- 예를 들어 크레이브 테마를 사용하는 경우 모달 섹션에 다음과 같은 줄만 추가하면 됩니다:
font_family: '"Archivo", serif;'
- 예를 들어 크레이브 테마를 사용하는 경우 모달 섹션에 다음과 같은 줄만 추가하면 됩니다:
- 기타 원하는 스타일링을 원하는 대로 라인 항목에 업데이트합니다.
<스크립트 src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>
<script>
var 클라비요 = 클라비요 || [];
klaviyo.init({
account: "PUBLIC_API_KEY",
platform: "shopify"
});
klaviyo.enable("백인스톡",{
트리거: {
product_page_text: "Notify Me When Available",
product_page_class: "button",
product_page_text_align: "center",
product_page_margin: "0px",
replace_anchor: false
},
모달: {
headline: "{product_name}",
body_content: "이 상품이 재입고되면 알림을 받으려면 등록하세요.",
이메일_필드_라벨: "이메일",
button_label: "사용 가능하면 알려주세요",
구독_성공_라벨: "가입했습니다! 다시 돌아오면 알려드리겠습니다.",
footer_content: '',
additional_styles: "@import url('https://fonts.googleapis.com/css2?family=Roboto+wght@400;700&display=swap');",
drop_background_color: "#000",
background_color: "#fff",
text_color: "#222",
button_text_color: "#fff",
button_background_color: "#439fdb",
close_button_color: "#ccc",
error_background_color: "#fcd6d7",
error_text_color: "#C72E2F",
성공_배경_색: "#d3efcd",
성공_텍스트_색: "#1B9500"
}
});
</script>Crave
트리거: {
product_page_class: 'button'
},
모달: {
font_family: '"Archivo", serif;'
}새벽
트리거: {
product_page_class: 'button'
},
모달: {
font_family: '"Assistant", sans-serif;'
}스튜디오
트리거: {
product_page_class: 'button'
},
모달: {
font_family: '"Electra", serif;'
}컬러 블록
트리거: {
product_page_class: 'button'
},
모달: {
font_family: '"Futura", sans-serif;'
}Sense
트리거: {
product_page_class: 'button'
},
모달: {
font_family: '"Harmonia Sans", sans-serif;'
}맛
트리거: {
product_page_class: 'button'
},
모달: {
font_family: '"Anonymous Pro", sans-serif;'
}Craft
트리거: {
product_page_class: 'button'
},
모달: {
font_family: '"Quattrocento Sans", sans-serif;'
}라이드
트리거: {
product_page_class: 'button'
},
모달: {
font_family: '"Avenir Next", sans-serif;'
}새로 고침
트리거: {
product_page_class: 'button'
},
모달: {
font_family: '"Questrial", sans-serif;'
}Simple
뷰티뷰티
모달: {
font_family: '"PT Serif",serif;'
}팝
BoneBone
트리거: {
product_page_class: 'btn btn--full'
},
모달: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Raleway');",
font_family: '"Raleway","HelveticaNeue","Helvetica Neue",sans-serif;'
}장난감
트리거: {
product_page_class: 'btn btn--large btn--full'
},
모달: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Open+Sans');",
font_family: '"Open Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}블랙 & 화이트
트리거: {
product_page_class: 'btn btn--large btn--full'
},
모달: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Open+Sans');",
font_family: '"Open Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}활기찬
트리거: {
product_page_class: 'btn btn--large btn--full'
},
모달: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Open+Sans');",
font_family: '"Open Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}벤처
스노보드스노보드
트리거: {
product_page_class: 'btn btn--full'
},
모달: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Karla');",
font_family: '"Karla","HelveticaNeue","Helvetica Neue",sans-serif;'
}아웃도어
트리거: {
product_page_class: 'btn btn--full'
},
모달: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Roboto');",
font_family: '"Roboto","HelveticaNeue","Helvetica Neue",sans-serif;'
}복싱
트리거: {
product_page_class: 'btn btn--full'
},
모달: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');",
font_family: '"Source Sans Pro","HelveticaNeue","Helvetica Neue",sans-serif;'
}데뷔
기본값기본값
트리거: {
product_page_class: 'btn btn--full'
},
모달: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Work+Sans');",
font_family: '"Work Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}빛
트리거: {
product_page_class: 'btn btn--full'
},
모달: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Muli');",
font_family: '"Muli","HelveticaNeue","Helvetica Neue",sans-serif;'
}공급
빛빛
트리거: {
product_page_class: 'btn btn--full'
},
모달: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Roboto');",
font_family: '"Roboto","HelveticaNeue","Helvetica Neue",sans-serif;'
}파란색
트리거: {
product_page_class: 'btn btn--large btn--full'
},
모달: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Montserrat');",
font_family: '"Montserrat","HelveticaNeue","Helvetica Neue",sans-serif;'
}내러티브
따뜻한따뜻한
트리거: {
product_page_class: 'btn btn--full'
},
모달: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Avenir');",
font_family: '"Avenir","HelveticaNeue","Helvetica Neue",sans-serif;'
}빛
트리거: {
product_page_class: 'btn btn--full'
},
모달: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Open+Sans');",
font_family: '"Open Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}감기
트리거: {
product_page_class: 'btn btn--full'
},
모달: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Lato');",
font_family: '"Lato","HelveticaNeue","Helvetica Neue",sans-serif;'
}브루클린
클래식클래식
모달: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Arapey');",
font_family: '"Arapey",serif;'
}최소
현대현대
모달: {
font_family: '"PT Serif",serif;'
}빈티지
모달: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=PT+Sans');",
font_family: '"PT Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}패션
모달: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=PT+Sans');",
font_family: '"PT Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}결과
이제 Shopify 스토어에서 재고 있음 버튼 및 양식의 스타일을 업데이트했습니다.
추가 리소스