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

이미지가 예상과 다르게 표시될 수 있지만, 이는 이미지 자체가 테마에서 이미지를 사용하는 용도와 호환되지 않기 때문일 수 있습니다. 사용 중인 이미지의 이미지 크기가 올바른지 확인하십시오. 호환되지 않는 이미지를 업로드할 때 발생할 수 있는 일반적인 표시 문제 목록은 다음과 같습니다.

• 머리글이 예상보다 크게 표시되고 로고 이미지가 예상보다 작게 표시되는 경우 로고 이미지 파일의 공백 때문일 수 있습니다. 로고 이미지 파일의 공백으로 인해 로고가 더 작게 표시되고 머리글이 더 크게 표시될 수 있습니다. 이미지 파일을 편집하여 로고 주위로 잘라내고 공백이 없는지 확인하십시오.
• 슬라이드 쇼 이미지가 잘리는 경우 이는 모바일과 데스크톱에서 이미지가 동일하게 표시되도록 하기 위한 디자인입니다. 모바일 화면에서는 콘텐츠가 훨씬 작게 표시되므로 콘텐츠를 축소하면 많은 세부 정보가 손실될 수 있습니다. 대신 세부 정보가 손실되지 않도록 콘텐츠가 잘립니다. 너비보다 높이가 더 긴 세로 이미지도 데스크톱에서 상당한 공간을 차지할 수 있습니다. 이것이 슬라이드 쇼 이미지에 최대 높이가 있는 이유입니다. 슬라이드 쇼 이미지에 초점을 추가 하여 초점이 항상 슬라이드 쇼 이미지의 중앙에 오도록 할 수 있습니다.

  높이 자동 조정 옵션: 많은 Shopify 테마에는 슬라이드 쇼 높이를 첫 번째 이미지 슬라이드에 맞게 조정하여 다양한 화면 크기에서 잘라내기를 줄이는 슬라이드 쇼 높이 자동 조정 설정이 포함되어 있습니다. 이 기능은 Shoify에서 개발한 현재 지원되는 모든 테마에서 사용할 수 있습니다.

• 제품 설명이나 블로그 게시물 등에서 서식 있는 텍스트 편집기를 사용하여 GIF 이미지를 스토어프론트에 추가했는데 올바르게 표시되지 않는 경우 이미지 크기 때문일 수 있습니다. 서식 있는 텍스트 편집기에서 GIF를 클릭한 다음 이미지 편집을 클릭하여 이 문제를 해결할 수 있습니다. 이미지 크기 드롭다운 메뉴에서 원본을 선택합니다. 그런 다음 이미지 모서리를 안쪽으로 클릭하여 드래그하면 GIF 크기를 줄일 수 있고, 바깥쪽으로 드래그하면 크기를 늘릴 수 있습니다.
• 스토어프론트의 이미지가 원본 이미지와 색상이 크게 다른 경우 이미지가 표준 Red Green Blue(sRBG) 색상이 아닐 수 있습니다. 이 색상 변경을 수정하려면 사진 편집 애플리케이션에서 파일을 sRBG로 저장하십시오. 이에 대한 일반적인 용어는 “웹 최적화”, “웹용 이미지 조정” 또는 “웹용으로 저장”입니다. 색상 프로필에 대해 자세히 알아보십시오.
• 컬렉션 페이지의 제품 이미지가 정렬되지 않는 경우 제품 이미지 파일의 가로 세로 비율을 조정하여 높이 대 너비 비율을 동일하게 맞춘 다음 제품 이미지를 다시 업로드해야 할 수 있습니다. 또는 Shopify App Store의 이미지 편집 앱을 사용할 수도 있습니다.

특정 문제에 대한 다음 문제와 문제 해결에 도움이 되는 단계를 검토하십시오.

• 제품 누락: 스토어프론트에서 제품이 누락된 경우 Shopify 관리자의 제품 게시 섹션에서 상태와 판매 채널을 검토해야 할 수 있습니다. 제품 상태가 활성이고 제품을 온라인 스토어에서 사용할 수 있는지 확인하십시오.
• 컬렉션 누락: 스토어프론트에서 컬렉션이 누락된 경우 Shopify 관리자의 컬렉션 게시 섹션에서 판매 채널을 검토해야 할 수 있습니다. 컬렉션을 온라인 스토어에서 사용할 수 있고 컬렉션이 메뉴에 추가되었는지 확인하십시오.
• 컬렉션은 표시되지만 제품이 누락됨: 컬렉션은 표시되지만 제품이 누락된 경우 메뉴 설정에서 컬렉션에 대한 태그 필터를 검토해야 할 수 있습니다. 태그로 컬렉션 필터링 필드에 제품이 표시되지 않도록 하는 태그가 없는지 확인하십시오.
• 통화가 올바르지 않음: 제품 또는 컬렉션에 통화가 올바르게 표시되지 않는 경우 설정 > 일반의 스토어 기본값 섹션에서 통화 표시를 검토하여 추가 코드가 없는지 확인하는 것이 좋습니다. 고객에게 통화가 표시되는 형식 지정에 대해 자세히 알아보십시오.
• 일부 제품이 다르게 표시됨: 일부 제품이나 컬렉션이 다른 제품이나 컬렉션과 다르게 표시되는 경우 Shopify 관리자에서 제품 또는 컬렉션에 할당된 테마 템플릿을 검토하십시오.
• 제품 또는 컬렉션 템플릿을 편집할 수 없음: 테마 편집기에서 기본 제품 또는 컬렉션 템플릿이 회색으로 표시되고 선택할 수 없는 경우 제품 또는 컬렉션을 1개 이상 온라인 스토어 판매 채널에서 사용 가능하도록 설정해야 합니다. 변경 사항을 미리 볼 수 있는 제품 또는 컬렉션이 없으면 이러한 기본 템플릿을 편집할 수 없습니다. 컬렉션의 사용 가능성 변경 및 판매 채널의 제품 사용 가능성 설정에 대해 자세히 알아보십시오.

