Product Page Mockup Collection

Sonographer in the Making - Shopify product page layout explorations

41

HTML Mockups

3

React Apps

13

Sets

About: Each set explores different layout approaches for ultrasound study material product pages. Layouts range from simple description fragments to full interactive pages with tabs, accordions, flip cards, and progress trackers. The React app (Set 11) requires serving from a web server - open its folder's index.html directly or use a local server.

Set 01 - Cheat Sheet, Logbook, Study Bundle

Cheat Sheet - Minimalist Grid

Interactive tabs, clean grid layout for size chart reference

Logbook - Split Screen

Two-column layout with feature sidebar for intern logbook

Study Bundle - Feature Showcase

Full-width hero with feature cards and bundle breakdown

Set 02 - Physics, Abdomen, Coloring Book, Protocol Bundle

Physics Guide - Accordion/Tabs

Tabbed hero banner with accordion chapter sections

Abdomen Flashcards - Flip Animation

CSS 3D flip cards simulating real flashcard interaction

Physics Questions - Progress Tracker

Gamified progress bars and topic completion tracking

Coloring Book - Visual Gallery

Hover-effect gallery with preview images

Protocol Bundle - Timeline

Step-by-step vertical timeline layout

Abdomen Guide - Tabbed Content

Multi-tab organ-based content navigation

Set 03 - Layout Variations (Two-Column, Tabbed, Hero, Cards)

Classic Two-Column with Accordion

Traditional product layout with expandable sections

Tabbed Feature Cards

Tab-switched product info with visual feature cards

Minimalist Single-Column

Clean vertical flow with floating sidebar

Split Hero with Sticky Cart

Full-width hero with persistent add-to-cart

Interactive Cards with Hover

Hover-activated detail cards and transitions

Set 04 - Flashcard Preview, Comparison, Minimalist

Abdomen Flashcards - Interactive Preview

Live flashcard demo with Q&A interaction

Study Guide - Side-by-Side Comparison

Format comparison layout (digital vs physical)

Obstetrics - Minimalist Scannable

Ultra-clean layout for draft/pre-launch product

Set 05 - Coloring Book, Logbook, Physics, Bundle (Compact)

Coloring Book Showcase

Visual product card with key features

Intern Logbook Tracker

Compact feature-focused layout

Physics Questions Interactive

Interactive question bank preview

Study Bundle Overview

Bundle contents breakdown card

Set 06 - Product Type Templates (Cheat Sheet, Bundle, Flashcard, Logbook, Physical)

Cheat Sheet - Tabbed Preview

Section tabs with content preview before purchase

Bundle - Breakdown Grid

Grid of included items with individual details

Flashcard - Demo Interactive

Try-before-you-buy flashcard demo

Logbook - Planner Tracker

Progress tracking and planning features highlight

Physical Product - Showcase

Layout for physical merchandise (badges, totes)

Set 07 - Dashboard, Tabs, Sprint, Pre-Launch

Abdomen Flashcards - Data Dashboard

Stats KPIs, search filter, expandable organ categories

Gynecology Study Guide - Tab Sections

Chapter roadmap with tabbed content areas

Gynecology Flashcards - Study Sprint

Checklist-style progress with topic grid

Obstetrics - Pre-Launch FAQ

Coming soon layout with FAQ and waitlist CTA

Set 08 - Stats Accordion, Topic Grid, Flip Cards, Tabbed Organs

Physics Guide - Stats + Accordion

Bold stats banner with CSS-only expandable chapters

Physics Guide - Topic Grid + Counter

Animated counters, pill tags, live search filter

Physics Flashcards - Flip Cards

3D CSS flip cards with comparison table

Abdomen Guide - Tabbed Organ Cards

CSS-only radio tabs with hoverable organ cards

Set 09 - Tabbed Explorer, Checklist, 3D Flip, Organ Explorer

Physics Guide - Tabbed Explorer

CSS-only tabs with icon topic grid and animated stats

Physics Guide - Progress Checklist

Gamified study checklist with completion tracking

Physics Flashcards - 3D Flip

Interactive 3D card flip with topic columns

Abdomen Guide - Organ Explorer

Visual organ navigation with expandable details

Set 10 - JS Accordion, CSS Grid, HTML5 Tabs

Flashcard - JS Accordion

JavaScript-driven accordion with smooth transitions

Study Guide - CSS Feature Grid

Responsive CSS grid of feature highlights

Study Guide - HTML5 Native Tabs

Zero-JS tabs using details/summary elements

Set 11 - React SPI Exam Practice (Full App)

SPI Exam Practice Questions

Full React app with shadcn/ui components - requires web server to load JS assets

Set 12 - Exam Prep Product Page (React/Vite)

Exam Prep Product Page

Polished SPI exam prep page with shadcn/ui, accordion FAQ, feature cards, and review section

Set 13 - Multi-Product Catalog (React/Next.js)

Multi-Product Catalog

Three layout variations (card, split-screen, hero) using real Shopify product data with Tailwind and shadcn/ui