쇼피파이 테마 언어 전환기: 맞춤 설정 및 문제 해결 방법

Shopify의 언어 전환기는 사용자에게 더 많은 제어권을 부여하는 훌륭한 시각적 트리거입니다. 테마 변경이나 업데이트 후 이 기능이 사라지거나, 잘못된 위치에 떠 있거나, 아예 표시되지 않는다면, 이 글을 발견한 것을 다행으로 여기실 겁니다!

우선 당황하지 마세요. 언어 전환기는 번역 데이터를 저장하지 않으므로, 사이트에서 해당 기능을 다시 표시되도록 설정하기만 하면 됩니다. 계속 읽어보시면 10분도 채 걸리지 않아 세 가지 주요 원인(테마 업데이트, 미출판 언어, 지연 로딩 문제) 중 무엇이 문제인지 정확히 파악하고 필요한 해결책을 적용할 수 있을 것입니다 .

핵심 요약

• Shopify 언어 전환기는 사이트의 번역 데이터나 SEO에 영향을 주지 않는 시각적 트리거일 뿐입니다.
• 대부분의 '사라지는 전환기' 문제는 테마 업데이트, 게시되지 않은 언어 또는 지연 로딩 헤더로 인해 발생합니다.
• 데스크톱에서 보기 좋게 보이는 것이 모바일에서는 숨겨지는 경우가 많으므로 항상 일반적인 중단점에서 테스트하세요.
• 시각적 트릭으로 충분하지 않다면 번역 품질 저하 없이 배치와 스타일에 대한 진정한 유연성을 제공하는 Weglot접근 방식을 사용하세요.

언어 및 번역 방법 설정

우선 가장 중요한 점부터 말씀드리자면, 언어 전환기가 표시되기 전에 Shopify 스토어에 실제로 두 가지 이상의 언어가 제공되어야 합니다. 이미 번역 설정을 완료하셨다면 다음 섹션으로 넘어가셔도 됩니다. 그렇지 않다면 시작하는 방법은 다음과 같습니다…

설정 > 언어 > 언어 추가로 이동합니다. 스페인어부터 일본어까지 20개 이상의 지원 옵션 중에서 선택할 수 있습니다. 각 언어 옆에 있는 게시를 클릭해야 고객에게 번역을 실시간으로 제공할 수 있습니다. 이 단계를 놓치면 새 스위처는 전환할 수 없습니다.

Shopify의 기본 제공 번역 및 적응 앱은 다국어 스토어를 위한 옵션 중 하나입니다. 언어를 추가한 후 설정 > 앱 섹션에서 바로 핵심 콘텐츠를 무료로 두 가지 언어로 자동 번역합니다.

대량 제어의 경우 설정 > 언어 > 내보내기에서 사이트의 언어 데이터를 CSV로 내보내세요. 번역을 대량으로 편집한 다음 다시 가져오기 - 중요한 것은 곱슬 {{ }} 또는 {% %} 괄호 안에 있는 Liquid 코드를 절대 건드리지 않는 것입니다. 이는 일반 텍스트가 아니라 Shopify의 테마 엔진입니다.

완전한 수동 제어를 선호하는 경우 Shopify에서는 스토어에서 최대 20개 언어를 관리할 수 있습니다. 설정 > 언어 > 작업 > 번역 주문에서 Shopify 대시보드에서 바로 전문 번역 서비스를 주문할 수 있습니다.

언어가 게시되고 번역이 적용되면 스위처를 사용할 준비가 된 것입니다.

테마에 내장된 스위처 찾기 및 구성하기

Shopify 테마 언어 전환기는 눈에 띄는 곳에 숨어 있습니다 – 하지만 어디를 봐야 하는지 알 때만 말이죠!

새벽, 제작 및 새로 고침 테마의 경우 전환기는 온라인 스토어 > 테마 > 사용자 정의 > 바닥글에 있습니다.

