Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
31 views4 pages

Coding Assessment

The document outlines a coding assessment for creating a responsive product page similar to Shopify themes, including features like a scrollable product images gallery, size chart modal, product variants, and related products section. Technical requirements specify the use of vanilla HTML, CSS, and JavaScript without external libraries, and the deliverables include a GitHub repository or ZIP folder with a README.md file. Optional bonuses include image zoom on hover and localStorage for selected options.

Uploaded by

rojaksh963
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
31 views4 pages

Coding Assessment

The document outlines a coding assessment for creating a responsive product page similar to Shopify themes, including features like a scrollable product images gallery, size chart modal, product variants, and related products section. Technical requirements specify the use of vanilla HTML, CSS, and JavaScript without external libraries, and the deliverables include a GitHub repository or ZIP folder with a README.md file. Optional bonuses include image zoom on hover and localStorage for selected options.

Uploaded by

rojaksh963
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Coding Assessment Time Taken: 1hr

Create a complete product page that includes the following features commonly found
in Shopify themes. The page should be fully responsive, cleanly coded, and mimic
a real Shopify storefront layout.

✅ 1. Scrollable Product Images Gallery

• A main image area with a set of thumbnails on the side or below.

• Clicking a thumbnail updates the main image.

• Scrollable thumbnails if more than 4–5 images.

✅ 2. Size Chart Button with Modal

• A "Size Chart" button near size options.

• Clicking opens a modal popup showing a sample size chart table.

• Modal must be dismissible and accessible (close button + ESC key + overlay
click).

✅ 3. Product Variants

• Colour variations displayed as swatches or buttons.

• Size variations in a dropdown or buttons.

• Selecting a colour/size updates a visible product state (e.g., image or label).


✅ 4. Compare Colours Button

• Clicking “Compare Colours” should open a small popup or modal showing


swatches side-by-side.

• Allow user to “select” two or more colours to visually compare.

✅ 5. Pair Well With (Complementary Products)

• A horizontal scrollable row with 3–5 “pair well with” products (image, title,
price, add to cart).

• Mimic an actual recommendation carousel or product card row.

✅ 6. Product Bundle Suggestion

• Show a static product bundle below the main product (e.g., “Buy these
together”).

• Include individual prices and a combined total price.

• Include a single “Add Bundle to Cart” button.

✅ 7. Tabs for Product Info

• Create three tabs:

o Description

o Product Information

o Shipping Details

• Tabs should toggle content visibility (pure JavaScript).


✅ 8. Related Products Section

• Grid of 4 related product cards.

• Include image, product name, price, and optional badge (e.g., “New”,
“Popular”).

💻 Technical Requirements

• Use vanilla HTML, CSS, and JavaScript only

• No external libraries or Shopify Liquid (for now)

• Code must be modular, well-commented, and responsive

• Use placeholder data (dummy images, product names, prices, etc.)

• Mobile, tablet, and desktop support required

📦 Bonus (Optional)

• Add image zoom on hover for the main product image.

• Persist selected colour or size using localStorage.

• Add micro-interactions (transitions, hover effects, tab animation).


📁 Deliverables

• Submit as a GitHub repository or ZIP folder

• Include a README.md with:

o Overview

o Features implemented

o How to run locally

• Folder structure must be clear (index.html, css/, js/, assets/)

You might also like