Theme Features - LOOM&CRADLE Baby Essentials

A premium Shopify Online Store 2.0 theme designed specifically for baby product retailers. Clean, modern, and fully customizable with a focus on safety, quality, and gentle aesthetics.

Core Features

Design & Layout

Modern, Clean Design: Sophisticated color palette with warm, gentle tones perfect for baby products
Fully Responsive: Mobile-first design optimized for all screen sizes (mobile, tablet, desktop)
Semantic HTML5: Proper heading hierarchy and semantic markup for SEO and accessibility
Custom Typography: Elegant serif headings paired with clean system fonts

Homepage Sections

Hero Banner Slider

Portal Effect Hero Slider: Unique circular reveal animation for smooth slide transitions
Multiple Slides: Add unlimited slides with custom images, text, and call-to-action buttons
Auto-play: Configurable auto-rotation with pause on hover
Navigation Controls: Previous/Next buttons and dot indicators
Accessibility: Full keyboard navigation and ARIA labels

Essentials Grid

Customizable Categories: Display featured product categories with images and links
Flexible Layout: Add/remove/reorder category cards via theme editor
Visual Appeal: Rounded card design with hover effects

Product Pages (PDP)

Product Gallery

Image Slider: Interactive thumbnail gallery with smooth image switching
Multiple Images: Display up to 4 thumbnail images with click-to-view functionality
Featured Media Support: Automatically displays product's featured image or first available media
Responsive Images: Optimized image loading with lazy-loading support
Accessibility: Proper ARIA labels and keyboard navigation

Product Information

Variant Selection: Dynamic variant dropdowns with real-time updates
Quantity Selector: Styled quantity input with increment/decrement buttons
Add to Cart: AJAX-powered add to cart without page refresh
Jump Animation: Visual feedback animation when adding products to cart
Dynamic Pricing: Real-time price updates based on selected variant
Sold Out States: Clear indication of unavailable variants

Safety & Certifications

Customizable Blocks: Add multiple certification items (GOTS, OEKO-TEX, Pediatrician Approved)
SVG Icons: Beautiful, scalable safety icons
Flexible Content: Configure titles and descriptions for each certification

Care & Materials

Care Instructions: Display washing and care information
Fabric Details: Show material composition and care guidelines
Custom Icons: Washing and fabric icons for visual clarity

Collection Pages (PLP)

Product Grid

Grid Layout: Clean, organized product grid with consistent spacing
Product Cards: Beautiful product cards with images, titles, and prices
Quick Add to Cart: Add products directly from collection pages
View Details: Direct links to product detail pages
Pagination: Native Shopify pagination support
Responsive Design: Adapts from 1 column (mobile) to multiple columns (desktop)

Collection Header

Title & Description: Display collection title and description
Customizable: Edit content via theme editor

Cart Functionality

Shopping Cart Page

Professional Layout: Clean, organized cart page with grid layout
Sticky Sidebar: Checkout sidebar stays visible on desktop
Item Management: Update quantities and remove items easily
Item Details: Product images, titles, variants, and prices
Order Notes: Add special instructions for orders
Subtotal Display: Clear pricing information
Update & Checkout: Separate update and checkout buttons
Empty State: Friendly empty cart message with continue shopping button
Responsive Design: Optimized for all screen sizes

Mini Cart Drawer

Slide-in Drawer: Smooth slide-in animation from right side
Quick View: View cart contents without leaving current page
Item Management: Remove items directly from mini cart
Cart Count: Dynamic cart count badge on header icon
Subtotal Display: Show current cart total
Checkout Links: Quick access to checkout and full cart page
Empty State: Clear empty cart message
Theme-matched Styling: Consistent with overall theme design

AJAX Add to Cart

No Page Refresh: Seamless add to cart experience
Visual Feedback: Button animations and state changes
Error Handling: User-friendly error messages
Cart Updates: Automatic cart count and mini cart updates
Works Everywhere: Add to cart from product pages and collection pages

Navigation & Header

Header Navigation

Logo Text: Customizable logo text (default: LOOM&CRADLE)
Icon Navigation: Beautiful SVG icons for wishlist, links, search, and cart
Cart Icon: Accessible cart icon with item count badge
Responsive: Mobile-optimized navigation
Accessibility: Full ARIA labels and keyboard navigation

