고급 Shopify 맞춤형 개발이 더 나은 사용자 경험을 만드는 방법

고품질의 혁신적이며 책임감 있게 생산된 수하물, 가방 및 기타 여행 액세서리 판매자인 Paravel에게는 맞춤형 기능이 필수입니다. 그들이 생산하고 판매하는 제품은 독특하기 때문에 고객에게 독특한 쇼핑 경험을 제공하는 것이 필요했습니다.

Paravel은 온라인 상점을 통해 실질적인 운영을 가능하게 하기 위해 많은 기본 전자 상거래 기능이 필요했습니다. 원래 Spree라는 오픈 소스 플랫폼을 기반으로 구축되었으며 오픈 소스 플랫폼이라는 사실 때문에 많은 지지자와 지지자가 있습니다.

Magento와 같은 다른 오픈 소스 플랫폼과 마찬가지로 Spree는 사용자 정의가 가능합니다. 또한 매우 많은 수의 타사 플러그인 및 앱과 통합할 수 있으며 확장성이 뛰어나고 모바일 친화적인 인터페이스를 더 쉽게 개발할 수 있도록 하는 UI 직관 수준을 보여줍니다.

이것은 Spree의 다양한 기능에 대한 간략한 스냅샷일 뿐이지만 일부는 다른 오픈 소스 플랫폼과 동일한 높은 비용이 듭니다. 기능면에서 거의 무한대일 수 있지만 달성하려면 많은 개발 시간과 더 많은 경험이 필요합니다. 광범위한 코딩 경험이나 개발 배경이 없으면 Spree와 같은 플랫폼은 리소스를 빠르게 고갈시킬 수 있습니다.

Paravel은 독특한 쇼핑 경험이 필요했지만 전자상거래 판매자에게 많은 것을 제공하는 즉시 사용 가능한 솔루션도 필요했습니다. 그들에게 있어 문제는 이미 세심하게 설계되고 개발된 전자 상거래 상점을 Spree에서 보다 유능한 플랫폼으로 어떻게 가져올 수 있었습니까?

철저한 마이그레이션 프로세스

Paravel은 영업 팀과 의사 소통한 후 몇 가지 조건과 함께 Shopify Plus로의 전환이 답이라고 결정했습니다. 무엇보다도 Paravel은 마이그레이션으로 인한 부정적인 영향을 경험하고 싶지 않았으며 새 스토어에서 Spree 스토어의 모든 기능과 일부 기능을 제공하기를 원했습니다. 이를 위해 Paravel은 Shopify Plus 파트너 이상을 필요로 했으며 Shopify Plus 전문가가 필요했습니다.

Spree는 사용자 정의를 위해 거의 무한한 옵션을 제공했지만 호스팅된 전자 상거래 SaaS 플랫폼인 Shopify Plus는 훨씬 더 많은 옵션을 제공할 수 있습니다. 1Digital ^Ⓡ 과 같은 개발 팀의 도움으로 Shopify Plus는 Spree가 제공한 모든 사용자 지정 기능과 그 이상을 제공할 수 있었습니다. Shopify Plus는 또한 강화된 보안 기능, 가동 시간 보장, 빠른 사이트 속도, 타사 앱 및 플러그인과의 유사한 호환성, 다양한 결제 옵션 수용, 엄청난 확장성 등을 제공했습니다. 이 시점에서 Paravel은 기존 Spree 스토어와 디자인 및 기능을 Shopify Plus로 이전하는 작업을 맡았습니다.

어떤 사람들에게는 웹사이트 마이그레이션 과정이 고통스럽기도 하지만 우리는 그렇지 않다는 것을 알고 있었습니다. 백 번의 성공적인 마이그레이션과 우리의 노력을 뒷받침하는 개발자 팀을 통해 우리는 문제 없이 완료될 수 있다는 것을 알았습니다. 철저한 과정이 필요할 뿐입니다.

빡빡한 과정이었지만 1Digital ^Ⓡ 에이전시가 펼칠 수 있는 것은 아무것도 없었다. 이 프로젝트에서는 32개 제품 필드(이름, 설명, 이미지, 가격 등 포함)와 각각 4,000개 이상의 고객 계정 및 주문을 마이그레이션해야 했습니다. 이를 위해 임시 Linux 서버를 설정하고 원래 사이트의 Spree 인벤토리에서 이 정보를 그리고 분류하는 사용자 지정 스크립트를 작성했습니다.

이를 이동하기 위해 모든 관련 필드를 올바르게 가져오기 전에 Shopify API에 연결하는 또 다른 사용자 지정 스크립트를 만들었습니다. 그 과정과 그 이후에 데이터가 새 매장에 올바르게 도착했는지 확인하기 위해 데이터를 검사하여 손실이 없을 뿐만 아니라 원래 있어야 할 위치에 모두 채워졌습니다.

