> ## Documentation Index > Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt > Use this file to discover all available pages before exploring further. # Template theme > Customize the WEBSALE storefront design through HTML, CSS and JavaScript templates without ready-made themes or drag-and-drop builders. The design of the storefront in WEBSALE is flexible and allows for individual customizations, but requires advanced expertise in **HTML**, **CSS**, and **JavaScript**. Unlike other shop systems, WEBSALE does not offer ready-made designs or drag-and-drop builders. Instead, web designers and frontend developers work directly with the HTML templates, CSS, and JavaScript files to implement the desired design. A key advantage of this approach is that the WEBSALE software is strictly separated from the design or storefront. Changes or updates to the software do not affect the templates. The storefront therefore always remains unchanged. New functions from software updates can be manually integrated into the templates if needed. *** ## Directory structure The WEBSALE storefront is logically divided into different directories that structure the templates and associated resources such as CSS, JavaScript, and images. ### Template directory The `templates/` directory contains all HTML templates of the storefront. These are organized into subdirectories named after the corresponding controllers. This structure separates the template files according to the specific frontend areas to which they relate. ```text theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} templates ├── components │ └── inline-scripts │ └── spc ├── layouts ├── mails │ └── comment ├── pdfs ├── views │ └── account │ └── checkout │ └── newsletter │ └── other ``` **Meaning of the subdirectories:** * `templates/components/`: Reusable template elements (includes), e.g., product boxes. * `templates/layouts/`: Base templates (layout templates) that define the general framework of all shop pages (e.g., header, footer, navigation). * `templates/mails/`: Templates for automatically sent emails, e.g., order confirmations or shipping notifications. The `mails` directory is fixed and cannot be renamed or moved. Email templates must be placed directly in this directory. In the email configurations, only the file name is specified for the `template` parameter without the `mails/` prefix (see [Emails & email settings](/en/konfiguration/e-mails-e-mail-einstellungen)). * `templates/pdfs/`: Templates for PDF outputs, e.g., invoices or delivery notes. * `templates/views/`: Page templates (view templates) for the individual shop pages, e.g., home page, category pages. Of these subdirectories, only two are fixed, since the system evaluates them directly. They must not be renamed! * `templates/mails/` – contains all mail templates. * `templates/views/` – contains all renderable shop pages (the only templates that can be addressed externally via link). All other directories (e.g. `components/`, `layouts/`, `pdfs/`) are a recommended organizational structure and can be named or created freely. ### Media directory The directory `media/themes/default/` contains the resources for designing the storefront, such as fonts, SCSS files, images, and icons. This directory is located at the same level as `templates/`. ```text theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} media ├── themes │ └── default │ └── favicon │ └── fonts │ └── images │ └── scripts │ └── scss │ └── styles ``` The templates in the `templates/` directory access the resources in the `media/themes/default/` directory to define the layout, colors, fonts, and images of the storefront. This enables a clean separation of structure (HTML) and design (CSS and media). **Example of including resources:** ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ``` *** ## Base template (layout template) The base template, also referred to as the **layout template**, sets the general framework for all pages of the storefront. It defines central content and areas that are reused on most shop pages, ensuring a consistent structure and user experience. The layout template is not a standalone shop page and cannot be called directly from outside via a link. Instead, it is extended or embedded by the specific [page templates (views)](#4-view-templates-seiten-templates). The base template is located in the directory ```text theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} templates ├── layouts ``` Here, one or more layout templates can be stored, depending on the use case (e.g., general layout, customer account, checkout-specific layout, mails, etc.). The layout template typically contains the following central elements: * **Technical** `` **area:** * Meta information for search engine optimization (e.g., title, description, keywords). * References to the CSS and JavaScript files of the storefront. * Integration of external resources such as fonts or tracking codes. * **Visible header area:** * Logo: Display of the shop logo. * Search: Input field for the product search. * Login area: Access to the customer account. * Basket and watchlist: Overview of saved products. * Navigation: Primary navigation of the shop (e.g., categories). * **Breadcrumb:** * Display of the current navigation path for better user orientation. * **Footer:** * Additional links such as imprint, privacy policy, terms and conditions. * Contact information or other additional content. A layout template is included in the [page templates (views)](#4-view-templates-seiten-templates) via the `extends` **command**: ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {{ extends "layouts/default.htm" }} ``` *** ## Template blocks Template blocks form the basic structure of a base template and enable simple and flexible customization of the storefront. They group the storefront components into small, isolated blocks that can be edited or overwritten independently of each other. This block system ensures a clean structure and the reusability of content. Template blocks are clearly defined areas within a template that are marked by the `block` element. They serve to separate individual components of the storefront (e.g., header, footer, navigation) from one another so that each component can be customized independently. **Example of a block:** ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {{ block header }}

