Shopify 웹사이트에 맞춤형 배너를 추가하는 방법

시선을 사로잡는 프로모션 배너는 온라인 스토어에서 가장 강력한 전환 유도 요소 중 하나입니다. 쇼핑객이 웹사이트를 열었을 때 가장 먼저 보게 되는 요소이므로, 명확한 클릭 유도 문안(CTA)은 장바구니 추가 비율과 전체 매출을 획기적으로 향상시킬 수 있습니다. 블랙 프라이데이 세일로 쇼핑객을 유도하든, 무료 배송 기준을 알리든, 할인 코드를 제공하는 대신 리드를 확보하든, 프로모션 배너는 이를 위한 최고의 도구 중 하나입니다.

하지만 왜 정적인 배너만 사용해야 할까요? 카운트다운 타이머는 긴장감을 조성할 수 있고, 리치 미디어는 배너에 더 큰 임팩트를 줄 수 있으며, 이메일 수집 양식은 즉시 리드를 생성할 수 있습니다. 안타깝게도 쇼피파이(Shopify)는 이러한 요소들을 쉽게 포함할 수 있도록 지원하지 않습니다. 쇼피파이의 OS 2.0 테마에는 기본 “공지 사항 바”와 “이미지 바” 섹션이 포함되어 있지만, 페이지 상단의 일반 텍스트와 두 개의 정적 이미지, 약간의 텍스트, 그리고 배너의 버튼 두 개로만 제한됩니다. 

모바일이나 데스크톱 기기에서 다르게 표시되거나 카운트다운 타이머 또는 비디오가 있는 리드 수집 양식이 포함된 프로모션 배너를 쇼피파이에 삽입하려면, 맞춤형 Liquid 및 JavaScript를 작성해야만 가능합니다. 쇼피파이의 AI 빌더인 쇼피파이 매직(Shopify Magic)은 쇼피파이에서 맞춤형 Liquid 배너를 생성할 수 있지만, 별도의 지원을 제공하지 않습니다. 또한 쇼피파이 매직이 생성한 코드를 이해하지 못하면 스토어의 속도와 접근성에 타격을 입을 수 있습니다. 

이로 인해 대부분의 판매자에게는 두 가지 옵션이 남습니다. 쇼피파이 앱 스토어에서 프리미엄 서드파티 앱을 설치하거나, 페이지 속도와 테마 아키텍처를 보호하는 무료의 가벼운 서버리스 위젯을 사용하는 것입니다. 

이제 쇼피파이 웹사이트에 배너를 추가하는 방법에 대해 알아보겠습니다.

옵션 1: 전용 쇼피파이 앱 스토어 연동 설치하기

서드파티 배너나 팝업 앱을 사용하여 스토어에 쇼피파이 공지 사항 바를 추가하는 것은 효과적이지만 단점도 있습니다. 이에 대해서는 나중에 자세히 설명하겠습니다. 

설정 방법은 다음과 같습니다. 

1. 쇼피파이 앱 스토어로 이동하여 배너 또는 팝업 앱을 검색합니다. 저는 Essential Announcement Bar를 선택했지만, 원하는 다른 앱을 선택해도 됩니다. 

2. 설치(Install)를 클릭합니다. 

3. 온보딩이나 설정 가이드를 따라 진행하면서 플러그인의 기본 사항을 파악합니다. 

4. 앱에서 배너 또는 팝업을 설정합니다. 텍스트, 디자인, 배치 및 기타 기능을 맞춤 설정할 수 있습니다. 완료되면 게시(Publish)를 클릭합니다.

이제 스토어에 공지 사항 바 또는 팝업이 나타납니다. 여기까지는 아주 좋습니다. 

하지만 쇼피파이 스토어에 앱을 설치할 때마다 스토어프런트에 자체 CSS 및 JavaScript가 추가됩니다. 이는 코어 웹 바이탈(Core Web Vitals)에 영향을 미치고, 사이트 속도를 늦추며, 결제 과정에서 지연을 유발하고, SEO 순위에 영향을 미칠 수 있습니다. 하나의 앱을 추가하는 것은 큰 문제가 되지 않지만, 수십 개의 앱을 추가하면 실질적인 영향을 미칠 수 있습니다. 앱을 설치하지 않고도 작업을 수행할 수 있다면, 꼭 필요한 앱을 설치할 수 있는 여유 공간을 더 많이 확보할 수 있습니다. 

또한, 쇼피파이의 서드파티 앱은 유료 구독이 필요할 수 있습니다. 무료 버전은 기능이 제한적이거나, 한 달에 처음 1,500번의 노출에만 작동하거나, 워터마크가 포함되어 있거나, 그 밖의 이유로 그다지 효과적이지 않을 가능성이 높습니다. 고급 기능을 원하거나, 휴일의 높은 트래픽을 감당할 수 있는 워터마크 없는 깔끔한 배너를 원한다면, 대개 월간 구독료를 지불해야 합니다. 

월간 구독료를 지불하지 않고도 배너가 필요한 기능을 수행하고 모든 고객에게 노출되도록 보장하고 싶다면 더 나은 옵션이 있습니다. 

옵션 2: 무료 인터랙티브 배너 위젯 추가하기(권장)

