Shopify 언어 전환기: 추가 및 사용자 지정 방법

Shopify 언어 전환기는 다국어 스토어에 유용한 기본 기능입니다. 이 기능을 통해 고객은 선호하는 언어로 사이트를 볼 수 있어, 브랜드가 새로운 국제 시장에 진출할 수 있습니다. 코드를 사용하여 기능을 맞춤 설정할 수도 있어 브랜드의 미적 감각에 더 부합하도록 할 수 있습니다.

하지만 이 기본 기능에는 타사 솔루션에 비해 사용자 정의 기능이 제한적이라는 점 등 몇 가지 단점이 있습니다.

전용 Shopify 번역 앱을 통합하면 스토어 운영자는 기능성 향상, 사용자 참여도 증대, 실제 번역 작업 처리 등 추가 기능을 활용할 수 있습니다. 예를 들어, 저희 Shopify 번역 앱 Weglot 언어 전환기에 독특한 디자인과 배치 옵션을 제공하여 어떤 스토어 레이아웃에도 적용 가능합니다. 게다가 단순히 언어 전환을 허용하는 것 이상의 다양한 기능을 제공합니다. 이에 대해서는 나중에 자세히 설명하겠습니다.

이 글에서는 Shopify의 기본 언어 전환기를 최대한 활용하는 방법을 소개한 후, Shopify에서 Weglot 활용하는 방법을 살펴보고, 스토어 번역을 위한 모범 사례와 최적의 사용자 경험을 제공하는 방법을 상세히 설명합니다.

핵심 포인트

• Shopify의 기본 언어 전환 기능은 여러 언어를 지원하지만, 타사 앱에 비해 사용자 정의 기능이 제한적입니다.
• Weglot 자동 웹사이트 번역과 언어 전환기에 대한 광범위한 맞춤 설정 옵션을 Weglot . 또한 완전한 수동 편집을 허용하며, 언어별 URL 생성 및 hreflang 태그 구현을 통해 다국어 SEO를 강화합니다.

Shopify 언어 전환기: 개요 및 설정

먼저, Shopify의 내장 언어 전환기를 살펴보겠습니다. 앞서 언급했듯이, 이 기능은 스토어 운영자가 여러 언어를 지원할 수 있게 하여 자연스럽게 해외 고객의 사용자 경험(UX)을 향상시킵니다.

수동 언어 선택과 방문자의 브라우저 기본 설정에 따른 자동 언어 리디렉션이 모두 지원됩니다. 관련 언어를 게시하고 대상 시장에서 사용할 수 있도록 설정해 둔 경우, ‘온라인 스토어 > 기본 설정 > 자동 리디렉션 > 언어’에서 방문자의 브라우저 기본 설정에 따른 자동 언어 리디렉션을 활성화할 수 있습니다.

기본 제공 스위처로 필요한 기능을 모두 충족할 수 있다면, 설정 방법은 다음과 같습니다.

언어 및 번역 방법 설정

언어 선택기가 표시되기 전에, Shopify 스토어에서 실제로 두 가지 이상의 언어를 제공해야 합니다. 이미 번역 설정을 완료했다면 다음 섹션으로 바로 넘어가셔도 됩니다. 그렇지 않다면, 시작하는 방법은 다음과 같습니다…

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

Shopify의 기본 제공 ‘Translate & Adapt’ 앱은 다국어 스토어를 구축하기 위한 한 가지 방법입니다. 이 앱은 언어를 추가한 후 ‘설정 > 앱’ 섹션에서 바로 핵심 콘텐츠를 2개 언어로 무료로 자동 번역해 줍니다(스토어가 영국, 스위스 또는 10개 EU 국가 중 한 곳에 위치한 경우 8개 언어로 번역됩니다).

대량 관리를 위해 ‘설정 > 언어 > 내보내기’에서 사이트의 언어 데이터를 CSV 파일로 내보내세요. 번역을 일괄 편집한 후 다시 가져오면 됩니다. 이때 중요한 점은 {{ }} 또는 {% %} 중괄호 안의 Liquid 코드를 절대 수정하지 말아야 한다는 것입니다. 이는 일반 텍스트가 아닌 Shopify의 테마 엔진입니다.

완전한 수동 제어를 선호하신다면, Shopify를 통해 최대 20개 언어(Shopify Plus의 경우 30개)를 관리할 수 있습니다. ‘설정 > 언어 > 작업 > 번역 의뢰’로 이동하여 Shopify 대시보드에서 직접 전문 번역 서비스를 의뢰할 수 있습니다.

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

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

Shopify의 기본 제공 언어 전환 기능은 보통 테마 편집기의 ‘헤더’ 또는 ‘푸터’ 섹션에서 찾을 수 있습니다. 정확한 위치와 사용자 지정 옵션은 사용 중인 테마와 버전에 따라 다릅니다.

다음 단계를 시도해 보세요:

