이 가이드는 Liquid 스니펫, CSS 및 JavaScript를 사용하여 Shopify 스토어에 무료 배송 진행률 표시줄을 구축하는 방법을 설명합니다. 이 기능은 무료 배송 임계값에 대한 진행 상황을 시각적으로 표시하여 고객에게 동기를 부여하는 것을 목표로 합니다. Liquid를 통해 초기 페이지 로드 시 표시줄이 올바르게 렌더링되도록 하고, 장바구니 항목이 추가, 변경 또는 제거될 때 실시간으로 업데이트되도록 합니다. 구현은 또한 화면 판독기에 대한 접근성을 우선시하고 동작 감소 환경 설정을 가진 사용자를 고려합니다.첫 번째 단계는 장바구니 총액과 정의된 임계값을 기준으로 남은 금액과 백분율을 계산하는 Liquid 스니펫 'free-shipping-bar.liquid'를 만드는 것입니다. 이 스니펫은 서버에서 표시줄의 초기 상태와 메시지를 렌더링하여 시각적 지연을 방지합니다. 그 후, 채우기 애니메이션에 대한 부드러운 전환을 포함하여 진행률 표시줄을 스타일링하기 위해 사용자 정의 CSS가 추가됩니다. JavaScript 파일 'free-shipping-bar.js'는 실시간 업데이트를 처리하기 위해 생성됩니다.이 JavaScript 코드는 '/cart.js'에서 현재 장바구니 총액을 가져와 그에 따라 표시줄과 메시지를 새로 고칩니다. 브라우저의 기본 'fetch' 함수를 래핑하여 이를 달성함으로써 장바구니 변경 요청 후 표시줄이 자동으로 업데이트되도록 합니다. 이 가이드는 'role="progressbar"' 및 'aria-valuenow' 속성이 화면 판독기에 진행 상황을 노출하는 방법과 'aria-live="polite"'가 변경 사항을 우아하게 알리는 방법을 설명하면서 접근성의 중요성을 강조합니다.또한 성능에 대해서도 언급하며, 동작 감소를 선호하는 사용자의 경우 채우기 애니메이션이 비활성화된다고 언급합니다. 이 가이드는 XHR을 사용하는 이전 테마와의 호환성, 여러 통화 처리, 통화 소수 자릿수에 대한 가정과 같은 몇 가지 제한 사항 및 고려 사항을 설명합니다. 무료 배송 규칙은 표시되는 목표와 일치하도록 Shopify의 배송 설정에서 별도로 구성해야 한다고 강조합니다.마지막으로, 고객이 달성 가능하다고 느낄 수 있는 관련 무료 배송 임계값을 선택하는 것이 좋습니다. 이 가이드는 표시줄이 항목 추가, 제거 및 임계값 초과를 포함한 다양한 시나리오에서 올바르게 작동하는지 확인하기 위해 개발 스토어에서 철저한 테스트를 수행할 것을 권장합니다. 사용자 정의 코드를 유지 관리하고 싶지 않은 사람들을 위해 Brix를 대안으로 제공하며, 다른 기능 중에서 다단계 보상 진행률 표시줄을 제공합니다.