JSON Template structure

Shopletzy Theme Development Documentation


Overview

The Shopletzy theme is designed to provide a seamless and responsive e-commerce experience. This documentation outlines the folder structure and the role of each component in the development of the Shopletzy theme for both desktop and mobile views.

Folder Structure

Root Directory

The root directory contains all the necessary folders and files to develop and configure the Shopletzy theme.

Shopletzy Theme Development
├── desktop
├── i18n
├── img
├── mobile
└── config.json

Desktop

The desktop directory is structured to manage the theme for desktop view. It includes sub-directories for common components, pages, styles, and templates.

├── desktop
   ├── common
   └── triggers
   ├── pages
   ├── account
   ├── browse
   ├── cart
   ├── checkout
   ├── home
   ├── landing
   ├── product-detail
   └── search
   ├── styles
   └── global.css
   └── templates
       ├── static-page
       └── wowcrafts-blog

Common

The common directory contains widgets and components that are reused across different parts of the theme, such as product cards, drawers, cart items, headers, and footers. The triggers sub-directory holds JSON files that define actions for these components.

Pages

The pages directory includes styles and configurations for specific types of pages like account, browse, cart, etc. These are crucial for the overall look and feel of the theme.

Styles

The styles directory contains the global.css file, which defines the global styles for the desktop view of the theme.

Templates

The templates directory is for styling static pages and blog layouts.

Mobile

The mobile directory mirrors the structure of the desktop directory but is tailored for mobile responsiveness.

i18n

The i18n directory holds internationalization files, allowing the theme to support multiple languages. Currently, it includes en-US.json for American English.

img

The img directory is a centralized location for all visual assets used in the theme.

config.json

The config.json file contains various configuration settings for the theme, such as colors, fonts, page content, SEO titles, and descriptions.

Development Guidelines

  • Do not modify or create theme pages directly within the pages directory.
  • Place all reusable components and widgets in the common directory.
  • Define global styles in the global.css file within the styles directory.
  • Use the templates directory to style static pages and blog layouts.
  • Localize the theme by adding language files in the i18n directory.
  • Store all image assets in the img directory.
  • Configure theme settings in the config.json file.

By following this structure and guidelines, developers can ensure a consistent and functional theme across both desktop and mobile platforms. For any additional information or specific queries, please refer to the individual README files within each directory or contact the theme development team.