Green Lady Shopify 2.0

In this portfolio project, I have created a dynamic and visually appealing skincare store website using a combination of Shopify Liquid for backend logic, Tailwind CSS for styling, and JavaScript/jQuery for interactivity. The project aims to showcase my proficiency in frontend and backend technologies, as well as my ability to create an engaging and functional e-commerce website.

Demo website

PASSWORD : 1

https://pink-lady-studio.myshopify.com/

Colors

Technologies Used

Shopify Liquid: Used for dynamic rendering of products, handling the cart, and managing the checkout process.
Tailwind CSS: Utilized to style and layout the entire website. The utility-first approach of Tailwind CSS allows for rapid development and easy customization.
JavaScript/jQuery: Employed for interactive elements like image zoom, product variant selection, real-time form validation during checkout, and enhancing the overall user experience.

Project Goals

Showcase proficiency in frontend technologies like Tailwind CSS to create visually appealing and responsive designs.
Demonstrate a solid understanding of Shopify Liquid's capabilities in handling e-commerce functionalities.
Highlight skills in JavaScript and jQuery to enhance user interactivity and provide a seamless shopping experience.
Emphasize the ability to create a complete and functional e-commerce website that is both aesthetically pleasing and user-friendly.

Project Features

Homepage: The homepage welcomes users with a stunning hero image, a catchy tagline, and featured products. The layout is designed to be clean and inviting, using Tailwind CSS to structure the sections and elements.
Product Catalog: The product catalog page allows users to explore the skincare products available in the store. The products are fetched using Shopify Liquid's dynamic product rendering, and the UI is styled using Tailwind CSS's responsive grids and cards.
Product Details: Clicking on a product leads users to a detailed product page. This page uses Shopify Liquid to retrieve the specific product's information and Tailwind CSS for styling. JavaScript/jQuery are employed for interactive elements like image zoom and product variant selection.
Shopping Cart: Users can add products to their shopping cart, which is displayed as a dropdown/modal. The cart dynamically updates with the chosen products using Shopify Liquid's cart API. Tailwind CSS helps style the cart for a seamless user experience.
Checkout Process: The checkout process is smooth and user-friendly, guided by a step-by-step layout. Shopify Liquid is used to handle the checkout logic, while Tailwind CSS ensures a consistent design. JavaScript/jQuery can enhance the process with real-time validation and user feedback.
Search Functionality: A search bar is available to help users quickly find products. Shopify Liquid's search capabilities are utilized to retrieve relevant products, and the search UI is designed using Tailwind CSS.