Skip to main content
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. 
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.
  • 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.

​
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/. 
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: 
<link rel="stylesheet" type="text/css" href="{{= static('styles/wsTemplateGlobal.css') }}">


<script src="{{= static('scripts/bootstrap.bundle.js') }}"></script>
<script src="{{= static('scripts/jquery-3.6.4.js') }}"></script>


<img src="{{= static('images/logo.png')}}" alt="">

​
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). The base template is located in the directory 
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 <head> 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) via the extends command: 
{{ 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: 
{{ block header }}
  <header class="header">
     <h1>Standard header</h1>
  </header>
{{ /block }}

​
Overriding template blocks

A template block can be overridden in a view template 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 
{{ block "header" }}
    <header>
        <h1>Welcome to the shop!</h1>
        <p>This is our special header for the home page.</p>
    </header>
{{ /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: 
{{ block "header" append }}
    <p>Free shipping from €50.00 purchase value</p>
{{ /block }}
More information about template blocks and their use and customization can be found in the reference documentation on template blocks.

​
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 
templates
 ├── views
View templates can be linked directly by generating their URL using the following command: 
<a href="{{= $wsViews.viewUrl('impressum.htm')}}">Imprint</a>
In this example, a link is created to the view template impressum.htm. A view template should always use a base template. This ensures that all fundamental structures such as header, footer, or the technical <head> area are inherited from the base template. The assignment is always made with the extends command: 
{{ extends "layouts/default.html" }}
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, <html>, or <body>, but only selected code snippets. Components are located in the directory: 
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 
<div class="product-box">
    <h3>{{= $myProduct.name }}</h3>
    <p>Price: {{= $myProduct.price }} €</p>
    <a href="{{= $myPproduct.link }}">Details</a>
</div>
The product box can then be embedded anywhere in the shop where it is needed — easily and flexibly via the include command: 
{{ 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 and components.

​
Storefront API

As an alternative to the templates, the Storefront API can also be used to build the shop.