월간 구독료를 지불하거나 사이트 속도를 늦추거나 코어 웹 바이탈에 대해 걱정할 필요 없이 리치 미디어, 쿠폰, 양식 및 카운트다운이 포함된 동적이고 전환율이 높은 배너를 원한다면, 가장 현명한 선택은 Jform 배너 위젯과 같이 신뢰할 수 있는 호스팅된 임베드를 사용하는 것입니다. 모든 무거운 작업은 쇼피파이 스토어 외부에서 처리되므로, 서드파티 앱 설치 시 발생하는 단점 없이 완벽하게 반응하는 배너를 얻을 수 있습니다. 이것은 쇼피파이를 위한 최고의 무료 배너 위젯입니다. 

설정 방법은 다음과 같습니다.

1. Jform 배너 위젯으로 이동하여 Jform 계정에 로그인합니다. 계정이 없다면 무료로 가입할 수 있습니다.

2. 배너에 배지, 제목 및 설명을 추가합니다. 배너 전체를 클릭할 수 있게 만들고, CTA 버튼, 카운트다운 타이머, 쿠폰 및 이메일 수집 양식을 포함한 기능을 추가할 수 있습니다. 

3. **스타일(Style)** 탭을 사용하여 배너의 외관을 조정합니다. 사용자 지정 글꼴을 설정하고, 맞춤형 CSS를 사용하며, Jform 브랜딩을 끌 수 있습니다.

4. **레이아웃(Layout)** 탭을 사용하여 배너에 요소가 표시되는 방식을 제어합니다. 또한 데스크톱, 모바일 기기 또는 두 기기 모두에서 표시할지 여부를 설정할 수도 있습니다. 

5. **설정(Settings)** 탭을 클릭하여 배너의 제목을 지정할 수 있습니다. 또한 배너를 활성화하거나 비활성화할 수도 있는데, 이는 휴일 세일 배너를 미리 만들어 두고 싶을 때 유용합니다. 

6. **게시(Publish)**를 클릭한 다음, **코드 복사(Copy Code)**를 클릭하여 배너의 임베드 코드를 복사합니다. 

7. 쇼피파이로 돌아갑니다. 사이드바에서 **온라인 스토어(Online Store)**를 선택한 다음 **테마 편집(Edit Theme)**을 선택합니다. 

8. **섹션 추가(Add Section)**를 클릭한 다음 **맞춤형 Liquid(Custom Liquid)**를 클릭합니다. 

9. 맞춤형 Liquid 상자에 임베드 코드를 붙여넣습니다. 그런 다음 원하는 곳에 공지 사항 배너를 배치하고 외관을 구성할 수 있습니다. 

10. 설정이 완료되면 **저장(Save)**을 클릭합니다. 그러면 배너가 사이트에 적용됩니다. 

Jform 배너 위젯의 가장 큰 장점은 프리미엄 구독이나 코딩 지식 없이도 배너를 시각적으로 완벽하게 제어할 수 있다는 것입니다. 사용하기 쉬운 편집기를 통해 배너의 배경 이미지를 맞춤 설정하거나 YouTube 또는 Vimeo 비디오를 삽입할 수도 있습니다. 또한 비용 부담 없이 CTA 버튼, 카운트다운 타이머 또는 이메일 가입 양식을 추가할 수 있습니다.

쇼피파이용 맞춤형 배너를 설치하려면 쇼피파이에 임베드 코드를 복사하여 붙여넣기만 하면 됩니다. Jform은 오프서버에서 배너를 구축하므로, 쇼피파이의 글로벌 사이트 스타일과 충돌하거나 페이지 로드 속도에 영향을 미치지 않습니다. 캠페인을 원활하게 운영할 수 있는 강력한 배너를 얻게 됩니다. 

스마트한 서버리스 위젯으로 쇼피파이 스토어를 강화하세요

Jform 웹사이트 위젯 디렉터리에는 Jform 배너 위젯을 포함하여 훌륭하고 무료인 웹사이트 위젯이 가득합니다. Jform 위젯을 사용하면, 인스타그램 피드 위젯으로 제품 사용 모습을 보여주고, 사용 후기로 인기를 강조하며, 판매 알림으로 모든 판매를 집중 조명하고, 사이즈 표로 사람들이 알맞은 제품을 찾도록 도울 수 있습니다. 수많은 다른 무료 도구를 사용하여 스토어의 빠른 로딩 속도와 가벼움을 유지하면서 장바구니 추가 전환율을 극대화할 수 있습니다. 

쇼피파이 판매의 번거로움을 덜어줌으로써, Jform 웹사이트 위젯은 훌륭한 제품 소싱, 온라인 마케팅 실행, 성공적인 이커머스 스토어 구축에 시간과 예산을 집중할 수 있게 해줍니다. 제품 페이지의 단순한 배너 비용을 지불할 필요가 없습니다. 

쇼피파이로 더 많은 작업을 하고 싶다면, 완전한 Jform + 쇼피파이 통합을 확인해 보세요. 이를 사용하여 쇼피파이 스토어에 양식을 추가하고, 결제를 받는 등 훨씬 더 많은 작업을 수행할 수 있습니다.