Shopify에서 비포 애프터 슬라이더를 추가하는 방법

치아 미백 키트, 자동차 디테일링 서비스, 또는 라이트룸(Lightroom) 프리셋 세트를 판매하고 있다고 상상해 보세요. 잠재 고객이 구매를 결정하게 만드는 요인은 무엇일까요? 이와 같은 제품의 경우, 사람들은 단순한 약속 그 이상을 원합니다. 그들은 실제 결과를 보고 싶어 합니다.

비포 애프터 슬라이더를 사용하면 쇼핑객은 자신이 지불하는 비용으로 어떤 효과를 얻을 수 있는지 정확히 시각화할 수 있습니다. 핸들을 드래그하며 변화를 확인하는 것만으로도 제품의 가치는 자연스럽게 증명됩니다. 이는 치열한 시장에서 신뢰를 구축하고 제품을 돋보이게 하는 가장 빠른 방법 중 하나입니다.

만약 쇼피파이(Shopify)에서 판매하고 있다면 한 가지 문제가 있습니다. 기본 테마에는 비포 애프터 블록이 기본으로 포함되어 있지 않다는 점입니다. 이를 추가하려면 세 가지 옵션이 있습니다. 쇼피파이 앱 스토어에서 앱을 설치하거나, 무료 노코드 위젯을 임베드하거나, 테마 파일에 슬라이더를 직접 커스텀 코딩하는 것입니다. 이 가이드에서는 단순한 방문자를 실제 구매자로 전환할 수 있도록 이 세 가지 방법을 모두 살펴봅니다.

옵션 1: 쇼피파이 앱 스토어 확장 프로그램 설치하기

대부분의 판매자는 가장 먼저 쇼피파이 앱 스토어를 열고 “쇼피파이 비포 애프터 슬라이더”를 검색할 것입니다. 수많은 옵션이 제공되며, 대부분 네이티브 앱 블록 형태로 설치됩니다. 앱을 추가하고 나면, 슬라이더가 테마 편집기 내에 섹션이나 블록으로 바로 나타나 제품 페이지에 쉽게 배치할 수 있습니다. 이러한 편리함이 가장 큰 장점입니다.

하지만 여기에는 두 가지 단점이 따릅니다.

첫 번째는 상점 소유자들이 말하는 이른바 “앱 세금(app tax)”입니다. 거의 모든 전용 슬라이더 앱은 월간 구독 방식으로 운영되며, 단일 인터랙티브 기능에 대해 보통 월 1달러에서 10달러 사이의 비용이 듭니다. 슬라이더 하나, 카운트다운 타이머 하나씩 추가하다 보면 1년 후에는 예전 같으면 일회성 결제로 끝났을 기능들에 상당한 비용을 지불하게 됩니다. 

두 번째 단점은 속도입니다. 프런트엔드 시각화 앱은 종종 적용되는 모든 페이지에 자체적인 타사 JavaScript를 주입합니다. 몇 가지 앱만 설치해도 제품 페이지에 외부 스크립트가 대거 로드되어 페이지 속도가 저하될 수 있으며, 이는 전환율과 SEO에 직접적인 악영향을 미칩니다.

이러한 장단점을 따져본 후에도 여전히 네이티브 앱 방식을 원하신다면, 설정 방법은 다음과 같습니다.

1. 쇼피파이 계정에 로그인한 상태에서 쇼피파이 앱 스토어로 이동합니다. “쇼피파이 비포 애프터 슬라이더”를 검색합니다.

2. 앱을 선택하고 설치(Install)를 클릭하여 상점에 추가합니다.

3. 앱의 지침에 따라 설정을 진행합니다. 대부분의 앱은 사용하기 전에 결제 설정을 요구하므로, 테마에 추가하기 전에 이 작업을 완료해야 합니다.  

옵션 2: 무료 노코드 슬라이더 위젯 사용하기 (권장)

