Theme Boilerplate

The lamashopi repository is a Shopify Online Store 2.0 boilerplate built for Lama Lama projects. It provides a component-based architecture, a custom Vite build pipeline, and a Tailwind-powered design system.

Key Principles

• components/ is the single source of truth for all Liquid, JS, and SCSS. The sections/ and snippets/ directories are generated build outputs — never edit them directly.
• Dynamic JS loading via data-component attributes — components are imported on demand.
• Design tokens drive the visual system — colors, typography, spacing, and grid are defined in tailwind/config/ and exposed through custom Tailwind plugins.

Directory Structure

lamashopi/
  components/          ← Source of truth for all Liquid, JS, and SCSS
    sections/          ← Shopify sections
    blocks/            ← Reusable UI blocks
    parts/             ← Small primitives (buttons, form fields, etc.)
    icons/             ← SVG icon partials
    groups/            ← Section group JSON definitions
  src/                 ← Vite entry points and core framework
    js/
      scripts.js       ← Main entry: boots the App
      styles.js        ← Eager-imports all component style.scss files
      core/            ← App shell, Page manager, utilities
      shop/            ← Shop-specific logic (cart, wishlist, etc.)
    scss/              ← Global styles, base, fonts
  vite/                ← Custom Vite plugins
  tailwind/            ← Custom Tailwind plugins and design tokens
  sections/            ← BUILD OUTPUT — do not edit
  snippets/            ← BUILD OUTPUT — do not edit
  assets/              ← BUILD OUTPUT — Vite-compiled bundles
  config/              ← Shopify settings_schema.json / settings_data.json
  layout/              ← theme.liquid
  templates/           ← JSON templates (Store 2.0) + legacy Liquid
  locales/             ← Translations

Tech Stack

Tool	Version	Purpose
Vite	8	Build tooling and dev server
vite-plugin-shopify	4	Shopify theme asset integration
Tailwind CSS	3.4	Utility-first styling
GSAP	—	Animations and ScrollTrigger
Lenis	—	Smooth scrolling
Swiper	—	Carousels and sliders
HLS.js	—	Video streaming
Biome	—	Linting and formatting

Next Steps

• Architecture — How the build pipeline works
• Components — Component structure and conventions
• JavaScript — JS module system and core services
• Styling — Tailwind config and design tokens
• Conventions — Naming rules and code standards
• Workflow — Development setup and deploy flow