온라인 스토어 테마 문제 해결하기

테마가 예상대로 표시되지 않아 요소가 사라지거나 적절하게 작동하지 않을 수 있으며 다른 여러 표시 문제가 발생할 수 있는 다양한 상황이 있습니다. 이는 타사 또는 앱 코드가 테마와 충돌하거나 사용자 지정 코드 맞춤 설정으로 인한 것일 수 있습니다. Shopify 관리자에서 조정되어야 하는 설정이 있을 수도 있습니다. 예를 들어 번역된 콘텐츠, 제품, 컬렉션, 탐색 또는 마켓을 검토해야 할 수 있습니다.

이 가이드의 단계를 검토한 후에도 테마에 문제가 있는 경우 테마 지원팀에 문의해야 할 수 있습니다. 테마에 대한 지원 받기에 대해 자세히 알아보세요.

문제 원인 찾기

테마에서 문제의 원인을 찾는 것은 문제를 해결하는 첫 번째 단계입니다. 문제의 원인을 찾는 데 도움이 되는 다음 단계를 시도해 보세요.

  1. Shopify 상태 페이지를 방문하여 상점에 영향을 줄 수 있는 알려진 문제에 대해 확인할 수 있습니다. 나열된 것과 유사한 문제가 없는 경우 해당 문제를 더 조사할 수 있습니다.
  2. 해당 문제는 귀하의 장치에 국한된 것일 수 있습니다. 로컬 문제는 일반적으로 장치 또는 브라우저 설정 또는 인터넷 연결 문제로 인한 것입니다. 다음 단계를 수행하여 문제가 국한되지 않도록 하고 다른 장치, 브라우저 또는 인터넷 연결에서 문제가 복제될 수 있는지 확인합니다.

    • 브라우저 캐시 및 쿠키를 지웁니다. Shopify 계정을 사용하여 Shopify 지원 센터에 로그인한 경우 브라우저 캐시 및 쿠키를 지우면 계정에서 로그아웃됩니다. 가상 지원 센터 비서를 사용하는 경우 브라우저 캐시 및 쿠키를 지우면 채팅 기록이 재설정되고 계정에서 로그아웃되며 가상 지원 센터 비서와 새 채팅을 시작해야 합니다.
    • 시크릿 모드, 다른 장치 또는 Shopify 앱을 사용해 보세요.
    • 모바일 데이터나 다른 인터넷 연결 사용을 시도해 봅니다.
    • 브라우저가 최신 상태인지 확인합니다.
    • 일부 앱이가 쿠키 없이 올바르게 표시되지 않을 수 있기 때문에 브라우저가 모든 쿠키를 차단하도록 설정되어 있지 않은지 확인합니다.
    • VPN(가상 사설망)을 사용하지 않고 있거나 Shopify를 차단하는 방화벽이 활성화되어 있는지 확인합니다.
  3. 다른 장치, 브라우저 또는 인터넷 연결에서 여전히 문제가 발생하는 경우 해당 문제는 로컬 문제가 아니므로 복제할 수 있습니다. 다른 테마에서 문제를 복제하는 것은 문제의 원인을 찾는 다음 단계입니다. Theme Store를 방문하고 새로운 버전의 테마를 설치하여 최신 버전의 테마에서도 문제가 계속 발생하는지 테스트하세요. 무료 Shopify 테마와 같은 다른 테마를 설치하는 것도 좋은 방법입니다. 문제가 해당 특정 테마로 인한 것인지 아니면 모든 테마에서 동일한 문제가 발생하는지 확인할 수 있기 때문입니다. 다른 테마를 테스트한 후 문제가 나타나는 방식에 따라 다음 단계를 수행하는 것이 좋습니다.

    • 현재 테마에만 문제가 나타나며 업데이트 및 사용자 지정되지 않은 버전의 테마일 경우 테마에 대한 지원을 받아야 할 수 있습니다.
    • 현재 테마에만 문제가 나타나는 경우 문제를 유발하는 테마 코드가 있을 수 있습니다. 최근에 테마 코드를 업데이트한 경우 이전 버전의 테마 코드로 되돌릴 수 있습니다. 테마에서 코드를 수정하지 않은 경우 테마 설정을 검토할 수 있습니다. 예를 들어 카트에 추가 버튼이 표시되지 않는 경우 테마 설정에서 버튼의 색상을 검토하여 버튼의 색상을 서로 다르고 대비되는 색상이 되도록 합니다.
    • 모든 테마에서 문제가 나타나는 경우 Shopify 관리자 설정, 앱 또는 기타 문제로 인한 것일 수 있습니다.
  4. 해당 문제가 앱의 문제일 수 있습니다. 최근 스토어에 영향을 주는 앱을 설치하거나 업데이트한 경우 앱을 일시적으로 제거해야 할 수 있습니다. 앱을 제거한 후 문제가 나타나지 않는 경우 앱 개발자의 지원팀에 문의하여 상점에 올바르게 표시될 수 있도록 더 많은 도움을 받을 수 있습니다. 앱에 대한 지원 요청에 대해 자세히 알아보세요. 앱을 제거한 후에도 문제가 계속 나타나는 경우엔 해당 앱은 문제의 원인이 아닌 것입니다.

