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
pagesdirectory. - Place all reusable components and widgets in the
commondirectory. - Define global styles in the
global.cssfile within thestylesdirectory. - Use the
templatesdirectory to style static pages and blog layouts. - Localize the theme by adding language files in the
i18ndirectory. - Store all image assets in the
imgdirectory. - Configure theme settings in the
config.jsonfile.
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.