JoonWeb Theme Hub requirements
When creating your theme for the JoonWeb Theme Hub, it is important to adhere to the following requirements. Failure to meet any of these requirements will result in the rejection of your theme submission. To minimize the risk of rejection, it is strongly recommended that you thoroughly test your theme before submitting it.
-
Fulfill All Requirements: Your theme must meet all the specified requirements outlined by the JoonWeb Theme Hub. Make sure your theme encompasses all the necessary features and functionalities.
-
Thorough Testing: It is crucial to extensively test your theme to ensure its functionality and quality. Insufficiently tested themes will be rejected without further review. Multiple rejections may lead to temporary or permanent suspension.
-
Familiarize Yourself with the Theme Review Process: Take the time to understand the theme review process and guidelines provided by the JoonWeb Theme Hub. Familiarize yourself with the submission procedure and requirements to streamline the review process.
Discover the theme review process and submission guidelines for the JoonWeb Theme Hub.
Theme exclusivity
To ensure that merchants have access to the best quality themes and latest features, it is mandatory that themes listed on the Theme Hub are exclusive to it and do not contain any external marketing material.
All themes must meet the following exclusivity requirements:
- Distribution of themes listed on the JoonWeb Theme Hub is exclusively limited to the JoonWeb Theme Hub. It is strictly prohibited to distribute any themes listed on the Theme Hub on other marketplaces or vice versa.
- To maintain quality and consistency, themes listed on the JoonWeb Theme Hub are not allowed to include designer credits, such as links to the developer's website or any affiliate links within the theme files.
Uniqueness from other themes
If you are creating a theme based on our reference theme, “Theme Name”, or one of your existing themes listed in the “JoonWeb Theme Hub”, it must have significant differences. Your theme should include meaningful changes and innovative designs and functionalities. Here are some cues that we consider:
- Your theme should be designed with a specific industry or niche in mind.
- Your theme must have significant variations when compared to code from other themes.
- Your theme submission should have a distinctive and unique identity, with a creative and inventive artistic direction that distinguishes it from other themes.
- To ensure consistency and quality, your theme should maintain a cohesive look and feel throughout all templates, including the index page, product and category pages, blogs, search, cart, and all other sections.
- Your theme should provide exclusive customization options or functionalities that set it apart from other themes.
- It is not acceptable for a merchant to purchase your theme and another theme listed in the JoonWeb Theme Hub, and then customize the settings to create two themes that are nearly identical to each other.
Features
If you are creating an ecommerce theme, it is recommended to refer to this link for a list of featured themes suggested by informative websites.
Themes that are rich in features cater to the diverse requirements of merchants and allow them to utilize a theme in a manner that aligns with their business needs.
All Informative website themes are required to incorporate the following functionalities:
- Multi-level menus: Add nested menus so that users can create multi-level drop down menus.
- Sections Variants: Each template should have basic sections and at least 3 variants of each section.
- Newsletter forms: Add a newsletter signup so that website owners can collect customer email addresses to use in email marketing campaigns. Learn more about newsletter signups.
- Blog Feeds: Add a section to your blog pages that displays an automatically generated list of blog feeds. Displaying recommended feeds to customers makes it easier for them to discover new blogs, and can help to increase website traffic. Learn more about Blog Feeds.
- Logo Settings: Templates must include a logo size adjustment setting that enables Website Owners to increase or decrease the logo size effortlessly.
- Media Variant: Any Section where users can add either image/media or embed a video, media variant property should be used.
- Slider/Carousel Settings: Any Section which has slider, users should be able to enable, autoplay, can change number of slides etc. using settings for desktop & mobile separately.
Template sections
Merchants can use sections to create different pages, and have the flexibility to change outlook based on their website/business requirements. Each template should have the following basic sections with 3 variants each:
- About
- Basic
- Columns
- Contact
- Form
- Image
- List
- Slider
- Text
- Video
- Welcome
*Note: You can also add category specific sections (e.g. Courses section for Training Institute, Food Menu for restaurant and resorts) to the template but section name should relate to the section’s function.
Template Pages
Every template on JoonWeb Theme hub have necessary page presets as follows:
- About
- Blog
- Contact
- Features
- Gallery
- Popup
- Services
- Team
- Testimonials
- Error 404
- Plans (for subscription)
For Ecommerce Template there are specific page presets:
- Product Feed
- Product Page
- Store Collection
- Collection Products
- Cart
- Login
- Signup
- Member Area
Browser compatibility
- Cross-browser testing: Test the theme on multiple web browsers to identify any compatibility issues. Check how the theme renders, if the layout is consistent, and if all functionality works as intended.
- HTML and CSS standards: Follow web standards and best practices when coding the theme. Stick to valid HTML and CSS syntax, avoid browser-specific features or hacks, and use appropriate CSS prefixes when necessary.
- Responsive design: Make sure the theme is responsive, meaning it adapts and looks good on different screen sizes and resolutions. Test it on various devices, including desktops, laptops, tablets, and smartphones, to ensure a consistent experience across all platforms.
- JavaScript considerations: If the theme includes JavaScript functionality, be mindful of browser compatibility for JavaScript features and APIs. Use feature detection and fallbacks for unsupported features or consider using JavaScript libraries or frameworks that handle cross-browser compatibility.
- Vendor prefixes: Some CSS properties and features may require vendor prefixes (-webkit-, -moz-, -ms-, -o-) for compatibility with specific browsers. Include necessary prefixes to ensure consistent rendering across browsers.
- Regular updates and maintenance: Keep the theme up to date with the latest browser versions and changes in web standards. Periodically check for compatibility issues and release updates or bug fixes as needed.
Lighthouse performance & Accessibility
- Theme must have minimum average Lighthouse performance score of 70.
- Themes must have a minimum average Lighthouse accessibility score of 90.
Terminology Requirements
Use the following JoonWeb Theme Hub terminology throughout the theme:
| Use this |
Don’t Use this |
- Welcome
- Header
- Footer
- Slider
- Title
- Subtitle
- Description
- Media
|
- Homepage
- Top bar / navbar
- Bottom bar
- Slideshow / Carousel
- Heading
- Subheading
- Paragraph / text
- Images / Photo / Pic
|
JoonWeb Templates Design Requirement & Instructions for Developers:
- Template Directory Structure: The template directory structure is organized as follows:
Folder List:
- Assets: This folder is where developers should place CSS, JS, and media files that are used in the template.
- Components: This folder is used for widgets and contains reusable components like pagination.
- Rules: This folder must have a JSON file that defines section rules. These rules specify how different sections should behave and interact within the template.
- Sections: This folder must have .jw (JoonWeb) files for website pages' sections. Each section represents a specific part of a web page, such as the header, about section, or footer.
Template Necessary Files:
- layout.jw: This file represents the layout of the theme. It serves as the base for rendering all sections and apps within the template. Developers should define the structure and arrangement of sections within this file.
- theme_config.json: This JSON file contains all the theme-related information, such as the theme version, presets, color schemes, typography settings, and more. Developers should update this file to customize the theme's overall appearance and behavior.
- theme_structure.json: This file lists the default pages and sections for each page within the template. It also includes presets for theme pages, allowing developers to easily apply predefined configurations to specific pages.
By following this directory structure, developers can effectively organize their template files, assets, and configurations, making it easier to maintain and customize the JoonWeb template.
It is important for developers to adhere to this structure and follow the guidelines provided in order to ensure compatibility and smooth functioning of the template.