이미지가 올바르게 표시되지 않음

이미지는 예상과 다르게 표시될 수 있지만 이미지 자체가 테마에서 이미지를 사용하는 것과 호환되지 않기 때문일 수 있습니다. 사용 중인 이미지에서 이미지 치수가 올바른지 확인하세요. 호환되지 않는 이미지를 업로드할 때 발생할 수 있는 일반적인 표시 문제의 다음 목록을 검토하세요.

  • 데스크톱에서 머리글이 넓게 표시되고 로고 이미지가 모바일에서 예상보다 작게 표시될 경우 로고 이미지 파일의 공백으로 인한 것일 수 있습니다. 이미지 파일을 편집하여 로고 주변을 잘라서 공백이 없도록 합니다.
  • 슬라이드 쇼 이미지가 잘린다면 모바일에서 이미지가 데스크톱과 동일하게 표시되도록 한 것입니다. 모바일 화면에 콘텐츠가 훨씬 작게 표시되기 때문에 콘텐츠를 축소하면 손실될 수 있는 세부 정보가 많습니다. 대신 콘텐츠가 잘리면 세부 정보가 손실되지 않습니다. 가로보다 세로가 더 큰 세로형 이미지는 데스크톱에서도 상당한 공간을 차지할 수 있습니다. 이것이 슬라이드 쇼 이미지의 높이가 최대인 이유입니다. 슬라이드 쇼 이미지에 초점을 추가하여 항상 초점이 슬라이드 쇼 이미지의 중앙에 있도록 할 수 있습니다. 초점을 추가해도 도움이 되지 않는 경우 모든 화면 크기에서 작동하는 이미지를 찾으려고 시도할 수 있습니다. 슬라이드 쇼 관련 모범 사례에 대해 자세히 알아보세요.
  • GIF 이미지가 올바르게 표시되지 않으며 해당 이미지가 제품 설명이나 블로그 게시물 등에서 서식 있는 텍스트 편집기로 상점에 추가되었다면 이미지 크기로 인한 것일 수 있습니다. 서식 있는 텍스트 편집기에서 GIF를 클릭하여 이를 수정한 다음 이미지 편집을 클릭합니다. 이미지 크기 드롭다운 메뉴에서 원본을 선택합니다. 이미지의 모서리를 클릭하고 안쪽으로 드래그하여 더 작게 만들거나 바깥쪽으로 드래그하여 더 크게 만들어서 GIF의 크기를 변경할 수 있습니다.
  • 이미지가 원래 이미지에서 상점에 중대한 색상 변경 사항이 있는 경우 이미지가 표준 RGB(sRGB) 색상에 없을 수 있습니다. 이 색상 변경을 수정하려면 사진 편집 애플리케이션에서 파일을 sRBG로 저장하세요. 이에 대한 일반적인 용어는 "웹 최적화", "웹에 맞게 이미지 조정" 또는 "웹용으로 저장"입니다. 색상 프로필에 대해 자세히 알아보세요.
  • 컬렉션 페이지에서 제품 이미지가 정렬되어 있지 않은 경우 제품 이미지 파일에서 가로 세로 비율이 폭 대 높이 비율과 동일하도록 조정한 다음 제품 이미지를 다시 업로드해야 할 수 있습니다. Shopify 앱스토어에서 이미지 편집 앱을 사용할 수도 있습니다.

