Table of Contents

Abstract Layout Template

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

Abstract Layout Template

Abstract Layout Overview (Draw.io file)

This document explains the abstract page layout shown in the image above. It focuses on how the template organizes content visually across common ecommerce and marketing pages. Use it as a blueprint to assemble consistent pages out of reusable blocks.

What This Is

A high-level wireframe that defines global page structure and interchangeable content sections.
Optimized for storefronts and landing pages: home, collection/catalog, product highlights, ... .
Modular: each section (“block”) can be turned on/off, reordered, or restyled.

Changelog

14.11.2025 added Changelog

Global Structure

Header: logo, primary navigation, search, account, cart,... . Sticky on scroll with mobile menu.
Main Content Area: Body section of the page, include all the contents and component we using to show user.
Footer: links, legal, contact, newsletter, social — consistent across pages.

Core Design

Decide layout per section: use CSS Grid for multi-column card grids (categories, products) and Flexbox for linear strips (USPs, toolbars, navs, promo bands).
Mobile-first: stack blocks in one column; scale to 2/3/4 columns at breakpoints while maintaining consistent gutters and container widths.
Keep blocks modular: each block is a MedusaJS component with a simple, predictable prop shape.
Drive rendering from a JSON config: a blocks array declares the page; each item has a type (e.g., hero, features, categories, collection, promo, story, testimonials) and optional media, content, actions, and layout fields.

Core Sections (Blocks)

Each block uses a simple “media + content + actions” pattern and can be repeated.

Hero / Banner
- Large visual (image/video), headline, subcopy, primary/secondary CTAs.
- Variants: full-width, split (media/content), carousel.
Feature Strip / Icons
- 3–6 compact items highlighting USPs (e.g., Free shipping, Easy returns).
Category Highlights
- Grid of category cards: image + title + link.
- Common grids: 2×2, 3×2, masonry with one large feature tile.
Product Collection Grid
- Cards with image, title, price, rating, CTA.
- Supports badges, swatches, quick add.
Promotional Bands
- Full-width image or color background with concise copy and CTA.
- Ideal between content-heavy sections for visual rhythm.
Brand Story / Editorial
- Rich text + imagery; can use a split layout (media left/right).
Social Proof
- Testimonials, ratings, partner logos, trust badges.
Newsletter / Lead Capture
- Email field with consent text; can appear in hero, mid-page, or footer.
Utility / Help
- FAQs, shipping/returns info, contact cards.

Card System

Image Card: square/portrait image, brief title, optional CTA.
Content Card: headline, paragraph, list, icon; optional CTA.
Product Card: image, title, price, rating, actions (view/add).
Consistent spacing, radius, and hover affordances across all cards.

Responsive Layout

Grid behavior
- Mobile: single column; vertical stacking; prominent CTAs.
- Tablet: 2 columns for cards and features.
- Desktop: 3–4 columns; full-bleed hero and bands.
Containers: content-width container with generous gutters; promotional bands may be edge-to-edge.

Image Guidelines

Use crisp, purposeful imagery; avoid text-heavy images.
Provide alt text for accessibility and SEO.
Suggested aspect ratios
- Hero/Banner: 16:9 or 21:9 (wide)
- Category Cards: 1:1 or 4:5
- Product Cards: 3:4 or 1:1
- Logos/Badges: auto-fit within a consistent bounding box
Maintain consistent color treatment, border radius, and drop shadows.
Compress assets; consider lazy-loading below-the-fold images.