Laioutr UI

Shop

The Shop package provides shopping UI building blocks for product discovery and merchandising, including product cards, sliders, grids, and in-page navigation patterns.

Overview

The Shop package is a set of Laioutr UI components for common e-commerce catalog and merchandising experiences. It focuses on reusable patterns for presenting products, building responsive grids and sliders, and helping users navigate long category pages efficiently.

Use these components to compose product listing pages, promotional landing pages, and curated collections while keeping layout, interaction, and styling consistent.

Included components

Product Tile (Basic)

Versatile product tile for grids and sliders with brand, title, pricing, flags, swatches, and add-to-cart.

Product Slider

A product carousel for featured products and recommendations.

Product Slider Showcase

Premium product slider with banner-style header and richer per-tile chrome.

Product Listing Grid

Responsive grid of product tiles for category, search, and brand pages.

Category Card Grid

Responsive grid of category tiles for in-page category navigation.

Category Card Slider

Horizontal slider of category tiles for in-page category navigation.

Filter Bar

Inline filter strip with active-filter chips, sort, and the "open all filters" trigger.

Filter Off Canvas

Off-canvas filter sheet with accordion-grouped checkbox / swatch / range filters.

Sort Modes

Sort selector for product listing pages.

Search Result Hero

Hero for search-result pages with query echo and result count.

Cart

Cart sheet, list items, summary box, free-delivery progress, coupon accordion, and empty state.

Product Detail

PDP layout plus the buybox decomposition (PriceInfo, AddToCart, BenefitsBox, CouponBox, etc.).

Edit this pageorReport an issue

Plan Comparison Table

A feature-by-feature comparison table for subscription plans, with sticky headers and differences-only filtering.

Cart Coupon Code Accordion

Collapsible coupon-code input inside the cart.