월간 구독료 없이 커스터마이징이 가능하고 반응형인 비교 슬라이더를 원한다면, 무료 임베드 위젯을 사용하는 것이 가장 좋습니다. Jform 비포 애프터 슬라이더는 바로 이러한 목적을 위해 제작되었습니다. 시각적으로 설정하고 임베드 코드 하나를 복사하여 쇼피파이 페이지에 붙여넣기만 하면 됩니다. 설치할 앱도 없고 반복적인 비용도 발생하지 않습니다.

이 위젯은 테마에 스크립트를 주입하는 대신 Jform의 서버에서 로드되므로 상점의 코드를 가볍게 유지하여 페이지 속도를 보호하는 데 도움이 됩니다. 가로 또는 세로 표시를 설정할 수 있고, 드래그, 클릭 또는 호버 상호작용을 선택할 수 있으며, 라벨과 캡션을 추가할 수 있을 뿐만 아니라 컴팩트한 캐러셀에 최대 3개의 비교 쌍을 쌓을 수도 있습니다.

추가하는 방법은 다음과 같습니다.

1. Jform 비포 애프터 슬라이더 페이지에서 비포 및 애프터 이미지를 추가하고 각 쌍에 대한 라벨과 캡션을 작성합니다. Jform은 URL을 통해 이미지를 가져오므로 사진이 아직 온라인에 없다면 먼저 쇼피파이의 설정(Settings) > 파일(Files)에 업로드하고 각 이미지의 URL을 복사하세요. Jform에 직접 이미지를 추가하고 싶다면 이미지 업로드 옵션을 선택할 수도 있습니다. 

2. 표시 방향, 구분선 위치, 색상 및 크기를 상점에 맞게 사용자 정의합니다. 

3. Jform이 생성하는 임베드 코드를 복사합니다. 게시(Publish) 탭에서 코드 복사(Copy Code) 버튼을 클릭하여 복사할 수 있습니다.

4. 쇼피파이 테마 편집기에서 슬라이더를 배치할 제품이나 페이지 템플릿을 열고 섹션 추가(Add section) (또는 블록 추가(Add block))를 클릭한 다음 사용자 지정 Liquid(Custom Liquid)를 선택합니다. 임베드 코드를 붙여넣고 저장(Save)을 클릭합니다.

옵션 3: 쇼피파이 테마 코드 편집하기

외부 앱을 사용하거나 임베드하는 것을 원치 않는다면, 테마에 직접 비교 슬라이더를 구축할 수 있습니다. 이는 가장 높은 제어력과 최소한의 오버헤드를 제공하는 방법이지만, 동시에 가장 오류가 발생하기 쉬운 옵션이기도 합니다.

구축은 세 부분으로 나뉩니다: 두 이미지를 담는 HTML, 이미지를 겹치고 자르는 CSS, 그리고 방문자가 드래그할 때 구분선을 이동시키는 JavaScript입니다. 템플릿 파일을 직접 편집하지 않으려면 이 모든 것을 단일 사용자 지정 Liquid(Custom Liquid) 블록에 넣는 것이 가장 간단합니다.

방법은 다음과 같습니다.

1. 두 개의 이미지 URL을 사용하여 마크업을 추가합니다. “비포” 이미지는 위에 배치되어 잘리고, “애프터” 이미지는 그 아래에 배치됩니다.

html<div class="ba-slider" id="baSlider">  <img src="BEFORE_IMAGE_URL" alt="Before" class="ba-img ba-before" id="baBefore">  <img src="AFTER_IMAGE_URL" alt="After" class="ba-img">  <div class="ba-handle" id="baHandle"></div></div>

2. CSS를 추가합니다. 절대 위치 지정(Absolute positioning)으로 이미지를 겹치고, clip-path를 사용해 처음에 “비포” 이미지의 절반을 표시하며, touch-action: none을 설정하여 모바일 기기에서 드래그할 때 페이지가 스크롤되지 않도록 방지합니다.