우리의 철저한 프로세스는 데이터 손실을 방지했지만 트래픽 손실은 어떻습니까? 플랫폼 재편성에 대한 전망에서 전자 상거래 고객을 차단하는 한 가지가 있다면(큰 이점이 있더라도) 트래픽이나 도메인 권한을 잃을 수 있다는 두려움입니다.

운 좋게도 마이그레이션 프로세스는 데이터 손실을 방지하는 것만큼 SEO 손상을 세심하게 방지합니다. 모든 마이그레이션 프로젝트에서 수행한 것처럼 Paravel을 사용하여 Paravel의 웹사이트와 연결된 모든 URL을 수집한 다음 새로운 Shopify 웹사이트의 연결된 URL로 리디렉션되는 301개를 설정했습니다. 당연히 Paravel은 마이그레이션이 완료된 후 트래픽 손실이나 순위 변동을 겪지 않았습니다.

지원 – 만일을 대비하여

Shopify로의 마이그레이션은 문제 없이 진행되었으며 Paravel은 향상된 기능과 더 나은 사용자 경험을 제공하는 새로운 Shopify Plus 스토어로 순조롭게 진행되고 있었지만 안전을 위해 마이그레이션 프로젝트에 30일 무료 지원 기간을 포함했습니다. . 검증된 프로세스를 갖춘 모든 Shopify 마이그레이션 대행사가 그렇게 해야 합니다. 성공적인 마이그레이션 전략의 일부일 뿐입니다.

무료 지원 기간은 프로젝트 범위에 따라 다르지만, Paravel의 마이그레이션의 경우 30일을 할당했습니다. 이를 통해 한 달 동안 새 웹사이트를 조사하고 발생할 수 있는 마이그레이션 버그를 해결할 수 있었습니다. 이 버그는 무료로 수정해 드립니다.

그 후에도 우리는 보증금을 요구하지 않고 보유자에 남아 있도록 허용했습니다. 무료 웹사이트 지원 기간이 끝난 후 기록할 모든 변경 사항에 대해 단순히 청구합니다. 이와 같은 작은 것들이 훌륭한 고객 서비스를 보장하는 데 큰 도움이 되며, 모든 것을 확인하고, 다시 확인하고, 다시 확인하더라도 마이그레이션이 원활하게 진행되도록 하는 것을 목표로 합니다.

새로 개발된 웹사이트

그러나 이주로 끝난 것이 아닙니다. Paravel에는 새 사이트가 제공할 고객 경험과 관련된 이동에 대한 기준이 있었고 이를 보장하기 위해 우리는 그들을 위한 완전히 새로운 Shopify Plus 웹 사이트를 개발해야 했습니다.

프로젝트의 일환으로 1Digital ^Ⓡ Agency의 개발자들은 브랜드 통합을 개선하고 제품을 보다 바람직한 조명으로 포지셔닝하는 데 도움이 되는 완전히 새로운 홈페이지를 제작했습니다. 대상 시장의 관심과 인식에 더 잘 부합하는 업데이트된 제품 및 배경 이미지를 제공했습니다. 아래 새 홈페이지의 매끄럽고 세련된 인상과 그 아래에 있는 이전 홈페이지의 스틸 이미지를 고려하십시오.

홈페이지 방문자에게 새로운 레이아웃은 이미지의 뛰어난 미학뿐만 아니라 Paravel 제품의 가치를 전면 및 중앙에 배치하기 위한 가장 협력적인 노력에 대해 즉시 눈에 띕니다. 또한 이전 디자인에는 없었던 새로운 홈페이지 레이아웃의 상단에 메뉴가 있음을 알 수 있습니다. 이전에 제품에 액세스하는 방법은 페이지를 아래로 스크롤하여 "컬렉션 쇼핑"이라는 버튼이 있는 곳으로 이동하는 것이었습니다. 새 페이지는 위에서 볼 수 있듯이 훨씬 더 나은 사이트 탐색 기능을 제공합니다.

홈페이지를 아래로 스크롤하면 방문자는 슬라이딩 배너를 통해 리뷰를 볼 수 있고 인기 있는 제품 카테고리에 대해 자세히 알아볼 수 있으며 아래 스크린샷 중 일부에서 볼 수 있듯이 소셜 미디어를 통해 고객이 제품을 어떻게 사용하는지 확인할 수도 있습니다.

홈페이지 외에도 1Digital ^Ⓡ 은 다른 여러 시스템 페이지 위에 Paravel의 "Our Story" 페이지와 함께 새로운 카테고리 페이지 템플릿을 만들었습니다. 개발된 페이지 중에는 장바구니 및 결제 페이지, 로그인 페이지, 상품권 페이지 및 "감사합니다" 페이지가 있습니다. 마지막으로 "FAQ" 및 "약관" 페이지를 비롯한 여러 콘텐츠 페이지를 사용자 정의했습니다.

