Forma3D Shopify Theme¶

A minimal, premium Shopify 2.0 theme designed for Forma3D — a brand specializing in 3D printed kitchen organizers for IKEA products.

Design Philosophy¶

This theme implements the Studio Neat-inspired design system with:

• Generous whitespace — Premium feel with breathing room
• Clean typography — Inter font family for modern readability
• Product-first photography — Large images as the primary focus
• Calm Scandinavian aesthetics — Sage green accent on neutral backgrounds

Theme Structure¶

theme/
├── assets/
│   ├── base.css              # Design tokens, reset, utilities
│   ├── components.css        # Buttons, forms, cards, badges
│   ├── sections.css          # Header, footer, hero, product page
│   ├── global.js             # Cart drawer, mobile nav, interactions
│   ├── forma3d-icon.svg      # Symbolic logo
│   └── forma3d-organize-logo.svg  # Product logo
├── config/
│   ├── settings_schema.json  # Theme customizer settings
│   └── settings_data.json    # Default settings values
├── layout/
│   └── theme.liquid          # Main layout wrapper
├── locales/
│   └── en.default.json       # English translations
├── sections/
│   ├── header.liquid         # Site header with nav
│   ├── footer.liquid         # Site footer
│   ├── hero.liquid           # Homepage hero
│   ├── trust-bar.liquid      # Trust badges bar
│   ├── featured-products.liquid
│   ├── grid-cta.liquid       # Grid configurator CTA
│   ├── main-product.liquid   # Product detail page
│   ├── main-collection.liquid # Collection page
│   ├── configurator.liquid   # Custom grid configurator
│   ├── main-page.liquid      # Generic page
│   ├── main-cart.liquid      # Cart page
│   ├── main-404.liquid       # 404 page
│   ├── header-group.json     # Header section group
│   └── footer-group.json     # Footer section group
├── snippets/
│   ├── forma3d-icon.liquid   # Symbolic logo snippet
│   ├── forma3d-logo.liquid   # Product logo snippet
│   ├── product-card.liquid   # Product card component
│   ├── cart-drawer.liquid    # Slide-out cart
│   ├── pagination.liquid     # Collection pagination
│   ├── meta-tags.liquid      # SEO meta tags
│   └── icon-*.liquid         # Various UI icons
├── templates/
│   ├── index.json            # Homepage
│   ├── product.json          # Product page
│   ├── collection.json       # Collection page
│   ├── page.json             # Generic page
│   ├── page.configurator.json # Grid configurator page
│   ├── cart.json             # Cart page
│   └── 404.json              # 404 page
└── README.md

Design System¶

Color Palette¶

Typography¶

• Font Family: Inter (system fallback)
• Heading Sizes: 3rem (H1), 1.875rem (H2), 1.5rem (H3)
• Body Size: 1rem (16px base)

Spacing¶

Uses a consistent spacing scale:

• --spacing-1 through --spacing-24 (4px to 96px)
• --section-spacing: 80px (desktop), 48px (mobile)
• --grid-gap: 24px

Key Features¶

1. IKEA Compatibility Badges¶

Products can display IKEA compatibility tags using:

• Product tags (e.g., IKEA-FÄRGKLAR)
• Metafields (custom.ikea_compatible)

2. Grid Configurator¶

Custom page template (page.configurator.json) with:

• Width/depth dimension inputs
• Real-time grid calculation
• Dynamic pricing
• Add to cart functionality

3. Cart Drawer¶

Slide-out cart with:

• AJAX add to cart
• Live cart updates
• Mobile-friendly

4. Trust Bar¶

Configurable trust badges:

• Made in Europe
• Free EU Shipping
• 30-Day Returns
• 3D Printed Quality

5. Mobile-First Responsive¶

• Hamburger menu for mobile
• Responsive product grids
• Touch-friendly interactions

Installation¶

1. Via Shopify CLI:

shopify theme push --path ./theme

1. Via ZIP Upload:
2. Zip the theme folder

3. Upload in Shopify Admin → Online Store → Themes → Add theme

4. Development:

   shopify theme dev --path ./theme
   

Customization¶

Theme Settings¶

Access via Shopify Admin → Themes → Customize:

• Colors: Adjust the sage green palette
• Typography: Change heading and body fonts
• Layout: Modify page width and spacing
• Header: Logo, menu, announcement bar
• Footer: About text, link columns, social links
• Products: Compatibility badges, quick add

Adding Sections¶

All sections use Shopify 2.0's JSON templates for easy customization.

Localization¶

Translations are in locales/en.default.json. Add new locale files for other languages.

Forma3D Logo Integration¶

The theme includes two logo options:

1. Symbolic Icon (forma3d-icon.liquid)
2. 3D cube-like symbol
3. Used in header, favicon

4. Render: {% render 'forma3d-icon', width: 24, height: 32 %}

5. Product Logo (forma3d-logo.liquid)

6. Full "Forma3D Organize" wordmark
7. Used for larger branding
8. Render: {% render 'forma3d-logo', width: 154, height: 112 %}

Browser Support¶

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• iOS Safari
• Chrome for Android

Accessibility¶

• WCAG AA color contrast
• Keyboard navigation
• Skip to content link
• ARIA labels on interactive elements
• Focus indicators

Performance¶

• CSS custom properties for theming
• Lazy loading images
• Responsive image srcsets
• Minimal JavaScript

Related Documentation¶

• Design Mockups
• Design Implementation Notes

Built with care for Forma3D. Made in Europe.