Standard header

{{ /block }} ``` ## Overriding template blocks A template block can be overridden in a [view template](#4-view-templates-seiten-templates) to make specific adjustments for individual pages. To do this, simply integrate the `block` element with the desired source code into the view template. The base template remains unchanged. **Example:** Overriding the header for the home page ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {{ block "header" }}

Welcome to the shop!

This is our special header for the home page.

{{ /block }} ``` ### Extending template blocks It is also possible to extend existing blocks without removing their original content. For this, the keywords `prepend` (prepend content) and `append` (append content) are available. **Example:** Adding a free shipping banner in the header: ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {{ block "header" append }}

Free shipping from €50.00 purchase value

{{ /block }} ``` More information about template blocks and their use and customization can be found in the [reference documentation on template blocks](/en/frontend/referenz/blocke). *** ## View templates (page templates) View templates define the individual content for specific shop pages and are the only templates that can be addressed from outside via a link. They are generally based on a base template and use its blocks to maintain a consistent structure and design. View templates are located in the directory ```text theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} templates ├── views ``` View templates can be linked directly by generating their URL using the following command: ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} Imprint ``` In this example, a link is created to the view template `impressum.htm`. #### Direct URL call of a view template Internally, `$wsViews.viewUrl()` generates a URL with the query parameters `wsvc=View` and `view=`. A view template can therefore also be called directly via the browser URL: ```text theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} https://www.beispielshop.de/?wsvc=View&view=impressum.htm ``` | **Parameter** | **Description** | | ------------- | -------------------------------------------------------------------------------------------------------------------------- | | `wsvc` | Fixed to `View`. Instructs the shop to invoke the view controller. | | `view` | Path and filename of the view template relative to `templates/views/`, e.g. `impressum.htm` or `account/orderHistory.htm`. | Additional query parameters (e.g. `?wsvc=View&view=account/orderHistory.htm&orderHistorySelect=`) are passed through to the template and can be read there via `$wsViews.params.`. In template code, prefer `$wsViews.viewUrl()` so that URLs are generated correctly and any changes to the URL scheme are handled centrally. A view template should always use a base template. This ensures that all fundamental structures such as header, footer, or the technical `` area are inherited from the base template. The assignment is always made with the `extends` command: ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {{ extends "layouts/default.htm" }} ``` If a base template is assigned with the `extends` command, only blocks may be used in the view template. For each view template, you can then decide which blocks of the base template should be inherited, overridden, or extended. No code may be placed outside of blocks. ### System templates There are three predefined system templates that may not be renamed or moved: 1. `start.htm`: Defines the home page of the shop. 2. `category.htm`: Template for category pages. 3. `product.htm`: Template for product pages. These templates are an integral part of the system and serve as the basis for the central shop pages. ### Custom templates For all other shop pages there are no system specifications. All other shop pages are freely definable view templates that can be created. These can be named freely, e.g.: * `account.htm`: For the customer account * `search.htm`: For the search * `impressum.htm`: For the imprint page * etc. *** ## Components (includes) Components, also known as includes, are reusable template elements that can be used flexibly in different areas of the shop. They serve to bundle HTML code or other instructions (e.g., CSS, JavaScript) and use them in multiple places in the shop. Unlike base templates or view templates, components do not contain complete HTML page structures with `doctype`, ``, or ``, but only selected code snippets. Components are located in the directory: ```text theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} templates ├── components ``` A typical example of a component is the product box (preview view of a product). It is needed in various places in the shop: * In the **category overview**, to display products in a list. * In the **search results**, to display the hits. * On the **watchlist**, to display saved products. * In the **cross-selling area** on the product detail page, to display related or recommended products. Instead of writing the code for the product box multiple times in different templates, it is created once as a component, e.g., components/productBox.htm ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}

{{= $myProduct.name }}

Price: {{= $myProduct.price }} €

Details
``` The product box can then be embedded anywhere in the shop where it is needed — easily and flexibly via the include command: ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {{ include "components/productBox.htm" }} ``` More details on the use of components, on passing product and/or category information into the components, and additional information about the include command can be found in the reference documentation on [template blocks](/en/frontend/referenz/blocke) and [components](/en/frontend/referenz/components). *** ## Storefront API As an alternative to the templates, the [Storefront API](/en/schnittstellen/storefront-api) can also be used to build the shop.