https://github.com/nehalskdev/sneaker-hub

https://github.com/nehalskdev/sneaker-hub

Last synced: 4 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/nehalskdev/sneaker-hub
• Owner: nehalskdev
• Created: 2025-05-10T19:01:10.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2025-05-11T10:23:25.000Z (about 1 year ago)
• Last Synced: 2025-06-23T15:49:34.068Z (12 months ago)
• Language: HTML
• Homepage: https://sneaker-hub-gamma.vercel.app
• Size: 17.3 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Shopify Product Page Implementation

A complete product page implementation with all the requested features, mimicking a Shopify storefront layout.

## Features Implemented

1. **Scrollable Product Images Gallery**

   - Main image with thumbnails below

   - Clicking thumbnails updates the main image

   - Image zoom on hover (desktop only)

2. **Size Chart Button with Modal**

   - Size chart button near size options

   - Modal popup with size chart table

   - Dismissible via close button, ESC key, or overlay click

3. **Product Variants**

   - Color variations as swatches

   - Size variations as buttons

   - Visual feedback for selected variants

   - Persistence using localStorage

4. **Compare Colors Button**

   - Modal showing color swatches side-by-side

5. **Pair Well With Section**

   - Horizontal scrollable row of complementary products

   - Mobile-friendly touch scrolling

6. **Product Bundle Suggestion**

   - Static bundle with individual and total prices

   - "Add Bundle to Cart" button

7. **Product Info Tabs**

   - Three tabs (Description, Product Information, Shipping Details)

   - Toggle content visibility with pure JavaScript

8. **Related Products Section**

   - Grid of 4 related product cards

   - Optional badges ("New", "Popular")

## Bonus Features Implemented

- Image zoom on hover for the main product image

- Persistence of selected color/size using localStorage

- Micro-interactions (transitions, hover effects, tab animations)

## How to Run Locally

1. Clone this repository or download the ZIP file

2. Open the `index.html` file in your web browser

3. No server required - all functionality works locally

## Technical Details

- Built with vanilla HTML, CSS, and JavaScript

- Fully responsive (mobile, tablet, desktop)

- No external libraries or frameworks used

- Clean, modular, and well-commented code