1. Shopify 관리자 화면에서 ‘온라인 스토어’ > ‘테마’ > ‘테마 편집’으로 이동합니다.
2. 스위처를 표시할 위치에 따라 머리글 또는 바닥글 섹션을 엽니다.
3. “언어 선택기 활성화”, “언어 선택기 표시” 또는 “현지화”와 같은 설정을 찾아보세요.
4. 선택기를 활성화한 다음 ‘저장’을 클릭하세요.

고객이 속한 시장에서 스토어에 게시된 언어가 여러 개 있는 경우, 언어 선택기 화면에 사용 가능한 언어 옵션이 표시되어야 합니다.

Dawn, Craft, Refresh, Sense, Studio 등을 포함한 Shopify의 무료 테마는 현재 버전에서 헤더와 푸터 모두에서 언어 선택 기능을 지원합니다. 버전 9.0.0부터의 무료 온라인 스토어 2.0 테마와 Horizon 계열 테마는 별도의 코드 없이 헤더에 언어 선택 기능을 배치할 수 있습니다.

프리미엄 테마의 경우 배치 옵션이 다양합니다. 예를 들어, Impulse 테마는 헤더 툴바와 푸터에서 언어 선택 기능을 지원하지만, 다른 테마는 다른 설정이나 위치를 제공할 수 있습니다. 해당 옵션을 찾을 수 없다면 테마 개발자의 설명서를 확인해 보세요.

구형 테마는 사용자 지정 옵션이 적을 수 있습니다. 사용 중인 테마가 원하는 배치 방식을 지원하지 않는 경우, 해당 테마의 Liquid 템플릿을 수정하거나, 최신 테마로 변경하거나, 자체 배치 제어 기능을 갖춘 번역 앱을 사용해야 할 수도 있습니다.

언어 선택기의 모양은 사용 중인 테마에 따라 달라집니다. 기본 제공 선택기는 일반적으로 언어 이름을 표시하며, 스토어의 글꼴, 색상 및 스타일을 따릅니다. 일부 테마에서는 추가적인 디자인 설정을 제공하지만, 더 광범위한 사용자 지정을 하려면 CSS를 사용해야 할 수도 있습니다.

또한, Shopify의 테마 미리보기를 통해 모바일 레이아웃을 확인해 보세요. 테마에 따라 전환 버튼이 푸터, 헤더 또는 모바일 탐색 메뉴에 표시될 수 있습니다. 고객이 작은 화면에서도 이 버튼을 쉽게 찾아 사용할 수 있도록 하고, 국가/지역 선택기를 함께 표시하는 경우 이 선택기를 전환 버튼 근처에 배치하세요.

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

테마의 기본 설정 기능을 통해 Shopify 헤더에 언어 선택기를 추가하거나, Weglot 의 ‘스위처 편집기’를 사용하여 테마 코드를 수정하지 않고도 사용자 정의가 가능한 스위처를 배치할 수 있습니다.

앞서 설명한 대로 Shopify의 기본 언어 선택기를 추가하려면, Shopify 관리자 > 온라인 스토어 > 테마 > 테마 편집으로 이동한 후, 헤더 섹션을 열고 ‘언어 선택기 활성화’ 또는 이와 유사한 설정을 찾아 선택기를 활성화한 다음 ‘저장’을 클릭하세요.

Weglot 를 사용 중이라면, Weglot 대시보드 > 설정 > 언어 전환기 > 전환기 편집기를 열어주세요. 전환기를 원하는 헤더 위치로 드래그한 다음 ‘저장’을 클릭하세요. 고객이 사이트를 탐색할 때 전환기가 제자리에 유지되도록, 스토어 페이지 전반에 걸쳐 일관되게 표시되는 영역을 선택하세요.

보다 정확한 위치 지정을 위해 Weglot 에서는 다음과 같은 HTML 플레이스홀더도 지원합니다:

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

테마의 헤더 영역에서 지원되는 경우, ‘Custom Liquid’ 섹션이나 블록에 추가하거나, 해당 테마 파일에 삽입할 수 있습니다. 그러면 Weglot 에서 자리 표시자가 나타나는 위치에 스위처가 표시됩니다. 정확한 위치는 테마의 레이아웃에 따라 달라집니다.

설정이 완료된 후에는 제품 및 컬렉션 페이지를 포함하여 데스크톱과 모바일에서 항상 언어 전환 기능을 테스트하십시오. 또한, Shopify는 결제 과정을 스토어 헤더와 별도로 관리하므로, 헤더에 언어 전환 기능을 추가한다고 해서 결제 과정에도 자동으로 추가되지는 않습니다. 따라서 결제 과정에서도 언어 전환 기능을 테스트해야 합니다. Weglot 의 Shopify Markets 연동 기능을 사용하는 경우, Shopify는 고객이 이전에 선택한 언어를 기준으로 결제 언어 설정을 처리하며, Weglot 의 언어 전환 기능 자체는 결제 과정에서 표시되지 않습니다.