Footer

Footer Links

Multiple Columns: Up to 3 customizable link list columns
Newsletter Signup: Email subscription form
Social Icons: Customizable social media links
Default Content: Fallback links when menus aren't configured
Flexible Layout: Add/remove/reorder footer blocks via theme editor

Collections Listing Page

Collections Grid

All Collections View: Display all collections in an organized grid
Collection Cards: Show collection images, titles, descriptions, and product counts
Consistent Styling: Matches product grid design language
Empty States: Handle collections without images gracefully

Technical Features

Shopify OS 2.0 Compliance

JSON Templates: All templates use JSON format (index, collection, product, cart, list-collections)
Section-based Architecture: All page content is organized into reusable sections
Block Support: Sections support blocks for flexible content management
Theme Editor Compatible: All content is customizable via Shopify theme editor
Schema Settings: Comprehensive settings for customization options

Performance

Optimized Assets: Single CSS file and JavaScript file for efficient loading
Lazy Loading: Images load lazily for better performance
Minimal JavaScript: Lightweight custom elements and vanilla JavaScript
No External Dependencies: No external libraries or frameworks
Fast Load Times: Optimized code for quick page loads

Accessibility

Semantic HTML: Proper use of HTML5 semantic elements
ARIA Labels: Comprehensive ARIA labeling for screen readers
Keyboard Navigation: Full keyboard navigation support
Focus States: Visible focus indicators for interactive elements
Alt Text: Image alt text support throughout
Color Contrast: WCAG-compliant color contrast ratios

Internationalization

Translation Keys: All text uses Shopify translation system
Multi-language Ready: Supports multiple languages via locale files
Multi-currency Support: Compatible with Shopify's multi-currency features

SEO

Semantic Markup: Proper heading hierarchy (h1, h2, h3)
Meta Tags: Proper meta tag implementation
Structured Data: Ready for schema.org markup
Canonical URLs: Proper canonical URL implementation
Image Optimization: Optimized images with proper alt text

Customization Options

Theme Settings

Typography: Customize heading and body fonts
Colors: Theme color customization options
Logo: Custom logo text configuration
Navigation: Configure header links and menus
Footer: Customize footer links, newsletter, and social icons

Section Settings

Hero Slider: Configure slides, intervals, and content
Essentials Grid: Add/remove/reorder category cards
Product Grid: Set number of products per page
Header: Customize logo, links, and icons
Footer: Configure link lists, newsletter, and social icons

Block Settings

Hero Slides: Individual slide content and images
Essential Categories: Category images, titles, and links
Certifications: Certification icons, titles, and descriptions
Care Items: Care instructions and material information

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)
Mobile browsers (iOS Safari, Chrome Mobile)

Changelog

Version 1.0.0 (Latest)

✅ Initial theme release
✅ Complete Shopify OS 2.0 architecture
✅ Responsive design (mobile, tablet, desktop)
✅ Hero banner slider with portal effect animation
✅ Product gallery with thumbnail slider
✅ AJAX add to cart functionality
✅ Mini cart drawer with slide-in animation
✅ Professional cart page with sticky sidebar
✅ Quick add to cart on collection pages
✅ Safety & certifications sections
✅ Care & materials sections
✅ Collections listing page
✅ Complete translation support
✅ Full accessibility compliance
✅ SEO optimization
✅ Theme editor customization options

Installation & Setup

Upload theme files to Shopify admin
Customize theme settings via theme editor
Configure navigation menus
Add products and collections
Customize homepage sections (hero slider, essentials grid)
Configure footer links and newsletter
Set up social media links
Test on multiple devices and browsers

Support & Documentation

For theme documentation and support, please refer to:

Theme documentation URL: https://shopify.dev
Support email: chamara@elsysolutions.com

Note: Before submission, update theme_documentation_url in config/settings_schema.json with your actual documentation URL.

Theme Name: Loom & Cradle
Version: 1.0.0
Theme Author: Shopify
Compatible with: Shopify Online Store 2.0
License: Commercial (Shopify Theme Store)

LOOM&CRADLE Baby Essentials Theme