Skip to main content
Skip table of contents

Understanding WebShop template and themes

Purpose and scope

Our standard framework, called Forta, comes with a template (Forta One) and the ability to theme your WebShop to suit your business needs.

Our standard template, Forta One, consists of

  • a set of standards elements that define the layout of your WebShop

  • a collection of tools that allow you control what is displayed in each of its standard elements

  • a set of configurable product features that can be switched on and off

  • access to tools, such as Visual Page Builder, category and product editors, that allows you to add and modify extra content dynamically from within WebShop

Once you’ve set up your template, complete the look and feel with a theme using our design and content tools. The theme defines your branding with colour, images, content and configuration options to showcase your business to its best advantage.

After your WebShop has been launched, you can continue to update the layout and content of your WebShop using our design and content tools.

The purpose of this article is to describe the framework, template and themes that you can use in more detail. It also provides some examples of themes that can be applied.

Tip

Forta One is the standard template that is applied to our design framework, Forta. Once Forta One is applied, you can brand or theme your WebShop to suit your business needs.

If you have purchased a SmartPack, you may be offered Forta+, our other template, which has been designed to be used in conjunction with our SmartPacks.

Doesn’t have everything you want? Contact our support team or your Customer Success Manager, who are happy to talk through the options and costs associated with extending Forta to suit your business needs.

Benefits

Key benefits are:

  • Your WebShop is optimized with a responsive design for your desktop, tablet or mobile phone.

  • When you launch you have access to tools that supports regular update of your WebShop.

  • Consistency across pages on your WebShop

  • Any changes you make can be done at a time that suits you.

  • Any changes that you make are live immediately, so it is quick and easy to update your WebShop as you go along.

Introducing terms and concepts used in this article

Term

Definition

Bootstrap

a frontend development toolkit used to create responsive websites.

Framework

refers to the web technologies that underpin your WebShop.

Template

is a set of standards elements that define the layout of your WebShop, the collection of tools that allow you control what is displayed in each of its standard elements, a set of configurable product features that can be switched on / off and access to tools that allows you to add extra content sections.

Theme

is the branding and content that you add to your WebShop template.

Fitting it all together

Your new WebShop is deployed with our standard framework installed on it. Forta One is the standard template that is applied to the WebShop’s design framework, Forta. The other template listed in the diagram, Forta+, is typically used when you have purchased a SmartPack. Forta One has a number of standard elements that define your WebShop’s layout and a set of configurable options that define its functionality. Forta+ is based on Forta One, with some additional standard elements. The standard elements of both Forta One and Forta+ are described here. Finally, you can use our design and content tools to apply your theme (essentially, your branding and content) to your WebShop. Find out more about themes here.

More about templates

Forta One is the standard template that is applied to the WebShop’s design framework, Forta.

More information

Typically, Forta+ is the template used if you have purchased a SmartPack, such as our Machinery and Spare Parts SmartPack. Forta+ has the same basic layout as Forta One, with additional elements included as standard. It contains an additional burger menu and a set of industry focused icons.

The standard elements contained in Forta One are applied to each of WebShop’s pages. There are three standard elements:

  • Header

  • One or more content sections

  • Footer

Within each standard element, you can configure and include links to frequently used features.

Header

More information

Typically, the header is built during your build and consists of elements that remain anchored to the top of each WebShop page.

These elements are displayed in three ribbons.

Additional element in Forta+

Forta+ contains an additional burger menu, located on the right of the screen in Ribbon 2. When clicked, the menu opens to the right of the screen, and contains a concatenation of options available on Ribbons 1 and 3.

  • Ribbon 3: Typically, contains a configurable top menu bar.

Content sections

More information

Each WebShop page is built by combining a number of different content sections to showcase your company and products to its best advantage.

Use our Visual Page Builder to build great looking pages. Visual Page Builder gives you granular control over the look and feel of each page and what content each page contains, using intuitive drag and drop functionality and interactive configuration controls. It provides you with a set of blocks that you combine to build a page that suits your needs. Or use the category or product editor to dynamically update content from within WebShop.

Example

Typically, a WebShop home page contains a hero banner set, and one or more content sections. The hero banner set contains one or more clickable product images. When clicked, the images open on the product page where your customers can add them to their Cart for purchase. Get started quickly using our Banner and Banner Slider blocks in Visual Page Builder or use our Banner Management System in Management Interface. The content sections could contain sections about Featured Products, promotions and Latest News. Use a Product Slider block in Visual Page Builder to quickly add products to the Featured products content section, or use Latest Listing Slider to add blogs or news to your page.

More information

Typically, consists of links that are anchored to the bottom of each WebShop page.

These elements are displayed in two ribbons.

  • Ribbon 1: Call to action for your customer to sign up to your newsletter. This can be integrated with one of our marketing tools, such as MailChimp or Klaviyo.

  • Ribbon 2: Multi-column menu, containing contact details and three configurable links.

    • To view or edit what you see in the Footer, open Management Interface, select Builder under Settings and navigate to Footer. Update what you would like to see in each footer link by selected a previously-created page from the drop-down menu.

More about themes

The theme you apply or create for your WebShop can be as unique as your business. A theme is your variation of a chosen template (either Forta One or Forta+) that includes your branding, graphics, images, styling and content. It provides the final look and feel of your WebShop.

Check out some examples of pre-defined themes, which can be applied and modified during onboarding using our design and content tools, such as Visual Page Builder. Visual Page Builder gives you granular control over the look and feel of each page and what content each page contains, using intuitive drag and drop functionality and interactive configuration controls. It provides you with a set of blocks that you combine to build a page that suits your needs. Alternatively, start from scratch and add your branding and content using Visual Page Builder to the starter Forta One or Forta+ template.

Tip

You always have the option of creating a custom template or theme, which is specific to you with a non-standard layout or feature set. Remember that additional costs may be associated with these, and they are not forward compatible or maintained as standard.

Contact our support team or your Customer Success Manager, who are happy to talk through the options and costs associated with extending Forta to suit your business needs.

Examples

Example 1 - Food and Beverage
Example 2 - Building Merchant

Example 3 - Spare Parts

Want more information?

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.