언어 선택기 사용 토글을 뒤집으면 사이트 하단에 해당 토글이 나타납니다. 이러한 테마에서는 스위처를 바닥글에 고정하므로 헤더에 배치하려면 추가 코드가 필요하며 페이지 상단에 배치할 수 있는 기본 제공 토글이 없습니다.(힌트: 아래의 Shopify 헤더에 언어 선택기를 추가하는 방법 섹션에서 이 작업을 수행하는 방법을 확인할 수 있습니다.)

Sense와 Studio는 똑같이 간단합니다. 테마 커스터마이저는 바닥글 설정에서만 전환기를 제공합니다. '언어 선택기' 또는 '현지화'를 찾아보세요. 여기에서 전환이 이루어집니다. 다시 말하지만, 사용자 정의 코드 조각을 추가하는 데 자신이 없다면 헤더 배치는 불가능합니다.

프레스티지, 임펄스, 모션 등의 프리미엄 테마는 테마 설정 > 헤더 또는 '언어 및 통화' 섹션에 헤더 배치가 포함되어 있는 경우가 많습니다. 일부 테마는 다른 테마보다 더 창의적인 옵션을 제공하므로 머리글과 바닥글 패널을 모두 스캔하여 편집 기능을 살펴보는 것이 좋습니다.

레거시 테마를 여전히 사용 중이라면, 이는 Shopify의 온라인 스토어 2.0 업그레이드 이전 버전입니다. 스위처를 추가하거나 이동하려면 일반적으로 footer.liquid 파일 내부의 코드를 수정해야 합니다. 언어 스위처는 하드코딩된 경우가 많아, 사용자 지정 위치를 설정하려면 HTML과 Liquid 마크업을 직접 편집해야 합니다.

시각적 조정은 테마에 따라 다릅니다. 대부분의 전환기는 플래그, 언어 이름 또는 둘 중 하나를 표시합니다. 글꼴과 색상은 수동으로 재정의하지 않는 한 사이트의 스타일을 따릅니다.

모바일 쇼핑객은 약간 다른 경험을 하게 됩니다. 대부분의 테마는 카트와 탐색 메뉴를 깔끔하게 유지하기 위해 768px 미만에서는 언어 전환기를 숨기며, 때로는 푸터나 확장 가능한 메뉴를 통해 보이도록 합니다.

Weglot 최선의 선택이 될 때

Shopify의 기본 제공 옵션이 비좁게 느껴지기 시작하는 경우, Weglot 은 필요한 모든 자유를 제공합니다!

"두 개 이상의 추가 언어를 목표로 하는 경우에는 스위처 스타일 지정 를 브랜드에 맞게 스타일링하고 싶거나, 자동 지리적 위치 전환을 원하거나, 머리글과 바닥글 모두에 언어 트리거가 필요한 경우 Weglot 사용하면 이 모든 것을 자유롭게 수행할 수 있습니다."

- 유진 에르눌트, Weglot CMO

설정은 빠릅니다. 앱을 설치하고 언어를 선택하면 Weglot스위처가 즉시 나타납니다. 초고속 접근성을 원한다면 Weglot 메뉴 핸들 트릭을 사용하세요. 원하는 네비게이션 링크에 Weglot 삽입하기만 하면, "에트 볼라"라고 말하는 시간보다 더 빠르게 원하는 위치에 클릭 가능한 언어 스위처를 생성할 수 있습니다.

Weglot 팀에 도입하면 시각적 커스터마이징이 쉬워집니다. 대시보드를 통해 복잡한 과정을 생략하고 실시간으로 스위처의 변경 사항을 미리 볼 수 있습니다. 배치, 스타일 또는 아이콘을 조정하면 바로 고객에게 표시됩니다.

또한 Weglot 100KB 미만의 비동기 스크립트로 로드되므로 핵심 웹 바이탈을 손상시키지 않습니다. 페이지스피드 인사이트를 통해 사이트를 실행하여 직접 확인하세요.

{{ai-banner}}

Shopify 헤더에 언어 선택기를 추가하려면 어떻게 해야 하나요?