Liquid 코드를 사용하여 스위처 추가하기

Shopify 테마에서 필요한 언어 선택기의 배치나 디자인 옵션을 제공하지 않는 경우, Liquid를 사용하여 사용자 지정 선택기를 만들 수 있습니다. 이 작업에는 테마 코드 편집이 필요하므로, 진행하기 전에 백업을 만들어 두세요.

Shopify 언어 전환기를 설정하고 맞춤 설정하려면 다음 단계를 따르세요:

1. Shopify 관리자 페이지에서 ‘설정 ’ > ‘언어’로 이동하여 지원하고자 하는 언어를 추가하세요. 해당 언어가 대상 시장에서 사용 가능한지, 그리고 필요한 번역이 모두 추가되었는지 확인하세요.
2. ‘온라인 스토어 ’ > ‘테마 ’로 이동한 후, 해당 테마의 점 세 개 메뉴에서 ‘코드 편집 ’을 클릭하세요.
3. Sections 디렉터리에서 header.liquid 파일을 찾으세요. 정확한 파일명과 삽입 위치는 사용 중인 테마에 따라 다르므로, 변경하기 전에 테마의 구조를 확인하세요.
4. header.liquid 파일에서 적절한 위치(일반적으로 네비게이션 메뉴 근처)를 찾아 다음 Liquid 코드 snippet 붙여넣으세요:

{% if localization.available_languages.size > 1 %}
  <div class="page-width custom-language-topbar">
    {% form 'localization', id: 'header-language-form' %}
      <div class="shopify-language-switcher">
        <label for="header-language-selector">Language</label>

        <select
          id="header-language-selector"
          name="language_code"
        >
          {% for language in localization.available_languages %}
            <option
              value="{{ language.iso_code }}"
              {% if language.iso_code == localization.language.iso_code %}selected{% endif %}
            >
              {{ language.endonym_name | escape }}
            </option>
          {% endfor %}
        </select>

        <button type="submit">Apply</button>
      </div>
    {% endform %}
  </div>
{% endif %}

Liquid 코드의 위치에 따라 스토어 프론트에 언어 선택기가 표시되는 위치가 결정됩니다. 예를 들어, 헤더의 탐색 영역 안에 배치하면 메뉴 옆에 표시될 수 있는 반면, 탐색 영역 위의 별도 컨테이너에 배치하면 전용 언어 선택 바가 생성될 수 있습니다.

이 코드는 Shopify의 현지화 양식을 사용하여 고객이 선택할 수 있는 언어를 가져옵니다. 각 언어를 해당 언어의 원어 명칭(예: 프랑스어의 경우 ‘Français’ )으로 표시하며, 현재 언어를 선택된 상태로 표시합니다. 고객은 드롭다운 메뉴에서 언어를 선택한 후 ‘적용’을 클릭하여 언어를 변경할 수 있습니다.

테마에 이미 같은 위치에 언어 선택기가 표시되어 있다면, 중복을 방지하기 위해 테마 편집기를 통해 기존 선택기를 비활성화하세요.

5. CSS를 사용하여 스위처의 정렬, 색상, 간격 및 테두리를 제어할 수 있습니다. 테마 편집기에서 ‘테마 설정’ > ‘사용자 정의 CSS’를 열고 다음 예제를 추가하세요:

.custom-language-topbar {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
  padding-bottom: 8px;
}