고품질 반응형 웹사이트 디자인의 중요성은 오늘날 전자상거래에 매우 중요하며 1Digital ^Ⓡ 개발자는 프로젝트의 일환으로 업데이트된 Paravel용 반응형 웹사이트를 준비하는 데 세심한 주의를 기울였습니다. Paravel의 사용자 경험을 위해 1Digital ^Ⓡ 의 새로운 반응형 디자인은 더 작은 화면에 자동으로 적응하여 그에 따라 텍스트의 크기를 조정하고 서식을 다시 지정합니다.

고급 개발 – 카테고리 페이지 기능

1Digital ^Ⓡ 개발자가 Paravel의 제품 카테고리와 관련된 모든 정보를 이전할 때, 우리는 또한 그들이 고객에게 전달할 수 있는 몇 가지 새로운 기능을 추가하여 고객 경험을 개선했습니다.

Paravel이 카테고리 페이지 디스플레이에 표시되는 일부 배지를 빠르게 변경할 수 있도록 Metafield Editor를 카테고리 페이지 템플릿에 설치했습니다. 이를 통해 "신규", "베스트셀러" 또는 "추천" 제품과 관련된 프로모션이 더 눈에 띄게 표시될 수 있도록 사용자 정의 필드를 편집할 수 있었습니다.

이 단순해 보이는 기능은 Paravel의 관리자가 개발자와 협력하지 않고도 웹사이트 표시를 빠르고 쉽게 변경할 수 있는 많은 권한을 제공합니다. 남자는 물고기를 잡거나 예술을 가르칠 수 있으며, 우리는 Paravel에 앱 사용 및 관리 방법에 대한 자세한 지침을 제공하여 프로젝트가 종료된 후에도 쉽게 변경할 수 있도록 했습니다.

마찬가지로 1Digital ^Ⓡ 개발자는 Paravel의 컬렉션 페이지에서 제품 견본 및 빠른 보기 기능을 만들었습니다. 원하는 정보를 가져와 표시할 수 있는 Shopify Plus 컬렉션 페이지용 사용자 지정 스크립트를 만들었습니다.

또한 이러한 견본에 대한 스크립트는 고객이 관심 있는 색상과 관련된 견본을 클릭할 때 제품 이미지가 해당 색상으로 표시되도록 했습니다. 또한 변경과 관련된 적용 가능한 가격은 물론 "개인화" 옵션 또는 필요한 경우 "재고 없음" 메시지가 표시됩니다.

고급 개발 – 제품 페이지 기능

Paravel은 고객 경험을 크게 강조하므로 쇼핑 경험을 개인화하는 데 도움이 되는 추가 기능을 포함하여 제품 페이지 템플릿에 많은 추가 기능이 필요했습니다.

따라서 프로젝트의 고급 개발 측면의 일환으로 1Digital ^Ⓡ 은 웹사이트, 특히 제품 페이지에서 쇼핑 경험을 개인화할 수 있는 새롭고 더 나은 기능 세트를 만드는 데 도움을 주었습니다.

제품 페이지 템플릿을 구성하여 이전 Spree 스토어와 유사하게 표시되도록 했습니다. 그런 다음 제품 페이지 디스플레이 하단에 남을 스틱 "장바구니에 추가" 막대를 만들었습니다. 쉬운 부분이었습니다.

또한 쇼핑객이 자신의 쇼핑 경험을 개인화하고 보다 현실감 있게 만들 수 있는 제품 페이지 템플릿용 도구를 개발했습니다. 위에서 설명한 견본 기능을 사용하여 주어진 가방(또는 다른 제품)이 어떻게 생겼는지 고객에게 제공하는 것 외에도 Paravel은 고객에게 제품을 개인화할 수 있는 기능도 제공합니다.

Paravel은 고객이 개인화되면 제품이 어떤 모습일지 실제로 볼 수 있게 해주는 현실적인 도구의 전환 촉진 기능에 관심이 있었기 때문에 고객이 그렇게 할 수 있는 도구를 만들었습니다.

Paravel을 위해 구축한 도구는 고객이 제품 페이지를 방문할 때 "Personalize"라는 단어가 포함된 팝업을 표시했습니다. 그런 다음 고객이 다음과 같이 표시될 글자의 스타일과 색상에 따라 제품을 개인화할 수 있는 도구를 만들었습니다. 이니셜이 있는 모노그램.