번역된 콘텐츠가 올바르게 표시되지 않거나 스토어프론트에서 누락된 경우 콘텐츠에 대한 번역이 오래되었거나 누락되었을 수 있습니다. 콘텐츠가 마켓의 특정 템플릿에 있을 수도 있습니다. 기본 언어로 새 콘텐츠를 추가할 때마다 자동 번역을 다시 실행하거나 수동으로 새 번역을 추가해야 합니다.

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

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

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

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

스토어프론트와 테마 편집기에 동일한 정보가 표시되지 않는 경우 편집 중인 테마 템플릿을 검토하십시오. 올바른 정보를 표시하려면 테마 템플릿을 편집하여 업데이트해야 할 수 있습니다.

마켓 재정의를 사용하면 여러 마켓에 대해 여러 스토어프론트를 생성하고 번역된 콘텐츠를 표시할 수 있습니다. 업데이트하는 동안 의도치 않게 특정 마켓 또는 B2B 내에서 작업했을 수 있습니다. 테마 편집기의 마켓 드롭다운 메뉴를 사용하여 콘텐츠를 찾아 올바른 마켓에 있는지 확인하십시오.

마켓 재정의에 대해 자세히 알아보기.

Shopify 테마 스토어에서 사용할 수 있는 모든 테마는 화면 크기에 맞게 조정되는 반응형 테마입니다. 테마 편집기에서 테마를 편집하는 동안 화면 크기 보기를 전환하여 페이지와 이미지가 올바르게 표시되는지 확인할 수 있습니다. 테마 편집기에서 여러 화면 크기 보기에 대해 자세히 알아보기.

여러 섹션 및 모듈에는 사용자 지정할 수 있는 모바일 설정이 있습니다. 예를 들어 관련 제품 섹션에서 모바일의 열 수를 설정할 수 있습니다. 각 템플릿의 모바일 관련 섹션 설정을 검토하여 모바일 화면 크기에서 발생하는 표시 문제를 해결할 수 있습니다.

일부 테마 기능은 모든 화면 크기에서 테마에 액세스할 수 있도록 데스크톱에서와 모바일에서 다르게 표시될 수 있습니다. 예를 들어 데스크톱 화면 크기에서는 슬라이드 쇼에 텍스트 오버레이가 있을 수 있으며, 이 경우 텍스트는 이미지 색상 불투명도나 텍스트 그림자와 함께 이미지 위에 표시됩니다. 그러나 모바일 화면 크기에서는 텍스트가 슬라이드 쇼 아래에 표시될 수 있습니다. 이는 모든 화면 크기에서 텍스트를 읽을 수 있도록 설계된 접근성 기능입니다. 텍스트가 오버레이인 경우 모바일에서 매우 작게 표시되어 읽기 어려울 수 있습니다.

모바일에서 스토어프론트를 볼 때 추천 컬렉션 섹션이나 컬렉션 페이지의 크기가 일관되지 않거나 정렬되지 않는 경우 종횡비가 일관되지 않기 때문일 수 있습니다. 컬렉션 또는 추천 컬렉션 내에 표시되는 제품 이미지와 같은 이미지 그리드는 화면 크기에 맞게 반응형으로 제작됩니다. 이미지 그리드 내 이미지의 종횡비가 일관되지 않으면 화면 크기에 따라 다르게 표시될 수 있습니다. 2048px x 2048px 크기의 정사각형 제품 이미지는 일반적으로 제품 그리드에서 가장 잘 작동합니다. 모든 화면 크기에서 최적화되도록 일관된 종횡비로 이미지를 업데이트하십시오. 이미지 종횡비에 대해 자세히 알아보기.

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

HTML 코드 검토

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

단계:

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

서식 지우기

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

단계:

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

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

스토어프론트에 스토어와 연결되지 않은 URL로 사용자를 리디렉션하는 코드가 포함된 경우 테마 편집기를 방문할 때 리디렉션이 비활성화되었는지 확인하십시오.