제품 또는 컬렉션이 올바르게 표시되지 않음

상점에 제품이 누락된 경우 Shopify 관리자에 있는 제품의 게시 섹션에서 상태판매 채널을 검토해야 할 수 있습니다. 제품의 상태가 활성 상태이고 온라인 스토어에 제품을 사용할 수 있는지 확인합니다.

상점에 컬렉션이 누락된 경우 Shopify 관리자에 있는 제품의 게시 섹션에서 판매 채널을 검토해야 할 수 있습니다. 온라인 스토어에 컬렉션을 사용할 수 있는지 확인합니다. 컬렉션이 탐색에 추가되도록 할 수도 있습니다.

컬렉션이 표시되고 있지만 누락된 제품이 있는 경우 탐색 설정에서 컬렉션에 대한 태그 필터를 검토해야 할 수 있습니다. 태그로 컬렉션 필터링 필드에 제품이 표시되지 않을 수 있는 태그가 없는지 확인합니다.

제품 또는 컬렉션에서 통화가 올바르게 표시되지 않는 경우 설정 > 일반스토어 기본 설정 섹션에서 통화 표시를 검토하여 추가 코드가 없는지 확인합니다. 고객에게 통화가 표시되는 형식 지정에 대해 자세히 알아보세요.

일부 제품이나 컬렉션이 다른 제품과 다르게 표시되는 경우 Shopify 관리자의 제품이나 컬렉션에 할당된 테마 템플릿을 검토해야 할 수 있습니다.

번역된 콘텐츠가 올바르게 표시되지 않음

번역된 콘텐츠가 제대로 표시되지 않거나 상점에서 누락된 경우 콘텐츠에 오래된 번역이거나 해당 콘텐츠에서 번역이 누락된 것일 수 있습니다. 해당 콘텐츠는 마켓의 특정 템플릿에 있을 수 있습니다. 기본 언어로 새 콘텐츠를 추가할 때마다 자동 번역을 다시 실행하거나 새 번역을 수동으로 추가하는 것을 잊지 마세요.

번역된 콘텐츠에는 다음 상태가 적용될 수 있습니다.

  • 번역됨: 콘텐츠에 사용 가능한 번역이 있습니다.
  • 오래됨: 기본 언어의 콘텐츠가 업데이트되었지만 번역에는 업데이트가 반영되지 않습니다.
  • 번역되지 않음: 이 콘텐츠 유형에는 번역이 없습니다.

번역된 콘텐츠를 검토할 때 번역되지 않았거나 오래된 콘텐츠를 업데이트하면 번역된 콘텐츠가 올바르게 표시됩니다.

스토어 번역 및 현지화에 대해 자세히 알아보세요.

테마 편집기의 업데이트가 상점에 표시되지 않음

상점과 테마 편집기에서 같은 정보가 표시되지 않는 경우 편집 중인 테마 템플릿을 검토하세요. 올바른 정보를 표시하기 위해 테마 템플릿을 업데이트하려면 편집을 해야 할 수 있습니다. 스토어 컨텍스트화를 사용하면 여러 마켓에 다양한 상점을 생성하고 번역된 콘텐츠를 표시할 수 있습니다. 업데이트할 때 특정 마켓이나 B2B에서 부주의하게 작업하고 있었을 수 있습니다. 테마 편집기에서 컨텍스트 드롭다운 메뉴를 사용하여 콘텐츠를 찾아 올바른 마켓에 있는지 확인합니다.

스토어 컨텍스트화에 대해 자세히 알아보세요.

서식 있는 텍스트 편집기

서식 있는 텍스트 편집기에서 추가된 HTML 코드가 테마 코드와 충돌하는 경우도 있습니다. 제품 페이지, 페이지 또는 블로그 게시물과 같은 단일 페이지에 문제가 나타나는 경우 추가 HTML로 인한 것일 수 있습니다. 다른 사이트에서 텍스트를 복사하고 붙여넣다가 추가되는 경우도 있습니다.

