Skip to content

Latest commit

 

History

History
38 lines (32 loc) · 2.96 KB

README.md

File metadata and controls

38 lines (32 loc) · 2.96 KB
Raw

Basic Shopify Store

This project was created based on a Shopify Theme Development – Online Store 2.0 + TailwindCSS course.

⚠ Important
This is a basic Shopify Theme 2.0, built from scratch, converting a basic skeleton store into JSON templates, as my own way of improving my knowledge and learning a few tricks regarding Shopify.
This isn't "marked ready" and has no intent to be.

📃 I didn't followed the course much regarding HTML, JS, Styles, as I didn't like what the instructor was doing, so the HTML structure, design/UX decisions and JS are all mine. I used the course mostly as a guide to the features to develop and to improve about Liquid / Shopify configurations and API.

Features Covered (WIP)

Status Feature
✔ Installing Development Tools
✔️ Navigational Bar + floating search bar
✔️ 404 Page
✔️ Article Page
✔️ Blog Page
✔️ Cart / Empty Cart Pages
✔️ Product Collection Page
✔️ Collections Page
✔️ Homepage (Only basic Index to load modules)
✔️ Pages (About & Contact)
✔️ Advanced Product Page
  • Variation change updates product stock (enable/disable button) and price information
  • Images become a carousel on mobile breakpoint.
✔️ Search Result / Empty search page
✔️ Login / Registration / Forgot Password (Single page solution)
✔️ My Account Page
  • Order List with pagination and direct link to Order Detail.
  • Address Book full functionality covered here, no need for the user to go to a dedicated page.
    • New Address Modal (modal using modern <dialog> native component)
    • Edit Address Modal, including change the default address.
    • Country + Province/State JS component added
    • Delete Address logic, with confirmation modal that triggers an Ajax call to the delete form and handles possible errors on the modal.
  • Reset Password Ajax call logic + response notification of success, to provide better UX as Shopify doesn't allow users to directly change their password.
✔️ Order Deails
  • Handled different cases of fullfilment, to not show the same tracking information on every product if they are all part of the same shipping.
  • If is a partial / multi shipping, each product has its own information.
✔ Site fully responsive
✔ Code clean-up / general improvements
✔ Adding a 3D model on a Product in Shopify
Maybe Turn the Modal / Dialog into a global Class component with more reusability
Maybe Converting project to use JS modules / compiler, adding Vite
Maybe Home Page extra modules
Maybe Minicart
Maybe Convert some snippets and components to be more reusable globally (toast, modals...)