top of page

그린 레이디 Shopify 2.0

이 포트폴리오 프로젝트에서 나는 백엔드 로직을 위한 Shopify Liquid, 스타일링을 위한 Tailwind CSS, 상호 작용을 위한 JavaScript/jQuery의 조합을 사용하여 역동적이고 시각적으로 매력적인 스킨케어 매장 웹사이트를 만들었습니다. 이 프로젝트는 프론트엔드 및 백엔드 기술에 대한 나의 숙련도와 매력적이고 기능적인 전자 상거래 웹 사이트를 만드는 능력을 보여주는 것을 목표로 합니다.

데모 웹사이트

비밀번호 : 1

그림 물감

사용된 기술

  • 쇼피파이 리퀴드: 제품의 동적 렌더링, 장바구니 처리, 결제 프로세스 관리에 사용됩니다.

  • 테일윈드 CSS: 전체 웹사이트의 스타일 및 레이아웃에 활용됩니다. Tailwind CSS의 유틸리티 우선 접근 방식을 통해 신속한 개발과 손쉬운 사용자 정의가 가능합니다.

  • 자바스크립트/jQuery: 이미지 줌, 제품 변형 선택, 체크아웃 중 실시간 양식 유효성 검사 및 전반적인 사용자 경험 향상과 같은 대화형 요소에 사용됩니다.

3.png

프로젝트 목표

  • 시각적으로 매력적이고 반응이 빠른 디자인을 만들기 위해 Tailwind CSS와 같은 프런트엔드 기술의 숙련도를 보여줍니다.

  • 전자 상거래 기능을 처리하는 Shopify Liquid의 기능에 대한 확실한 이해를 보여줍니다.

  • JavaScript 및 jQuery 기술을 강조하여 사용자 상호 작용을 향상하고 원활한 쇼핑 경험을 제공합니다.

  • 미학적으로 만족스럽고 사용자 친화적인 완전하고 기능적인 전자 상거래 웹사이트를 만드는 능력을 강조하십시오.

14.png

프로젝트 기능

  1. 홈페이지: 홈페이지는 멋진 영웅 이미지, 눈길을 끄는 태그라인 및 추천 제품으로 사용자를 환영합니다. 레이아웃은 Tailwind CSS를 사용하여 섹션과 요소를 구조화하여 깨끗하고 매력적으로 디자인되었습니다.

  2. 제품 카탈로그: 제품 카탈로그 페이지를 통해 사용자는 매장에서 제공되는 스킨케어 제품을 탐색할 수 있습니다. 제품은 Shopify Liquid의 동적 제품 렌더링을 사용하여 가져오고 UI는 Tailwind CSS의 반응형 그리드 및 카드를 사용하여 스타일이 지정됩니다.

  3. 제품 세부 정보: 제품을 클릭하면 사용자가 자세한 제품 페이지로 연결됩니다. 이 페이지는 Shopify Liquid를 사용하여 특정 제품 정보를 검색하고 Tailwind CSS를 스타일링에 사용합니다. JavaScript/jQuery는 이미지 확대 및 제품 변형 선택과 같은 대화형 요소에 사용됩니다.

  4. 쇼핑 카트: 사용자는 드롭다운/모달로 표시되는 장바구니에 제품을 추가할 수 있습니다. 장바구니는 Shopify Liquid의 장바구니 API를 사용하여 선택한 제품으로 동적으로 업데이트됩니다. Tailwind CSS는 원활한 사용자 경험을 위해 카트 스타일을 지정하는 데 도움이 됩니다.

  5. 체크아웃 프로세스:결제 프로세스는 단계별 레이아웃에 따라 원활하고 사용자 친화적입니다. Shopify Liquid는 결제 로직을 처리하는 데 사용되며 Tailwind CSS는 일관된 디자인을 보장합니다. JavaScript/jQuery는 실시간 유효성 검사 및 사용자 피드백을 통해 프로세스를 향상시킬 수 있습니다.

  6. 검색 기능:사용자가 제품을 빠르게 찾을 수 있도록 검색 표시줄을 사용할 수 있습니다. Shopify Liquid의 검색 기능은 관련 제품을 검색하는 데 활용되며 검색 UI는 Tailwind CSS를 사용하여 설계되었습니다.

4.png
6.png
7.png
5.png
8.png
9.png
bottom of page