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 thestyles
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.