Shopify에 설치하는 방법

STEP 01

Studio에서 임베드 코드를 복사합니다

표시할 컬렉션을 선택하고 해당 컬렉션의 설치 코드를 준비합니다.

1. Studio에 로그인한 뒤 왼쪽 메뉴의 컬렉션에서 설치할 컬렉션을 엽니다.
2. 임베드 코드 탭을 열고 코드 영역 오른쪽 위의 복사를 누릅니다.
3. 이 탭은 열어 둡니다. 다음 단계에서는 다른 탭의 Shopify 관리 화면을 사용합니다.

공개된 컬렉션과 스토리, 공개 상태이면서 공개 일시가 지난 미디어가 1개 이상 있어야 표시됩니다. 콘텐츠가 없다면 먼저 Studio에서 준비합니다.

STEP 02

Shopify 스토어 URL을 확인합니다

고객이 스토어를 방문할 때 사용하는 주소를 확인합니다. Shopify 관리 화면의 URL과는 다릅니다.

1. Shopify 관리 화면 왼쪽 아래의 설정을 열고 도메인을 선택합니다.
2. 온라인 스토어의 기본 도메인으로 표시된 주소를 확인합니다. 사용자 지정 도메인이 있다면 해당 도메인을 사용합니다.
3. 확인한 도메인 앞에 https://를 붙입니다. 끝의 슬래시, 페이지 경로, 물음표 이후의 문자는 넣지 않습니다.

이미지의 주소는 예시입니다. 실제 스토어 도메인으로 바꿉니다. 이 작업을 위해 도메인을 구매하거나 변경할 필요는 없습니다.

STEP 03

Studio의 허용 도메인에 등록합니다

해당 스토어에서 위젯을 표시하도록 Storism에 허용합니다.

1. Studio로 돌아와 왼쪽 메뉴의 설정에서 회사 탭을 엽니다.
2. 허용 도메인에서 도메인 추가를 누르고 02단계에서 확인한 URL을 입력합니다. 빈 입력란이 있다면 해당 칸을 사용합니다.
3. 화면 위쪽의 저장을 누릅니다. 저장 후에도 같은 URL이 표시되는지 확인합니다.

회사의 오너 또는 관리자가 등록합니다. 등록 가능한 도메인 수는 플랜에 따라 다릅니다. 상한에 도달했다면 사용 중인 도메인을 지우지 말고 더 이상 사용하지 않는 등록이 있는지 확인합니다.

STEP 04

Shopify 테마를 엽니다

홈페이지 모양을 편집하는 화면을 엽니다. 테마는 스토어의 디자인을 결정합니다.

1. Shopify 관리 화면으로 돌아가 왼쪽 판매 채널 메뉴의 온라인 스토어(Online Store)를 엽니다.
2. 스토어에서 사용 중인 테마의 테마 편집을 누릅니다.
3. 편집 화면 위쪽에서 홈페이지가 선택되어 있는지 확인합니다.

이 안내에서는 홈페이지에 설치합니다. 사용 중인 테마에 저장하면 해당 테마를 사용하는 스토어에 반영됩니다. 이미지는 Rise 16.1.1 화면입니다.

STEP 05

사용자 지정 Liquid에 코드를 붙여 넣습니다

사용자 지정 Liquid는 코드를 넣는 섹션입니다. Studio에서 복사한 두 줄을 여기에 붙여 넣습니다.

1. 왼쪽 템플릿 영역에서 스토리를 표시할 위치의 섹션 추가를 누릅니다.
2. 검색란에서 사용자 지정 Liquid를 찾습니다. 이미지의 일본어 화면에서는 カスタム를 검색해 カスタムLiquid를 선택합니다.
3. Studio의 임베드 코드 탭으로 돌아가 다시 복사를 누릅니다. Shopify로 돌아와 추가한 섹션의 Liquid 코드 입력란에 두 줄을 붙여 넣습니다.
4. 오른쪽 위의 저장을 누르고 완료될 때까지 기다립니다.

헤더와 푸터에도 섹션 추가가 있습니다. 홈페이지 본문에 표시하려면 템플릿 안의 위치를 선택합니다. 제목이나 설명은 선택 사항입니다. 설치에 필요한 코드는 Studio에서 복사한 두 줄입니다.

STEP 06

실제 스토어에서 표시를 확인합니다

둥근 스토리 이미지가 표시되고 하나를 누르면 사진이 열리는지 확인합니다.

1. 테마 편집 화면 오른쪽 위의 … 작업 메뉴를 열고 보기를 선택합니다. 다른 탭에서 스토어가 열립니다.
2. 스토어 페이지를 새로고침한 뒤 설치한 위치에 둥근 스토리 이미지가 나타나는지 확인합니다.
3. 원형 이미지를 눌러 사진을 엽니다. 사진 오른쪽을 누르면 다음 미디어로 이동하고, 오른쪽 위의 ×를 누르면 스토어로 돌아오는지 확인합니다.
4. 스마트폰에서도 같은 스토어를 열어 표시와 열기·닫기 동작을 확인합니다.

무료 체험 등으로 스토어가 비밀번호로 보호되어 있다면 관리 화면에서 연 스토어 미리보기로 확인할 수 있습니다. 위젯 설치와 스토어의 일반 공개는 별개입니다. 테마 편집기 미리보기와 실제 스토어의 표시가 다르더라도 먼저 이 스토어 화면에서 확인합니다.

문제가 있을 때

위젯이 표시되지 않을 때

다음 순서로 확인하면 원인을 찾기 쉽습니다.

사용자 지정 Liquid가 보이지 않습니다

섹션 추가의 섹션 쪽에서 사용자 지정 Liquid를 검색합니다. 일본어 화면에서는 カスタム를 검색합니다. 테마에 따라 사용할 수 있는 섹션이 다르므로 보이지 않으면 사용 중인 테마의 지원 여부를 확인합니다.

둥근 스토리 이미지가 표시되지 않습니다

Studio의 컬렉션·스토리·미디어가 공개 상태이고 미디어 공개 일시가 지났는지 확인합니다. 실제 스토어 도메인이 허용 도메인과 같은지, 코드 두 줄을 모두 붙여 넣고 저장했는지 확인한 뒤 스토어를 새로고침합니다.

Studio 미리보기에서는 보이지만 스토어에서는 보이지 않습니다

Studio 미리보기에서는 설치할 스토어의 허용 도메인까지 확인할 수 없습니다. 실제 스토어 주소의 https://와 도메인이 등록한 내용과 같은지 확인합니다. www 유무나 서브도메인이 다르면 별도로 등록해야 합니다.

다른 위치에 표시되거나 두 개가 보입니다

템플릿 안의 추가 위치와 같은 코드를 넣은 섹션 수를 확인합니다. 왼쪽 섹션 목록에서 드래그해 위치를 바꾼 뒤 저장합니다.

테마를 바꾼 뒤 표시되지 않습니다

코드는 추가한 테마에 저장됩니다. 다른 테마로 바꾸었다면 새 테마에도 04~06단계를 진행합니다.

해결되지 않으면 문의하기 ↗(새 탭)를 통해 사용 중인 테마 이름, 스토어 URL, 표시되지 않는 화면의 상황을 알려주세요. 로그인 비밀번호는 보내지 마세요.