HTML 코드 검토

서식 있는 텍스트 편집기에서 HTML 코드를 검토할 수 있습니다.

단계:

  1. 관리자의 페이지로 이동합니다.
  2. </> HTML 표시 버튼을 클릭하여 HTML 코드를 검토하세요.
  3. 표시 문제를 일으킬 수 있는 HTML 코드를 찾아 제거하세요.
  4. 저장을 클릭합니다.

서식 지우기

텍스트의 일부를 강조 표시하고 HTML 서식을 지울 수 있습니다.

단계:

  1. 관리자의 페이지로 이동합니다.
  2. 서식 문제가 있는 텍스트를 강조 표시합니다.
  3. 🚫 버튼을 클릭합니다.
  4. 저장을 클릭합니다.

서식 있는 텍스트 편집기에 대해 자세히 알아보십시오.

페이지가 지원되지 않는 URL에 리디렉션 되었습니다

상점에 연결되지 않은 Url로 사용자를 리디렉션하는 코드가 포함되어 있으면 해당 테마 편집기로 갈때 리디렉션이 비활성화되어 있는지 확인하세요.

예를 들어, 위치에 따라 고객을 다른 Shopify 스토어로 안내하기 위해 이 유형의 리디렉션을 상점에 추가할 수 있습니다. 설치한 테마나 앱에 이런 유형의 리디렉션 코드가 존재할 수 있습니다.

리디렉션이 편집기 환경을 방해하지 않도록 하려면 JavaScript에서 window.Shopify.designMode 변수에 대한 참조를 사용하여 테마 편집기를 방문할 때 리디렉션을 비활성화하세요. 이 변수는 상점이 편집기에 로드되면 true로 설정되며 로드되지 않으면 false로 설정됩니다.

코드 오류 메시지

테마 코드에 구문 오류가 있는 경우 테마 편집기에서 HTML error found 또는 Theme error 경고 메시지가 표시됩니다. 오류 메시지에는 오류가 포함된 Liquid 파일이 표시됩니다.

손상된 HTML이 있을 경우 The theme you're looking for couldn't be found 경고 메시지가 표시될 수 있습니다. 다음과 같이 여러 가지 이유로 인해 테마 편집기에서 페이지가 로드되지 않을 수 있습니다.

  • 네트워크 연결 문제
  • 테마의 Liquid 코드가 잘못 되었습니다.

테마 코드에서 코드 변경 사항을 찾은 다음 코드를 수정하거나 코드를 변경하기 전에 파일을 되돌릴 수 있습니다.

단계

  1. 오류 메시지에 .liquid 섹션 파일을 클릭하거나 최근 변경 사항에 대한 파일을 검토합니다. 이렇게 하면 HTML/CSS 편집 페이지로 이동하고 코드 편집기에서 파일이 열립니다.
  2. 파일의 코드를 살펴보고 유효하지 않은 HTML 또는 Liquid를 찾으세요. 코드 편집기에서 잠재적인 구문 오류가 빨간색으로 표시됩니다. 일반적인 문제는 다음을 포함합니다.

    • 추가 닫는 HTML 태그(예: 열지 않고 닫는 </div>) <div>
    • 추가 닫히지 않은 HTML 태그(예: 닫지 않고 여는 <div>) </div>
    • 잘못된 HTML 태그(예: 없는 <div class="my-class" >
    • 잘못된 Liquid 코드
    • 포함된 테마 코드 조각 파일에서 손상된 HTML
  3. 문제를 찾은 후 테마 파일에서 코드를 수정하거나 최근 변경에서 지난 버전을 선택하여 코드를 되돌립니다.

  4. 저장을 클릭합니다.

  5. 사용자 지정을 클릭하여 테마 편집기로 돌아가 오류 메시지가 사라졌는지 확인합니다.

  6. 상점으로 이동하여 예상대로 표시되는지 확인합니다.

적절한 답변을 찾을 수 없습니까? 언제든지 도와드리겠습니다.