html<style>  .ba-slider { position: relative; width: 100%; max-width: 600px;    aspect-ratio: 3 / 2; overflow: hidden; touch-action: none; user-select: none; }  .ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }  .ba-before { clip-path: inset(0 50% 0 0); }  .ba-handle { position: absolute; top: 0; left: 50%; width: 2px; height: 100%;    background: #fff; transform: translateX(-50%); cursor: ew-resize; }  .ba-handle::after { content: ''; position: absolute; top: 50%; left: 50%;    width: 36px; height: 36px; border-radius: 50%; background: #fff;    transform: translate(-50%, -50%); box-shadow: 0 0 4px rgba(0,0,0,.4); }</style>

3. JavaScript를 추가하세요. 포인터 이벤트(Pointer events)는 하나의 경로로 마우스와 터치를 모두 지원하므로, 핸들이 커서 드래그나 엄지손가락 스와이프를 자연스럽게 따라가게 됩니다. 저장한 후 실제 스마트폰에서 테스트해 보세요.

html<script>  const s = document.getElementById('baSlider');  const before = document.getElementById('baBefore');  const handle = document.getElementById('baHandle');  let dragging = false;  function setPos(x) {    const r = s.getBoundingClientRect();    let pct = Math.max(0, Math.min(100, ((x - r.left) / r.width) * 100));    before.style.clipPath = `inset(0 ${100 - pct}% 0 0)`;    handle.style.left = pct + '%';  }  s.addEventListener('pointerdown', e => { dragging = true; setPos(e.clientX); });  window.addEventListener('pointermove', e => { if (dragging) setPos(e.clientX); });  window.addEventListener('pointerup', () => { dragging = false; });</script>

주의 사항: 이 옵션은 까다로울 수 있습니다. 잘못된 괄호 하나나 테마의 다른 부분에 영향을 미치는 스타일 하나가 모바일 레이아웃을 망치거나, 더 나아가 결제 과정에 지장을 줄 수도 있습니다. 터치 동작은 데스크톱 브라우저뿐만 아니라 실제 기기에서 테스트해야 하며, 발생하는 모든 버그와 향후 수정 사항은 전적으로 본인이 책임져야 합니다. 이러한 단점이 위젯을 사용하는 것보다 더 크게 느껴진다면, 옵션 2를 추천합니다.

스마트한 노코드 위젯으로 Shopify 스토어 개선하기

비포 앤 애프터 슬라이더는 추가할 가치가 있지만, 스토어에 필요한 유일한 대화형 요소인 경우는 드뭅니다. Shopify가 최고의 이커머스 웹사이트 빌더 중 하나로 자리 잡은 이유 중 하나는 확장이 매우 쉽기 때문이며, 적절한 애드온은 기능적인 스토어를 세련된 스토어로 바꿔줍니다. 함정은 각 애드온마다 별도의 월별 구독료를 지불해야 한다는 것입니다. 이러한 비용은 지키고자 하는 마진을 조용히 갉아먹기 때문입니다.

이것이 바로 무료 호스팅 위젯을 찾아야 하는 이유입니다. Jform 비포 앤 애프터 슬라이더와 같은 도구는 수익을 온전히 유지하고, 페이지 로딩 속도를 빠르게 하며, 쇼핑객의 참여를 유도합니다. 그리고 동일한 디렉토리에서 이미지 비교보다 훨씬 더 많은 기능을 제공합니다.

Shopify 스토어를 위해 살펴볼 만한 다른 Jform 위젯은 다음과 같습니다.

• 플래시 세일이나 신제품 출시에 긴장감을 더하는 카운트다운 타이머
• 페이지에서 바로 일반적인 제품 질문에 답할 수 있는 FAQ 위젯
• 연령 제한 제품을 위한 연령 인증
• 긴 제품 페이지를 더 쉽게 탐색할 수 있게 해주는 맨 위로 가기 버튼

전체 Jform 웹사이트 위젯 디렉토리를 둘러보고 스토어에 맞는 위젯을 찾아보세요. 또한, Jotform-Shopify 연동을 통해 양식과 데이터를 직접 연결할 수 있습니다. 첫 번째 노코드 위젯을 무료로 체험해 보고 몇 분 만에 설정을 완료하세요.