예를 들어, 이러한 유형의 리디렉션은 고객의 위치에 따라 다른 Shopify 스토어로 안내하기 위해 스토어프론트에 추가될 수 있습니다. 이러한 유형의 리디렉션 코드는 테마 또는 설치한 앱에 있을 수 있습니다.

리디렉션이 편집기 환경을 방해하지 않도록 하려면 테마 편집기를 방문할 때 JavaScript에서 window.Shopify.designMode 변수에 대한 참조를 사용하여 리디렉션을 비활성화하십시오. 이 변수는 스토어프론트가 편집기에서 로드될 때 true로 설정되고, 그렇지 않을 때는 false로 설정됩니다.

모든 제품 페이지에 동일한 콘텐츠를 표시하는 접이식 모듈 또는 기타 테마 모듈이 있는 경우 메타 필드를 사용하여 동적 소스를 설정해야 합니다. 이는 판매자가 한 제품에 성분이나 관리 지침과 같은 제품별 정보를 추가했지만 모든 제품에 표시될 때 흔히 발생합니다.

접이식 모듈에 모든 제품에 동일한 텍스트가 표시됨

테마 편집기에서 축소 가능 블록에 직접 콘텐츠를 추가하면 해당 콘텐츠가 모든 제품 페이지에 표시됩니다. 제품별 콘텐츠를 표시하려면 메타필드와 함께 동적 소스를 사용해야 합니다.

1. Shopify 관리자에서 설정 > 메타 필드 > 제품으로 이동합니다.
2. 정의 추가를 클릭합니다.
3. 메타 필드의 이름을 입력한 다음 콘텐츠 유형 선택을 클릭합니다.
4. 텍스트 및 여러 줄 텍스트를 선택합니다.
5. 저장을 클릭합니다.
6. 관리자에서 제품 페이지로 이동하여 페이지 하단의 메타 필드 섹션으로 스크롤합니다.
7. 생성한 메타 필드에 제품별 콘텐츠를 추가합니다.
8. 테마 편집기에서 제품 템플릿으로 이동하여 접이식 행 섹션을 찾습니다.
9. 행 콘텐츠 설정에서 버튼을 클릭합니다.
10. 사용 가능한 옵션에서 메타 필드를 선택합니다.
11. 변경 사항을 저장합니다.

이제 메타 필드를 채우면 각 제품에 자체 콘텐츠가 표시되며, 해당 제품의 메타 필드가 비어 있으면 콘텐츠가 표시되지 않습니다.

온라인 스토어에 메타 필드 표시 및 동적 소스와 함께 메타 필드 및 메타 객체 사용에 대해 자세히 알아보기.

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

손상된 HTML이 있는 경우 찾고 있는 테마를 찾을 수 없습니다라는 경고 메시지가 표시될 수 있습니다. 다음과 같은 여러 가지 이유로 테마 편집기에서 페이지를 로드하지 못할 수 있습니다.

• 네트워크 연결 문제
• 테마의 잘못된 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. 스토어프론트로 이동하여 예상대로 표시되는지 확인하십시오.

“고유 핸들의 최대 개수를 초과했습니다” 오류

홈페이지에 “all_products의 고유 핸들 최대 개수 초과”와 같은 Liquid 오류 메시지가 표시되는 경우, 이는 일반적으로 홈페이지에 추천 제품 섹션을 너무 많이 추가했기 때문입니다(대부분의 테마에서 일반적으로 20개 섹션 이상).

이 문제를 해결하려면:

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.
2. 현재 테마를 찾아 테마 편집을 클릭합니다.
3. 홈페이지로 이동합니다.
4. 테마의 제한을 준수하도록 일부 추천 제품 섹션을 제거합니다.
5. 대신 여러 제품을 더 효율적으로 표시하고 스토어 실적을 개선할 수 있는 추천 컬렉션 섹션을 사용하는 것을 고려해 보십시오.

결제 아이콘은 허용되는 결제 방법을 고객에게 표시하기 위해 대부분 테마의 바닥글에 기본적으로 포함됩니다. 테마의 바닥글에 결제 아이콘이 표시되지 않는 경우 다음을 확인할 수 있습니다.

1. 테마 편집기에서 바닥글 섹션으로 이동하여 결제 아이콘 표시 설정이 활성화되었는지 확인합니다.
2. Shopify 관리자에서 설정 > 결제로 이동하여 활성 결제 방법이 하나 이상 있는지 확인합니다. 일부 결제 방법의 아이콘은 계정 설정이 완료되어야 표시될 수 있습니다.
3. 타사 전자결제 대행사를 사용하는 경우 플랫폼 제한으로 인해 결제 아이콘이 표시되지 않을 수 있습니다.

이러한 설정을 확인한 후에도 결제 아이콘이 계속 표시되지 않으면 테마 지원을 받아야 할 수 있습니다.