Shopify에 커스텀 버튼을 추가하는 방법

Shopify에서 판매하고 있다면, CTA 버튼의 디자인은 매우 중요합니다. 프로모션 페이지, VIP 뉴스레터 가입, 제휴사 링크 등 어디로 연결되든, 눈에 띄는 버튼은 페이지에 묻히는 버튼보다 더 자주 클릭됩니다. 그리고 스토어에서 더 많은 클릭은 더 많은 판매를 의미합니다.

Dawn을 비롯한 Shopify OS 2.0 테마에는 기본 버튼 블록이 있지만, 버튼의 모양을 제어할 수 있는 권한은 거의 없습니다. 이 블록에서는 레이블, 링크, 스타일(단색 또는 테두리)을 설정할 수 있으며, 색상은 전역 테마 설정에서 가져옵니다. 이렇게 하면 스토어의 일관성을 유지할 수 있지만(이것이 테마 설정의 핵심이기도 합니다), 눈에 띄어야 할 버튼이 사이트의 다른 모든 버튼과 똑같아 보인다는 의미이기도 합니다.

고유한 색상, 호버 효과 또는 아이콘이 있는 독립형 버튼을 만들려면 두 가지 방법 중 하나를 선택해야 합니다. 테마 편집기에서 Custom Liquid 블록을 추가하고 HTML 및 CSS를 직접 작성하거나, 스타일링을 처리하고 붙여넣을 수 있는 임베드 코드를 제공하는 무료 호스팅 위젯을 사용할 수 있습니다.

테마 코드를 편집하거나 개발자에게 비용을 지불하지 않고도 Shopify 스토어에 전환에 최적화된 맞춤형 CTA 버튼을 만들고 싶다면, 이 가이드에서 두 가지 방법을 모두 사용하여 Shopify에서 버튼을 추가하는 방법을 확인해 보세요.

Watch on youtube

How to Add a Custom Button to Shopify

옵션 1: Custom Liquid 및 CSS 사용하기

타사 앱을 설치하지 않고 Shopify 스토어에 독특한 버튼 디자인을 적용하는 표준적인 방법은 코드를 직접 작성하는 것입니다. Shopify의 테마 편집기에는 사용자 지정 HTML 및 CSS를 추가할 수 있는 Custom Liquid 섹션이 포함되어 있어 테마 파일을 직접 편집하지 않고도 원하는 대로 버튼을 정의하고 스타일을 지정할 수 있습니다.

Custom Liquid 및 CSS를 사용하여 Shopify에서 버튼을 추가하는 방법은 다음과 같습니다.

1. Shopify 관리자의 왼쪽 메뉴에서 **Online Store(온라인 스토어)**로 이동합니다. 그런 다음 **Online Store** 옆에 있는 **연필** 아이콘을 클릭하거나 화면에서 **Edit theme(테마 편집)**을 클릭합니다.

2. 왼쪽 사이드바에서 **Add section(섹션 추가)**을 클릭하고 **Custom Liquid**를 검색하여 선택합니다. 코드를 입력할 수 있는 텍스트 필드가 오른쪽에 나타납니다.

3. CSS가 포함된 <style> 블록과 함께 버튼의 HTML을 추가한 다음 오른쪽 상단 모서리에 있는 **Save(저장)**를 클릭합니다. 작업하는 동안 미리보기에 변경 사항이 표시됩니다.

이 방법을 사용할 때 주의할 점이 있습니다. 스타일링을 직접 작성하면 실수할 위험이 따릅니다. 범위 선택자(scoped selector) 없이 작성된 규칙은 페이지의 다른 요소에 영향을 미칠 수 있으며, 머리글이나 바닥글에 추가된 Custom Liquid는 스토어의 모든 페이지에 표시되므로 작은 오류 하나가 단순히 스타일링하려던 버튼보다 더 큰 영향을 미칠 수 있습니다. Shopify 역시 코드를 편집하기 전에 테마를 복제하여 백업할 것을 권장하는데, 이는 플랫폼 자체에서도 이러한 위험성을 인지하고 있음을 보여줍니다.

개발자를 고용하면 기술적인 문제는 해결될 수 있지만, 단일 버튼 하나 때문에 비용을 지불하기에는 다소 부담스러울 수 있습니다. 특히 여러 버전을 테스트해 보고 싶거나 변경할 때마다 추가로 요청을 해야 하는 경우라면 더욱 그렇습니다.

옵션 2: 무료 맞춤형 버튼 위젯 추가하기 (권장)

위험 부담 없이 디자인을 제어하고 싶으신가요? 호스팅되는 무료 버튼 위젯은 고유한 색상, 호버 상태 및 아이콘을 갖춘 Shopify의 Custom Liquid 대안입니다. 시각적 빌더에서 버튼을 사용자 지정하고 임베드 코드를 복사하여 테마 편집기의 Custom Liquid 블록에 붙여넣기만 하면 됩니다.