테마 커스터마이저 > 헤더 > 블록 추가 > 사용자 정의 리퀴드로 이동합니다.

헤더에 Shopify의 기본 스위처를 사용하려면 테마의 footer.liquid 파일에서 현지화 양식 코드를 복사합니다. 이 양식은 일반적으로 현지화 태그로 시작하며 고객이 새 언어를 선택하면 URL의 로캘 매개 변수를 변경합니다.

이 코드를 고유한 클래스 이름으로 컨테이너에 감싸서 스타일을 지정하세요. 스위처가 고정 메뉴나 팝업 위에 위치하도록 하려면 z-index와 같은 CSS를 추가하세요: 10000. 이 작은 단계만으로도 눈에 잘 띄고 문제없이 사용할 수 있습니다.

Weglot 사용자의 경우 설정이 훨씬 더 쉽습니다. 이 코드를 드롭하세요:

<div id="weglot_here"></div>

를 사용자 정의 액체 블록에 추가하세요. Weglot 이 컨테이너를 즉시 감지하여 스위처에 깔끔하게 드롭합니다.

설정 후에는 항상 결제 흐름을 테스트하세요. 테마는 결제 시 별도의 헤더 파일이나 레이아웃을 사용하는 경우가 있으므로 해당 파일이 동일한 업데이트를 받지 않으면 스위처가 표시되지 않을 수 있습니다.

일반적인 문제와 빠른 해결 방법

테마 업데이트, 앱 설치 또는 레이아웃 조정 후 언어 전환기가 사라지는 경우가 있습니다. 대개는 시각적인 문제일 뿐 심각한 장애가 아니니 걱정하지 마세요. 가장 일반적인 네 가지 문제를 해결해 보겠습니다.

1. 언어 전환기가 두 개 있는 이유는 무엇인가요?

스위처가 두 개 표시되는 것은 일반적으로 Shopify의 기본 스위처와 앱의 버전(예: Weglot)이 동시에 활성화되어 있음을 의미합니다. 정리하려면 테마 사용자 지정 기능의 바닥글 섹션으로 이동하여 모국어 선택기를 비활성화합니다.

테마에서 지연 로드 헤더를 사용하는 경우 요소가 로드될 때 Weglot스위처가 나타나거나 사라질 수 있습니다. 헤더와 같은 요소가 동적으로 로드되는 테마의 경우 헤더가 있으면 스위처를 수동으로 초기화하는 것이 좋습니다. 이 작업은 Weglot 스크립트를 추가한 다음 호출하여 수행할 수 있습니다:

javascript
Weglot.initialize({
	api_key: 'YOUR_API_KEY',  
    // other options
});

이 작업은 헤더가 완전히 로드된 후(예: DOM 준비 이벤트를 통해 또는 짧은 지연 후) 수행됩니다. 이렇게 하면 스위처가 매번 올바른 위치에 팝업되도록 할 수 있습니다.

사용자 정의 스위처 배치 및 초기화에 대한 자세한 안내는 Weglot 언어 스위처 공식 문서를 참조하십시오.

{{quote-image-banner}}

2. 테마 업데이트 후 언어 전환기가 사라진 이유는 무엇인가요?

테마 업데이트 중에 스위처가 사라지는 경우가 있지만 번역에 문제가 있는 경우는 거의 없습니다.

먼저 설정 > 언어에서 추가 언어가 아직 게시되어 있는지 다시 확인하세요. 게시됨으로 표시되어 있지 않으면 어디에도 표시되지 않습니다.

그런 다음 온라인 스토어 > 테마 > 사용자 지정 > 바닥글을 열어 언어 선택기 사용 토글이 켜져 있는지 확인합니다. Dawn과 같은 일부 테마는 업데이트 후 이 설정을 꺼짐으로 재설정합니다.

셋째, 스토어 URL에 /fr/ 또는 /es/를 추가합니다. 번역된 페이지는 언어 데이터가 안전하며 디스플레이 문제만 해결하고 있다는 의미입니다.