이 도구는 고객이 "개인화"를 클릭한 후 제품 페이지에 위젯으로 표시되며 선호도에 따라 조작하고 사용자 정의하기가 매우 쉽습니다. 제품이 개인 설정을 제대로 표시하도록 하기 위해 고객이 입력한 문자를 사용자가 선택한 스타일로 제품의 오른쪽 영역에서 볼 수 있는 것처럼 정확하게 표시하는 사용자 지정 스크립트를 만들어야 했습니다. 아래 이미지에서. 기능의 최종 수준으로 Paravel의 고객이 손으로 그린 ​​글자나 아플리케 대신 수놓은 글자로 제품을 맞춤화할 수 있는 "나일론 템플릿"을 만들었습니다.

HTML 코딩을 통해 이전 Spree 스토어의 제품 페이지에서 4개의 탭을 구현하는 것을 포함하여 Paravel의 제품 페이지에 대해 몇 가지 추가 사용자 정의가 생성되었습니다. 또한 Paravel의 Spree 스토어에서 "Choose Your Own Adventure" 기능을 재창조하여 고객이 Applique 및 손으로 그린 ​​디자인으로 Paravel 제품을 추가로 개인화할 수 있으며, 여기에 나타난 원래 기능의 무결성을 보존하기 위한 몇 가지 다른 사용자 정의 외에도 그들의 Spree 상점.

중요 앱과의 통합

새로운 Shopify Plus 스토어의 기능을 확보하고 원활하고 즐거운 사용자 경험을 보장하기 위해 1Digital ^Ⓡ Agency는 Paravel의 새 스토어를 비즈니스 크리티컬 앱과 통합해야 했습니다.

무엇보다도 Paravel의 고객은 Paravel이 YotPo를 통해 그려서 표시할 수 있다는 리뷰와 평가에 의존했으며, 이를 통해 원활하게 통합되었습니다. Paravel은 또한 고객 참여 및 CRM을 위해 Zaius 사용에 크게 의존했기 때문에 앞서 언급한 것과 마찬가지로 통합을 수행했습니다.

이 외에도 Paravel은 RJ Metrics뿐만 아니라 Talkable이 제공하는 기능을 사용합니다. 이러한 앱은 Paravel의 관리자에게 귀중한 데이터를 제공하고 안전한 추천 마케팅 프로그램을 허용합니다.

1Digital ^Ⓡ Agency는 새로운 Shopify Plus 웹사이트를 코딩하고 개발하는 것 외에도 Paravel의 새 스토어에 이 모든 앱을 통합했습니다. 우리는 중단 없이 마이그레이션 및 고급 사용자 지정 개발을 수반하는 포괄적인 범위의 이 프로젝트를 완료했습니다. 즉, 클라이언트는 비즈니스의 과도한 중단이나 트래픽 손실을 경험하지 않았으며 딸꾹질 없이 고급 사용자 지정 기능을 갖춘 새로 개발된 매장으로 이동했습니다. 이를 위해서는 1Digital ^Ⓡ 이 워크플로에 통합되는 경험과 철저한 프로세스가 필요합니다.

완벽한 솔루션

일부 제공업체는 하나 또는 두 개의 고도로 전문화된 서비스로 서비스를 조정하지만 전자 상거래 판매자가 직면한 문제는 다양하다는 것을 알고 있습니다. 개발 서비스만 제공할 수 있었다면 Paravel을 Spree에서 온라인 판매자를 위한 최고의 전자 상거래 플랫폼 중 하나인 Shopify Plus로 마이그레이션할 수 없었을 것입니다. 마찬가지로 마이그레이션을 수행하는 것으로 제한했다면 새 저장소를 원하는 방식으로 사용자 지정할 수 없었을 것입니다.

Shopify Plus 설계 및 개발 서비스는 마이그레이션 서비스와 함께 사용하더라도 1Digital ^Ⓡ Agency가 제공하는 것의 작은 스냅샷에 불과합니다. Shopify 맞춤형 디자인 서비스 외에도 경쟁이 치열하고 철저하게 조사된 타겟 SEO 및 PPC 캠페인을 포함한 포괄적인 디지털 마케팅 캠페인도 제공합니다.

이 성공 사례는 Paravel을 Spree에서 고급 기능을 갖춘 새로 개발된 Shopify Plus 스토어로 마이그레이션할 수 있다는 사실에 달려 있습니다. 다른 많은 전자 상거래 사례 연구는 BigCommerce 디자인 및 개발, 유사한 Magento 서비스 및 디지털 마케팅 캠페인과 같은 다른 전자 상거래 플랫폼에 중점을 둡니다. 우리의 레퍼토리를 살펴보고 온라인 비즈니스가 직면한 문제를 해결하는 방법을 알고 싶다면 888-982-8269로 전화하십시오.

PDF 다운로드