.custom-language-topbar .shopify-language-switcher {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.shopify-language-switcher select {
  font: inherit;
  font-size: 16px;
  color: #007bff;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 8px;
}

.shopify-language-switcher select:hover {
  border-color: #555;
}

.shopify-language-switcher select:focus-visible {
  outline: 2px solid #0056b3;
  outline-offset: 2px;
}

6. 수정을 마친 후 ‘저장’을 클릭하여 변경 사항을 적용하세요. 이제 설정에 따라 스토어에 언어 선택기가 표시될 것입니다. 데스크톱과 모바일에서 스토어 화면을 미리 확인해 보세요.

Weglot 언어 전환기로 Shopify 스토어 강화하기

Weglot 는 테마를 수정할 필요 없이 Shopify 스토어에 언어 선택기를 추가해 주는 AI 기반 웹사이트 번역 도구입니다. Shopify의 기본 언어 선택기도 제 기능을 하지만, Weglot 와 같은 전용 Shopify 번역 앱은 더 폭넓은 맞춤 설정은 물론, 해외 고객을 위해 스토어 경험을 진정으로 현지화하고자 하는 분들을 위한 추가적인 Shopify 번역 기능도 제공합니다.

Shopify 언어 전환기와 달리 Weglot 결제 페이지, 이메일 알림, SEO 메타데이터를 포함해 110개 이상의 언어 중에서 선택한 사이트 콘텐츠를 100% Weglot 번역하며, 검색 엔진 최적화(SEO) 를 위해 이를 최적화합니다.

Weglot 사용하면 전체 Shopify 스토어가 자동 번역의 이점을 활용하여 확장 프로젝트를 가속화할 수 있습니다. 각 언어에 대해 개별 번역사를 고용하는 것과 비교하여 Weglot자동화를 통해 새로운 언어 버전의 출시 시간을 크게 단축할 수 있습니다.

그러나 Weglot기능은 자동 번역에서 멈추지 않습니다. Weglot 사용하면 사이트의 번역된 콘텐츠를 완벽하게 편집할 수 있습니다. 플랫폼을 통해 전문 번역사를 직접 고용할 수도 있습니다.

Weglot 의 AI 번역 모델을 사용하면 브랜드 정체성에 부합하는 번역문을 즉시 생성할 수도 있습니다. 이 모델은 사용자의 지침, 용어집, 수동 번역 내역을 학습하여 문맥을 정확히 파악하고, 사용자의 어조와 스타일을 그대로 반영한 번역문을 즉시 제공합니다.

또한 Weglot Dawn 및 Prestige와 같은 테마에 대한 사용자 지정을 포함하여 Shopify의 기존 기능 및 인기 타사 앱과 통합됩니다. 따라서 필요에 따라 언어를 추가, 게시, 게시 취소 또는 삭제할 수 있으므로 여러 스토어를 관리하거나 수동으로 번역해야 하는 번거로움을 없앨 수 있습니다.

Weglot 단순한 번역을 넘어 앱 핵심에 다국어 SEO 혜택을 제공합니다. 플랫폼은 각 언어 버전에 대해 자동으로 서브도메인 또는 서브디렉터리를 생성하고 hreflang 태그를 구현하여 현지 검색 엔진에 최적화된 사이트를 구축합니다. 또한 저희의 Visual Editor 을 통해 번역을 손쉽게 맞춤 설정할 수 있어 브랜드의 목소리에 맞춰 세밀하게 조정할 수 있습니다.

가장 좋은 점은 Weglot 언어 전환기 맞춤 설정이 단 몇 분 만에 가능하다는 것입니다! 함께 살펴보시죠.

Shopify 스토어에서 Weglot 설정하기

Shopify 스토어에서 Weglot 설정하는 것은 매우 간단합니다. 다음은 시작하는 데 도움이 되는 가이드입니다:

1. 먼저 Shopify 앱 스토어를 방문합니다:

• 검색창에 다음을 입력합니다. Weglot 을 입력하고 Weglot 앱을 찾습니다.
• 설치를 클릭하고 지시에 따라 스토어에 추가합니다.

2. 앱을 설치한 후 계정을 설정해야 합니다:

• Shopify 대시보드에서 Weglot 앱을 엽니다.
• 이메일 주소를 입력하고 비밀번호를 선택합니다.

3. 3. 언어 설정을 구성합니다:

• 그런 다음 원래 언어(Shopify 스토어의 언어)를 선택합니다.
• 그런 다음 콘텐츠를 번역할 대상 언어를 선택합니다.

언어를 선택하면 메타데이터와 타사 앱의 콘텐츠를 포함하여 스토어에 있는 모든 콘텐츠를 자동으로 스캔합니다. 자동 감지를 통해 번역할 콘텐츠를 수동으로 수집할 필요가 없으므로 Weglot 모든 작업을 대신 수행합니다!

그러면 귀하의 사이트는 최첨단 AI 번역 기술을 통해 즉시 번역되며, ‘ Weglot ’ 대시보드에서 선택한 구조에 따라 언어별 하위 디렉터리 또는 하위 도메인에 표시됩니다.

Weglot 언어 전환기 맞춤 설정: 디자인 및 배치 옵션

Weglot언어 전환기에는 광범위한 맞춤 설정 옵션이 제공되어, 스토어의 브랜딩에 맞게 조정하여 매우 전문적인 최종 결과를 얻을 수 있습니다. 맞춤 설정 방법은 다음과 같습니다:

1. 시각적 언어 전환기 편집기에 접근하기: Weglot 이동하여 설정 > 언어 전환기로 이동하세요.
2. 모양을 변경합니다: 드롭다운, 버튼, 플래그 등 다양한 형식 중에서 선택하여 언어 옵션을 표시할 수 있습니다. 예를 들어:
   • 빠른 인식을 위해 플래그를 사용하세요.
   • 더 눈에 잘 띄는 디스플레이를 위해 버튼을 선택하세요.

3. 위치 조정하기: 레이아웃에 가장 적합한 위치에 따라 머리글, 바닥글, 사이드바 등 주요 영역에 스위처를 배치할 수 있습니다.
4. 색상 및 스타일을 수정합니다: Weglot 설정에서 색상과 스타일을 스토어 브랜딩에 맞게 사용자 지정합니다.

중요한 점은 언어 전환기를 테마 수정 없이도 쉽게 재배치할 수 있어, 스토어의 다양한 페이지에서 접근성과 사용자 편의성을 유지할 수 있다는 것입니다. 고급 배치 방법은 아래 'Shopify 스토어 현지화 시 흔히 발생하는 문제 해결' 섹션을 참조하십시오.

고급 사용자 지정: 개발자를 위한 코딩 팁

Weglot Shopify 스토어를 개선하려는 개발자에게 사용자 지정은 맞춤형 다국어 환경을 만드는 데 핵심이 될 수 있습니다. Weglot유연성을 통해 개발자는 기술 전문가가 아닌 사용자도 쉽게 사용할 수 있는 맞춤형 다국어 환경을 만들 수 있습니다.

다음은 고려해야 할 몇 가지 코딩 팁입니다:

CSS를 활용한 언어 전환기 외관 미세 조정

개발자는 스토어의 브랜딩에 맞게 배경색, 글꼴 크기, 패딩 등의 스타일을 수정할 수 있습니다. 예를 들어

select {    
background-color: #f0f0f0;    
 border: 2px solid #007bff;    
 border-radius: 5px;    
 padding: 10px;
}

사용자 정의 기능을 위한 자바스크립트 구현

개발자는 JavaScript를 사용하여 페이지의 다른 요소를 업데이트하거나 분석을 위해 언어 변경 사항을 추적하는 등 언어가 선택되면 특정 작업을 트리거할 수 있습니다. 예를 들어 이벤트 리스너를 구현할 수 있습니다:

document.addEventListener('DOMContentLoaded', function() {
var languageSelector = document.querySelector('select[name="language_code"]');    
 if (languageSelector) {        
  languageSelector.addEventListener('change', function(event) {            
    // Custom functionality here            
     // For example, track language change event            
     console.log('Language changed to: ' + event.target.value);
   });    
 }
});

언어 간 원활한 페이지 전환을 위한 Weglot 구현하기

Weglot주요 기능 중 하나는 사이트의 프랑스어 버전에 대한 example.com/fr과 같은 언어별 URL을 자동으로 생성하는 기능입니다. 올바른 URL 구조는 검색 엔진이 각 언어 버전을 색인화할 수 있도록 하여 다국어 SEO 노력을 개선합니다.

Weglot 고객이 제품을 검색하거나 결제하는 등 쇼핑 경험 중에 언어를 쉽게 전환할 수 있도록 지원합니다. 고객이 영어 제품 페이지에서 해당 언어(예: 스페인어)로 전환할 때 쇼핑 여정에서 자신의 위치를 잃지 않고 원활하게 전환할 수 있습니다. 이러한 기능은 사이트 체류 시간 및 전환율과 같은 주요 지표에 영향을 미쳐 고객 만족도를 향상시키고 궁극적으로 글로벌 성장을 촉진할 수 있습니다.

예를 들어 Weglot 사용하여 12개 언어로 다국어 웹사이트를 제작한 Everyone.org는 전체 방문자가 40% 증가했으며 프랑스어 사용자의 전환율이 사이트 전체 평균 전환율의 거의 두 배에 달했습니다.

다국어 SEO 최적화 및 페이지 일관성 유지

다국어 SEO는 다양한 언어로 검색하는 사용자가 제품을 검색할 수 있도록 하여 온라인 트래픽을 유도합니다. 다국어 SEO의 기본적인 측면은 적절한 URL 구조를 갖는 것이며, 하위 디렉터리를 사용하면 검색 엔진이 다양한 언어 페이지를 식별하고 순위를 매기는 데 도움이 됩니다.

이 과정에서 Hreflang 태그는 페이지의 언어 및 지역 타겟팅에 대해 검색 엔진에 알려줌으로써 중요한 역할을 합니다. 이를 통해 사용자를 가장 관련성이 높은 버전의 사이트로 안내할 수 있습니다.

제목 태그와 설명을 포함한 번역된 메타데이터는 검색 가시성 향상에 더욱 기여합니다. Weglot 기술적인 SEO 작업의 상당 부분을 자동화하여 수동 개입 없이도 언어별 URL을 자동으로 생성하고 hreflang 태그를 구현합니다.

또한 Weglot Visual Editor 언어 용어집을 통해 스토어 운영자는 번역의 일관성을 유지할 수 있습니다.

다국어 SEO를 더욱 강화하기 위해 Shopify 스토어 소유자는 다음을 수행할 수 있습니다:

• 각 타겟 시장에 대해 현지화된 키워드 조사를 수행합니다.
• 메타데이터를 포함한 모든 콘텐츠가 정확하게 번역되었는지 확인하세요.
• 언어 트렌드의 변화를 반영하기 위해 번역을 정기적으로 검토합니다.

효과적인 다국어 SEO는 시장 기회를 확대할 수 있다는 점을 기억하세요! 다국어 최적화를 위해 ‘ Weglot ’를 도입한 후, Shopify 스토어 운영자인 론 도프(Ron Dorff)는 웹사이트 방문자 수가 무려 400%나 증가하는 놀라운 성과를 거두었습니다.

Shopify 스토어 현지화의 일반적인 문제 극복하기

Shopify 스토어를 현지화하려면 몇 가지 고유한 문제를 해결해야 하지만 Weglot 프로세스를 쉽게 진행할 수 있는 효과적인 솔루션을 제공합니다.

Shopify 사이트에서 Weglot 전환기의 위치를 변경하려면 다음 네 가지 방법 중 하나를 사용할 수 있습니다:

1. 스위처 에디터 기능

스위치어 에디터를 활용하여 언어 전환기를 웹사이트의 실시간 미리보기 화면에 직접 드래그 앤 드롭하세요. 이 방법은 사이트가 운영 중이어야 합니다.

2. 메뉴에 추가

메인 메뉴에 Weglot 연결하여 맞춤 언어 전환기를 생성하세요. Shopify 관리자 > 온라인 스토어 > 탐색으로 이동하여 각 언어별로Weglot 형식(예: 영어의 경우Weglot)으로 메뉴 항목을 추가하세요. 언어용 드롭다운 메뉴를 생성할 수도 있습니다.

3. Weglot 옵션

다음 코드 snippet 원하는 위치에 Theme.liquid snippet 삽입하세요:

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

이 코드는 커뮤니티 포럼에서 논의된 일반적인 배치 제한 사항을 해결하며, 코드를 배치하는 위치에 언어 전환기를 배치합니다.

4. 스위처 옵션

weglot.liquid에서 Weglot 초기화 코드를 수정하여 스위처를 수동으로 통합합니다. 스위처 옵션을 포함하고 스위처를 표시할 위치에 대한 대상 CSS 선택기를 지정합니다:

Weglot.initialize({  
api_key: "YOUR_API_KEY",  
 switchers: [{     
  location: { target: ".header-nav" }   
 }]
});

.header-nav를 원하는 요소의 CSS 선택기로 바꾸어야 합니다.

Weglot 사용하면 다음과 같은 현지화 이점도 얻을 수 있습니다:

• 동적 콘텐츠 번역: Weglot JavaScript로 생성된 콘텐츠와 AJAX로 로드된 요소를 효과적으로 번역하여 모든 동적 콘텐츠가 캡처되고 번역되도록 합니다.
• Shopify용 다국어 SEO: Weglot hreflang 태그 구현을 자동화하고 언어별 사이트 맵을 생성합니다. 이는 Shopify의 기본 제공 SEO 기능을 보완하여 검색 엔진이 사용자에게 올바른 언어 버전을 제공할 수 있도록 합니다.

• Shopify 고유 요소 번역: Weglot 는 결제 페이지, 이메일 알림, 메타 필드 등을 포함하여 스토어 전체의 번역을 처리하며, Shopify 문서에 명시된 제한 사항을 극복합니다.

• 번역 워크플로우 최적화: Weglot번역 메모리 및 용어집 기능을 사용하면 대규모 제품 카탈로그에서 일관성을 유지할 수 있습니다. 이를 통해 용어가 균일하게 번역되어 브랜드 메시지가 여러 언어에 걸쳐 일관성을 유지할 수 있습니다.

Weglot Shopify 기본 언어 전환기 비교

Shopify는 사용자에게 스토어를 여러 언어로 번역하는 데 필요한 기본 도구를 제공하지만 제한이 있습니다.

반면 Weglot 포괄적인 번역 솔루션을 제공하며 Shopify의 한계를 정면으로 극복합니다. 따라서 이 플랫폼은 다국어 콘텐츠 관리에 대한 손쉬운 접근 방식을 원하는 사용자에게 더 적합한 옵션입니다.

언어 장벽을 극복하세요: Shopify 스토어에 Weglot 구현하기

우리가 살펴본 바와 같이, Weglot Shopify 스토어에 독보적인 이점을 Weglot 온라인 언어 장벽을 극복하는 이상적인 솔루션입니다. Weglot언어 전환기를 통해 사용자 경험을 개선할 수 있는 추가 맞춤 설정을 얻을 수 있으며, Visual Editor 문맥에 맞는 번역이 Visual Editor 필요한 곳 어디에서나 콘텐츠를 세밀하게 조정할 수 있습니다. 더 높은 정확도를 위해 대시보드에서 직접 전문 번역을 주문할 수도 있습니다.

Weglot 스마트 검색 도구 및 이미지 갤러리를 비롯한 인기 있는 Shopify 앱과 통합되어 스토어가 여러 언어로 완벽하게 작동하도록 보장합니다. 또한 언어별 하위 도메인 또는 하위 디렉터리를 생성하여 SEO 노력을 크게 향상시킬 수 있습니다.

무엇보다도 Weglot 모든 콘텐츠 관리 시스템과 호환되므로 Shopify를 떠나더라도 Weglot 이점을 잃을 필요가 없습니다.

지금 바로 Weglot 에서 14일 무료 체험을 시작하고, 단 몇 분 만에 다국어 웹사이트를 만들어 보세요!

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

테마 업데이트, 앱 설치 또는 레이아웃 조정 후 언어 선택기가 사라지는 경우가 있습니다. 이러한 문제는 대개 테마 설정이나 언어 선택기의 배치 위치에서 비롯됩니다. 가장 흔한 네 가지 문제를 해결해 보겠습니다.

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

두 개의 스위처가 표시된다는 것은 대개 Shopify의 기본 스위처와 앱의 스위처(예: Weglot)가 동시에 활성화되어 있음을 의미합니다. 또한 Weglot 스위처가 두 개 이상 설정되어 있을 수도 있습니다.

먼저 Shopify 관리자 > 온라인 스토어 > 테마 > 테마 편집을 차례로 열어주세요. 헤더와 푸터에서 Shopify의 기본 언어 선택기가 있는지 확인하고, Weglot 를 사용하고 있다면 이를 비활성화한 뒤 변경 사항을 저장하세요. 정확한 설정 방법은 사용 중인 테마에 따라 다릅니다. 또한, 고객이 자신의 시장을 선택하는 데 필요한 경우 국가/지역 선택기는 활성화된 상태로 유지하세요.

두 스위처 모두 Weglot 에 속해 있다면, Weglot 대시보드 > 설정 > 언어 스위처 > 스위처 편집기를 열어보세요. 어떤 스위처가 구성되어 있는지, 그리고 동일한 화면 크기에서 표시되도록 설정되어 있는지 확인하세요. Weglot 는 데스크톱용과 모바일용 스위처를 별도로 지원하므로, 의도치 않게 두 스위처가 함께 표시되지 않도록 주의하세요.

Shopify 내비게이션에 언어 링크를 추가한 경우, 해당 링크가 Weglot 의 기본 언어 선택기 옆에 표시되는지 확인하세요. 두 가지가 모두 필요하지 않다면 중복되는 메뉴 항목을 제거하세요.

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

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

Shopify 테마를 업데이트한 후 언어 선택기가 사라졌다고 해서 번역 내용이 사라진 것은 아닙니다. 이 문제는 업데이트된 테마 내의 언어 선택기 설정이나 배치와 관련이 있을 수 있습니다.

설정에서 언어별 하위 디렉터리를 사용하는 경우, yourstore.com/fr/와 같이 스토어의 번역된 URL 중 하나를 테스트해 보세요. 페이지에 번역된 콘텐츠가 표시되지만 언어 선택기가 나타나지 않는다면, 문제는 번역 자체보다는 언어 선택기의 표시와 관련된 것일 수 있습니다.

Shopify의 기본 제공 언어 선택기를 사용 중이라면, ‘설정 > 언어’에서 추가 언어가 여전히 ‘게시됨’ 상태로 설정되어 있는지 다시 한 번 확인해 주세요. ‘게시됨’으로 표시되어 있지 않으면 어디에도 표시되지 않습니다.

Weglot 를 사용 중이라면:

1. ‘ Weglot ’ 기능이 활성화되어 있는지 확인하세요: ‘온라인 스토어’ > ‘테마’ > ‘테마 편집’ > ‘앱 임베드’로 이동하여 ‘ Weglot ’ 항목을 찾은 후, 비활성화되어 있다면 활성화하세요. ‘저장’을 클릭한 뒤 스토어 화면을 확인하세요.
2. 언어 전환기의 위치를 초기화하세요: 여전히 표시되지 않는 경우, Weglot 대시보드 > 설정 > 언어 전환기 > 전환기 편집기를 여세요. ‘위치’ 항목에서 ‘기본 위치로 초기화’를 선택하세요. 그러면 언어 전환기가 오른쪽 하단 모서리로 돌아갑니다.

3. 필요한 경우 새로운 위치를 선택하세요: 스위처가 다시 표시되면, 업데이트된 테마에서는 이전 위치가 더 이상 작동하지 않을 수 있습니다. 스위처 편집기를 사용하여 스토어 전체에서 일관되게 표시되는 요소 내의 새로운 위치로 스위처를 드래그한 다음, ‘저장’을 클릭하세요.

Weglot 의 스위처를 테마 코드에 수동으로 추가한 경우, 업데이트 후 사용자 지정 배치 설정이 유지되었는지 확인하세요. 예를 들어, 이전에 <div id="weglot_here"></div>, 해당 요소가 여전히 의도한 위치에 있는지 확인하십시오. 만약 제거된 경우, 배치 위치가 업데이트된 레이아웃과 호환되는지 확인한 후 이전 테마 버전에서 해당 요소를 복원하십시오.

또한, 데스크톱과 모바일 모두에서 스토어 프론트를 확인해 보세요. 스위처가 데스크톱에서는 작동하지만 모바일에서는 작동하지 않는다면, 화면 크기별 표시 설정이나 테마의 모바일 레이아웃이 원인일 수 있습니다. 이에 대해서는 다음에서 다루겠습니다.

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

Shopify 언어 선택기가 데스크톱에서는 표시되지만 모바일에서는 보이지 않는다면, 테마의 모바일 레이아웃에 의해 가려졌거나 화면이 더 큰 기기에서만 표시되도록 설정되었을 수 있습니다.

Shopify의 기본 제공 언어 선택기를 사용 중인 경우, ‘온라인 스토어’ > ‘테마’ > ‘테마 편집’을 열고 모바일 미리보기를 선택하세요. 사용 중인 테마에 따라 언어 선택기가 푸터, 헤더 또는 모바일 메뉴에 표시되는지 확인하세요. 표시되지 않는 경우, 해당 언어 선택기 설정이 활성화되어 있는지 확인하세요. 일부 테마의 경우, 원하는 모바일 위치에 언어 선택기를 표시하려면 추가적인 사용자 지정이 필요할 수 있습니다.

Weglot 를 사용 중이라면:

1. Weglot 대시보드 > 설정 > 언어 전환기 > 전환기 편집기를 엽니다.
2. 왼쪽 상단 모서리의 드롭다운 메뉴에서 사용 중인 스위처를 선택하세요. ‘동작’ > ‘특정 화면 크기에서 표시’ 항목에서 모바일 기기에서 표시되도록 설정되어 있는지 확인하세요.
3. 다른 모바일 레이아웃을 원한다면, 편집기 왼쪽 하단에 있는 모바일 보기를 선택한 다음, ‘+’ 버튼을 클릭하여 별도의 스위처를 생성하고, 이를 원하는 위치로 드래그하세요.
4. ‘저장’을 클릭한 다음, 데스크톱 및 모바일 전환기가 의도한 화면 크기에서 제대로 표시되는지 확인하세요.

모바일 헤더에 공간이 충분하지 않은 경우, 모바일 탐색 메뉴에 언어 링크를 추가할 수도 있습니다. 다음으로 이동하세요. Shopify 관리자 > 콘텐츠 > 메뉴, 모바일 내비게이션에서 사용하는 메뉴를 선택한 다음, Weglot 의 링크 형식을 사용하여 각 언어별로 메뉴 항목을 추가하세요. 예를 들어, #Weglot-en 영어의 경우 또는 #Weglot-fr 프랑스어용입니다. 테마에서 지원하는 경우, 이 링크들을 ‘언어’ 드롭다운 메뉴 아래에 그룹화할 수도 있습니다.

스위처가 여전히 보이지 않는다면, 작은 화면에서 사용자 정의 CSS로 인해 숨겨져 있는지, 아니면 데스크톱 전용 탐색 요소 안에 배치되어 있는지 확인해 보세요. 스위처를 눈에 잘 띄고 일관된 위치로 이동하면 문제가 해결될 수 있습니다.

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

Weglot 의 언어 선택기가 페이지를 새로 고친 후에야 표시된다면, 이 문제는 Shopify 테마가 콘텐츠를 불러오는 방식이나 언어 선택기의 배치 위치와 관련이 있을 수 있습니다.

다음 해결 방법을 시도해 보세요:

1. 위의 두 번째 문제에서 했던 것처럼 스위처의 위치를 초기화하세요. 이제 스위처가 일관되게 표시된다면, 이전 위치에 문제가 있었을 가능성이 있습니다. ‘ Weglot ’에서는 스토어의 모든 페이지에 공통으로 존재하는 요소 안에 스위처를 배치할 것을 권장합니다.
2. 테마의 페이지 전환 방식을 확인해 보세요. 일부 Shopify 테마는 페이지를 완전히 다시 불러오지 않고 애니메이션이나 AJAX 탐색을 통해 페이지 간을 이동하는데, 이는 ‘ Weglot ’ 기능과 충돌할 수 있습니다. 테마에 이러한 설정이 있다면, ‘온라인 스토어’ > ‘테마’ > ‘테마 편집’ > ‘테마 설정’으로 이동하여 ‘성능’ 또는 ‘애니메이션’ 항목을 찾아보세요. ‘Weglot ’에서는 해당 옵션이 있는 경우 ‘Ludicrous’ 대신 ‘Sport’를 선택하고 ‘페이지 간 애니메이션’을 비활성화할 것을 권장합니다.
3. 사용자 정의 스위처 코드를 모두 확인하세요. Weglot 의 위치를 수동으로 조정했다면, 스위처가 로드될 때 선택한 위치가 실제로 존재하는지 확인하세요. 나중에 표시되는 헤더나 내비게이션 요소의 경우 추가적인 통합 작업이 필요할 수 있습니다.

마지막으로, 비공개 브라우저 창에서 홈페이지부터 시작해 다양한 상품 및 컬렉션 페이지로 이동하며 스토어를 테스트해 보세요. 문제가 계속 발생하면 스토어 URL, 테마 이름, 그리고 문제를 재현하는 데 필요한 단계를 기재하여 Weglot 지원팀에 문의해 주세요.