마지막으로, 항상 여러 기기에서 사이트를 확인하세요. 모바일에서 스위처가 누락되는 것은 일반적으로 번역 결함이 아닌 CSS 표시 충돌입니다.

3. 모바일에서 언어 전환기가 표시되지 않는 이유는 무엇인가요?

모바일에서 언어 전환기가 보이지 않는다면, 이는 의도된 설계일 가능성이 높습니다. 대부분의 Shopify 테마는 768px 이하 화면에서 추가 위젯을 숨겨 장바구니 및 메뉴 아이콘을 위한 공간을 확보하기 위해 CSS를 사용합니다. 애플의 휴먼 인터페이스 가이드라인은 작은 화면에서도 터치 조작이 가능하도록 44x44 픽셀의 터치 타깃을 요구합니다.

이 문제를 해결하려면 모바일 디바이스의 경우 스위처를 오른쪽 하단에 고정하는 미디어 쿼리를 CSS에 추가하고 z-인덱스 값을 높게 설정하여 스위처를 상단에 고정하세요. 헤더 공간이 부족하다면 모바일 햄버거 메뉴 안에 스위처를 배치하세요.

4. 새로고침 후 스위처가 작동하지만 첫 페이지 로드 시에는 작동하지 않나요?

테마가 지연 로드된 헤더를 사용하는 경우 수동 새로 고침 후에만 Weglot스위처가 나타나는 경우가 있습니다. Dawn 15+ 및 유사한 테마에서 헤더는 메인 페이지가 로드된 후 자바스크립트에 의해 그려집니다. Weglot 가능한 한 빨리 스위처를 삽입하므로 헤더가 준비되지 않은 경우 스위처가 폴백 위치(주로 오른쪽 하단)에 표시되거나 1초 후에 깜박입니다.

Weglot 스크립트가 로드되기 전에(theme.liquid에서) WGNOTINITIALIZED 플래그를 설정하여 이 문제를 해결하세요. 그런 다음 헤더가 렌더링된 후 (setTimeout 또는 DOM 준비 이벤트를 사용하여) Weglot.initialize()를 수동으로 호출하세요.

또는 Weglot 대시보드에서 헤더 먼저, 바닥글 순서와 같이 폴백 위치를 설정할 수 있습니다. 이렇게 하면 헤더가 늦게 도착하더라도 스위처가 항상 어딘가에 표시됩니다!

완벽한 구현 Checklist

먼저 변경 작업을 시작하기 전에 온라인 스토어 > 테마 > 작업 > 복제를 사용하여 테마를 복제합니다. 이렇게 하면 테스트 및 수정을 위한 안전한 샌드박스가 제공됩니다.

다음으로, 설정 > 언어에서 모든 대상 언어가 '게시됨'으로 표시되는지 다시 한번 확인하세요. 언어 전환기가 보이는지 확인하세요 – 일부 테마는 헤더 토글을 요구하고, 일부는 푸터에 표시하므로 두 위치 모두 확인하세요.

스토어 주소에 /es/ 또는 /fr/을 추가하여 직접 URL 액세스를 시도해 보세요. 해당 페이지가 로드되면 번역이 준비된 것이며, 전환기 배치에만 주의하면 됩니다. 실제 디바이스를 사용하여 375px, 768px, 1920px 등 획기적인 크기로 스토어를 미리 보고 반응에 문제가 없는지 확인합니다.

Chrome 개발자 도구를 열어 스크립트 로딩 시간을 측정하세요. 전환이 느리면 쇼핑객에게 문제가 발생합니다. 결제 템플릿은 항상 모든 언어로 테스트 구매를 실행하세요. 마지막으로 테마 업데이트 전에 모든 설정을 문서화하세요. 이렇게 하면 갑작스러운 초기화에서 빠르게 복구할 수 있습니다.

Weglot 사용하면 클릭 한 번으로 언어를 즉시 변경할 수 있습니다. 14일 무료 체험판을 사용해보고 다국어 판매가 얼마나 쉬운지 확인해 보세요.