Home / Projects / Tess Jean

Tess Jean

A sophisticated e-commerce Shopify theme designed for fashion retail, featuring modern design elements and comprehensive customer service integration.

Technology Stack

  • Shopify Liquid templating
  • JavaScript for interactive features
  • Tailwind CSS for styling
  • PostCSS for CSS processing
  • Custom fonts (MinervaModern)

Project Structure

shopify-theme-tessjean/
├── assets/           # Static assets (CSS, JS, fonts, images)
├── config/           # Theme settings and configuration
├── layout/          # Main layout templates
├── locales/         # Internationalization files
├── sections/        # Modular content blocks
├── snippets/        # Reusable components
├── tailwind/        # Tailwind CSS configuration and plugins
└── templates/       # Page templates

Key Features

Layout & Structure

  • Main theme layout
  • Customer care specific layout
  • Password protection layout

E-commerce Features

  • Product management and display
  • Shopping cart functionality
  • Collection browsing
  • Customer account management
  • Product recommendations
  • Cart notifications
  • Collection filtering
  • Variant selection
  • Pickup availability
  • Gift card support

Customer Experience

  • Customer Care Section
    • FAQs
    • Shipping information
    • Returns policy
    • Ethics
    • Garment care
    • Size guide
    • Contact information

Design & UI Components

  • Responsive design
  • Custom typography (MinervaModern font)
  • Image banners
  • Collection displays
  • Product cards
  • Modal windows
  • Navigation elements
  • Social sharing
  • Cookie banner
  • Announcement bar

Content & Marketing

  • Blog/Article system
  • Instagram integration
  • Newsletter signup
  • Social media integration
  • Search functionality

Development Features

  • Tailwind CSS with custom plugins
  • PostCSS processing
  • Yarn package management
  • Modular JavaScript architecture
  • Multi-language support

Development Setup

Prerequisites

  • Node.js
  • Yarn package manager
  • Shopify CLI

Installation

  1. Install dependencies:
yarn install
  1. Start development server:
yarn start

File Organization

Key Directories

assets/

Contains all static files including:

  • JavaScript modules
  • CSS stylesheets
  • Custom fonts
  • SVG icons
  • Theme images

sections/

Modular content blocks that can be dynamically added to pages through the theme customizer:

  • Product displays
  • Collection grids
  • Image banners
  • Newsletter signup forms
  • Custom content sections

snippets/

Reusable components used throughout the theme:

  • Product cards
  • Icons
  • Form elements
  • Navigation components
  • Cart notifications

templates/

Page templates for different content types:

  • Product pages
  • Collection pages
  • Blog posts
  • Customer account pages
  • Static pages

config/

Theme configuration files:

  • settings_schema.json: Theme settings structure
  • settings_data.json: Theme settings data
  • markets.json: Market-specific configurations

Customization

The theme can be customized through:

  1. Shopify Theme Editor
  2. Direct code modifications
  3. Tailwind CSS configuration
  4. Theme settings

Best Practices

  • Use modular sections for content management
  • Leverage Shopify's built-in features
  • Follow Liquid templating conventions
  • Maintain responsive design principles
  • Keep JavaScript modular and efficient
  • Use Tailwind utility classes for styling

Support

For technical support or theme customization, please refer to the customer care documentation or contact the theme support team.