Jform의 버튼 위젯은 Shopify의 기본 블록에는 없는 스타일링 옵션을 제공합니다. 배경, 텍스트 및 호버 색상을 개별적으로 설정하고, 레이블 앞이나 뒤에 아이콘을 추가할 수 있으며, 모서리 반경, 높이, 여백 및 그림자 효과를 세밀하게 조정할 수 있습니다.

Jform의 버튼 위젯을 사용하여 Shopify에서 버튼을 추가하는 방법은 다음과 같습니다.

1. Jform 워크스페이스 페이지에서 **Create(만들기)**를 클릭하고 **Website Widget(웹사이트 위젯)**을 선택한 다음 “Button(버튼)”을 검색하고 **Use Widget(위젯 사용)**을 클릭합니다.

2. **General(일반)** 탭에서 버튼 작업을 선택하고 요청된 정보(이메일, 전화번호, URL 링크 등)를 입력한 다음 버튼 레이블을 작성합니다. 제안에 컨텍스트가 필요한 경우 두 번째 줄이나 주변 텍스트를 추가하세요.

3. **Styles(스타일)** 탭에서 색상을 설정하고, 아이콘을 켠 다음 위치를 선택하고 모양과 크기를 조정합니다. **Layout(레이아웃)** 탭은 버튼이 인라인인지 플로팅인지, 데스크톱, 모바일 또는 둘 다에 표시되는지 제어합니다.

4. 상단 내비게이션 바에서 **Publish(게시)**를 클릭한 다음 왼쪽 메뉴의 **Embed(임베드)** 섹션에서 **Copy Code(코드 복사)**를 클릭합니다.

또한 **Platforms(플랫폼)**을 클릭하고 Shopify를 선택하면 플랫폼별 임베드 지침을 확인할 수 있습니다.

5. **Shopify**에 맞춤형 버튼을 임베드하려면 테마 편집기를 열고 페이지 템플릿을 선택한 다음 **Add section(섹션 추가)** 또는 **Add block(블록 추가)**을 클릭하고 **Custom Liquid**를 선택한 다음 임베드 코드를 붙여넣고 오른쪽 상단 모서리에 있는 **Save(저장)**를 클릭합니다. 

이 옵션을 사용하면 웹사이트 테마에서 직접 버튼 스타일을 지정하는 대신 Jform에서 스타일을 지정하기 때문에 변경 사항이 글로벌 테마 설정과 분리되어 유지됩니다. 다른 색상이나 레이블을 테스트할 때 테마 코드를 다시 편집하는 대신 위젯을 편집하면 됩니다. 전체 설정 방법에 대해서는 웹사이트에 버튼을 추가하는 방법을 참조하세요.

스마트한 서버리스 위젯으로 Shopify 스토어 기능 강화하기

버튼은 개발자를 고용하거나 매월 앱 비용을 지불하지 않고도 사이트에 추가할 수 있는 여러 기능 중 하나입니다. Shopify의 콜투액션(CTA) 대안을 찾고 계신다면, Jform의 무료 웹사이트 위젯 디렉토리에서 150개 이상의 옵션을 제공하며, 여기에는 버튼과 마찬가지로 스토어프론트의 부족한 부분을 채워줄 수 있는 다양한 위젯이 포함되어 있습니다.

예를 들어, 공지사항 바 위젯(Announcement Bar widget)은 모든 페이지 상단에 무료 배송 기준이나 할인 행사 기간을 표시하여 쇼핑객이 결제하기 전에 이를 볼 수 있도록 합니다. 구매 버튼 위젯(Buy Button widget)은 구매 CTA와 함께 쇼핑객을 제품, 장바구니 또는 결제 URL로 직접 안내하므로 캠페인 랜딩 페이지나 구매 후 상향 판매(upsell)에 적합합니다. 또한 이커머스 카테고리에는 제품 카드 및 가격표가 있습니다. 스토어와 함께 고객 정보를 수집할 수 있는 Jotform-Shopify 연동 기능도 지원합니다. 

각 위젯은 버튼과 동일한 방식으로 임베드되므로, 간단한 기능을 추가할 때마다 다른 앱 구독료를 지불할 필요가 없습니다.

이커머스 브랜드로서 여러분의 시간과 예산은 하나의 버튼을 다르게 보이게 하기 위해 Custom Liquid를 작성하는 데 쓰이기보다는, 제품 소싱이나 광고 퍼널을 개선하는 데 투자되어야 합니다. Jform의 버튼 위젯을 사용하면 테마를 건드리지 않고도 단 1분 만에 다시 스타일을 지정할 수 있는 CTA를 제공합니다. 오늘 무료로 시도해 보세요.