무료 재고 있음 버튼 및 양식 스타일 지정 방법 Shopify 테마

학습 내용

재고 있음 버튼과 양식이 테마의 스타일과 일치하도록 각 무료 Shopify 테마의 주요 변경 사항에 대해 알아보십시오. 클라비요 "사용 가능 시 알림" 버튼과 양식은 다양하게 구성할 수 있습니다. 디자인 기본 설정에 따라 색상, 글꼴, 텍스트 및 기타 요소를 변경할 수 있습니다. 

이월 재고 설치는 특정 무료 Shopify 테마에만 지원되며 사용자 지정 테마를 사용하는 Shopify 스토어에는 지원되지 않습니다. 현재 클라비요 지원팀은 사용자 지정 테마를 사용하는 스토어에 대한 재입고 구현을 지원할 수 없습니다. 스토어에서 사용 중인 Shopify 테마를 확인하려면 Shopify 테마 감지기를 사용하면 됩니다. 

시작하기 전 안내 사항

아직 단계별 연동 지침을 읽어보지 않았다면 이 문서를 계속 읽기 전에 Shopify 시작하기 가이드를 읽어보시기 바랍니다.

재입고 기능 및 활성화 방법에 대한 자세한 내용은 재입고 설치 가이드() 를 Shopify 참조하세요.

버튼 및 양식 스타일 지정 방법

1. 스니펫을 설치할 때 이 글에서 무료 테마에 대한 스타일링 스니펫을 찾아보세요.
2. 기본 스니펫은 아래와 같습니다. 트리거 내에서 줄 항목을 업데이트(또는 추가)합니다: {} 및 모달: {} 스타일링 코드조각에 표시된 내용에 따라 기본 코드조각의 섹션을 수정합니다.
   1. 예를 들어 크레이브 테마를 사용하는 경우 모달 섹션에 다음과 같은 줄만 추가하면 됩니다: font_family: '"Archivo", serif;'
3. 기타 원하는 스타일링을 원하는 대로 라인 항목에 업데이트합니다.

<스크립트 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;'

}

팝

Bone

트리거: {

 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 스토어에서 재고 있음 버튼 및 양식의 스타일을 업데이트했습니다. 

추가 리소스

• Shopify용 재고 재고를 다시 설치하는 방법
• Shopify용 고유 쿠폰 코드 생성 방법