Skip to main content

Introduction to the Shoptet Templates

Shoptet currently offers more than ten proprietary templates, with four of the oldest no longer supported. Additionally, there are dozens of templates available from external partners. These templates serve as the foundation for visual and functional customization of e-shops on the Shoptet platform.

Template Generations​

Shoptet templates are divided into two existing generations, each with its own specifics, customization options, and level of support. We are in the process of developing a new generation of templates.

4th Generation (4G)

This is the upcoming generation of templates that is currently under development. These templates will be based on React JS. They will offer greater flexibility, better performance, and fully leverage modern web application development techniques. React JS is popular for its modularity and ability to create interactive user interfaces. More information about 4th generation templates will be available soon...

3rd Generation (3G)

This generation of templates is currently the most widely used and most suitable for customization. They use JavaScript and the jQuery library for frontend interactivity. At Shoptet, we plan to remove jQuery, meaning developers should minimize its usage and transition to native ES6+ JavaScript. These templates are ideal for creating custom modifications and are recommended for developing templates on the Marketplace.

Key Features of 3G Templates:​

  • jQuery Frontend: Manages interactive elements, though it will eventually be phased out in favor of modern JavaScript.
  • Ideal for Customization: These templates are the best choice for customization, whether for individual client projects or Marketplace templates.

2nd Generation (2G)​

These templates are outdated and no longer supported. While they still function, they no longer receive new features or updates, except for those necessary for legal compliance or critical bug fixes. Users of 2G templates should transition to newer versions to gain access to modern features and improved performance.
Soon, these templates will be completely phased out.

Customization Options​

Shoptet templates are limited to customization using JavaScript and CSS. It is not possible to modify the backend or change the HTML structure of the template. This means that all changes on the frontend must be made through JavaScript, and styles must be adjusted using CSS.

Customization Limitations:​

  • No backend Modifications: It is not possible to add or execute server-side code within the templates.
  • No HTML Modifications: The templates do not allow direct editing of the core HTML structure. If you need to modify HTML elements, use JavaScript for this purpose.

All customizations must therefore be made using frontend technologies, which means you need to apply the correct techniques for working with dynamic content and styling.

Blank Mode​

Blank Mode is a special feature available only to premium clients and Shoptet partners who are developing templates for the Marketplace. Blank Mode allows the removal of all default Shoptet styles and JavaScript, providing a clean environment for creating custom solutions.

Types of Blank Mode:​

  • Blank CSS: Removes all default Shoptet CSS styles, allowing developers to design a completely custom layout.
  • Blank JS: Removes all JavaScript, including jQuery, enabling developers to implement their own custom frontend logic. However, this option is suitable only for experienced developers, as the code must still remain compatible with Shoptet API and functionality.

Using Blank Mode offers a high level of flexibility, but it also requires deep technical knowledge to avoid disrupting the system's functionality.

More information can be found in the Blank Mode Guide.

Key Metrics for Template Modifications​

When modifying templates, it is important to ensure that your changes do not negatively impact performance or user experience. Focus on the key Lighthouse metrics, which include:

  • Performance: Optimize your code so that it does not slow down the page loading time.
  • Accessibility: Ensure that the site remains accessible to all users, including those with disabilities.
  • SEO: Modifications should not negatively affect the site's search engine ranking.
  • Best Practices: Follow established best practices in web application development to maintain high-quality and secure applications.

Also make sure your code is well structured and easy to read.

Marketplace Templates​

On the Shoptet Add-ons page, you can find templates created by Shoptet partners. These templates may be either modified versions of Shoptet's base templates or completely built from scratch using Blank Mode.

When developing a template for your clients, always consider whether it is more efficient to modify an existing Marketplace template (which can be challenging and slow) or whether it is better to create a completely new template, for example, using a base template like Disco Shoptet.

Pro Tip

If you are working with a large client, consider integrating their project with Cloudflare for performance optimization. Using Cloudflare Workers, you can modify HTML before it is rendered in the browser, using the node-html-parser library. This approach eliminates CLS (Cumulative Layout Shift) issues and shifts resource-heavy scripts from the client side to the server, improving overall web performance.