추가 기능을 사용하여 웹 사이트에 Shopify e커머스 스토어를 추가하는 방법을 살펴봅니다.

1. e커머스 스토어 설정

사이트에 e커머스를 추가하려면 먼저 서드파티 솔루션을 사용하여 스토어를 만들어야 합니다. 이 튜토리얼에서는 Nomad Dreamers 팬 사이트용으로 만든 Shopify 스토어를 사용합니다. 

nomad-dreamer-widget.zip을 다운로드하고 NomadDreamers-start.mu 파일을 엽니다. 디자인 모드로 전환하고 페이지에서 아래로 스크롤하여 Shopify eCommerce Widget 머리글 아래 섹션으로 이동합니다.

참고: Ecwid, Gumroad, 또는 Sellify와 같이 사용할 수 있는 다양한 e커머스 솔루션이 있습니다.

디자인 모드

2. 무료 Shopify Button 위젯 설치

Adobe Muse Widget 디렉토리에서 Shopify Button 위젯으로 이동합니다. Get this Widget 버튼을 클릭하여 Shopify_Button.mulib를 다운로드합니다. 다운로드한 파일을 두 번 클릭하면 라이브러리 패널에 자동으로 설치됩니다.

Shopify Button 위젯 다운로드

3. 사이트에 위젯 추가

라이브러리 패널을 열고 Shopify Button 폴더를 연 다음 버튼을 표시할 영역으로 Shopify Button 위젯을 드래그합니다.

위젯 추가

4. 위젯에 Shopify 컬렉션 추가

위젯을 선택하고 파란색 옵션 아이콘을 클릭하여 Shopify 옵션 패널을 엽니다. Shopify Name 입력란에 nomad-dreamer-fan-site를 입력합니다. Shopify Collections ID/IDS 입력란에 32815617을 입력합니다.  

팁: Shopify 스토어에서 설정한 모든 컬렉션의 컬렉션 ID를 사용할 수 있습니다. ID는 컬렉션 URL의 마지막 부분에 해당됩니다. (예: nomad-dreamer-fan-site.myshopify.com/admin/collections/32815617) 컬렉션에 대한 자세한 내용은 shopify.com을 참조하십시오. 

Shopify 컬렉션 추가

5. 페이지 완성

Shopify Button 위젯은 그래픽 스타일을 사용하여 개체를 스토어로 연결합니다. 기본 버튼을 사용하거나 스토어에 연결되도록 shopify-button 스타일을 페이지의 모든 개체에 적용할 수 있습니다. 

기본 버튼을 사용하여 페이지를 완성하려면 버튼 개체를 선택하고 복사/붙여넣기를 통해 복제한 다음 원하는 위치로 드래그합니다. 

선택 사항: 다른 개체를 버튼으로 사용해 볼 수 있습니다. Americanized 옆에 있는 앨범 이미지를 클릭하고 shopify-button 그래픽 스타일을 적용해 보십시오.

페이지 완성

 

이상입니다. 이제 모든 작업이 끝났습니다. 이 튜토리얼에 대한 여러분의 의견을 보내주십시오.

 

12/16/2016

Contributors: 123Muse.com, Chris Kellet, Ali Pordeli

이 페이지가 도움이 되었습니까?