Glossary

This page lists terms used on this documentation that might need some clarification. Some of them mean something different in the Styla Frontend than they do in general.

Account/front settings

General setup of a Styla account, including settings, feature flags, source of product data, CSS.

Base

Page bases are templates into which either your product content from BigCommerce or Styla content from the Editor will be inserted. The basic idea behind bases is that all pages need to share the same header and footer which, in turn, consist of multiple modules. Product details and category pages generated based on data from the BigCommerce API and Styla content created with the Editor will be displayed by Styla Frontend between these header and footer.

Category page

A page on which category listing (a grid showing all products) is displayed. It uses Category base defined in Base manager in the Editor.

CSS

Cascading Style Sheets, a set of properties defining website appearance: how elements on your website are laid out by the browser, what font, colours and other styles they use.

In this context Styla CSS is referenced, so rules defined by app defaults, theme settings, module settings and CSS overrides for a single module.

Custom module

A module that is developed from scratch or based on another custom module to cover a specific use case not covered by any of the default Styla modules. Only appearance or functionality and data structure can be customised.

Custom modules are listed in the Editor’s left sidebar as any other module but usually available in one account only.

Front

(aka Domain)

The basic entity configured with Styla Admin for which all the settings are configured and which is responsible for delivering Styla Frontend. Styla provides a front per website or per language version.

In Styla data structure, fronts are children of Organizations and parents of Users.

A Front used to be called a “Domain” in Styla until mid-2021. It’s the same thing. Sometimes you might find the word “domain” used to describe a front in older documentation or screenshots.

The documentation also mentions domains in the general sense, so DNS domains used to reference web resources like websites.

Feature flag

A setting that can be either ON or OFF and activates or deactivates a specific feature for a Styla Organization, Domain or User. Most of such settings are configured in Styla Admin.

Headless

This term refers to decoupling of the backend and frontend layers of a web app and a possibility of delivering the same content with multiple frontends exchanging data with one or multiple backends via an API.

This documentation uses the term to denote e-commerce suites like BigCommerce of Shopify that can provide product and shopping flow data to Styla Frontend which becomes a “head“ for the “headless“.

Modular Content

Modular Content are pieces of content (usually one or two modules) assigned to a specific position (a slot) in a page base and can only be displayed on a limited number of pages. The use case for this kind of content is, for instance, to display a customised intro text for all subcategory pages in each category. Or to display a teaser banner for an article about hiking on one hundred hiking boots details pages but not on cycling shoes.

Module

Styla module is an individual piece of content you can drag and drop on your page (or Modular Content) and fill with content. Each module serves a bit different use case and has a different data structure. For instance: a banner module consists of an image, a rich text field and one or more CTA buttons. Modules also have a default CSS applied which can be customised with module settings and with the Editor UI.

Module settings

These are the settings applied in the MODULE SETTINGS tab of your Styla Admin. In this JSON you can override default settings and default CSS applied to a certain type of module like banner or text. Module settings use some higher level settings from Theme settings like font formats and colours.

Onboarding manager

Onboarding manager is a person who is your primary contact at Styla and supports you during the onboarding/setup process.

Organization

This is an “umbrella“ entity in Styla data structure. It might not be needed at all but it makes sense to set one up if some people in a company need to be able to manage several Styla Frontend domains/websites.

Domains and Users are children of Organizations.

Page path pattern

The pattern defined for the SSR to use when rendering pages. It is configured in the Editor in Bases manager. If you set it to use a /pages/ prefix or an .html suffix, all static HTML files rendered by Styla Frontend will have it in their paths.

Preset

A group of settings and CSS properties configured in the Editor’s Presets manager to override the default settings configured in Styla Admin’s Module settings. They are applied in the Editor in the Settings tab of a specific module.

It makes sense to configure a preset if you need to have two or more versions of a module with a different appearance.

Product data

A list of product inventory (SKUs) as well as properties of each of the SKU (images, name, URL, price, availability etc.) that are fetched by Styla Frontend from a “headless“ shop’s APIs it has an access to. Styla Frontend uses these to render product details and category pages and to guide end-users through the shopping process.

Product details page

A page with product/SKU details like: images, name, description text, price, ”Add to cart” button etc. Styla Frontend uses product data from the shop’s API merged with Styla Product Base and CSS to render such pages as static HTML files.

A re-render is automatically triggered when product data is updated in the shop.

PWA

Progressive Web App, a standard set for web apps which makes search engines grant a ranking bonus for websites meeting the requirements. Websites delivered with Styla Frontend are PWAs as long as some metadata are configured for them.

Re-indexing

The process of fetching product data for all products from the shop’s API which, in turn, triggers re-rendering of all product details pages for which changes are detected. The re-indexing can be triggered by the “RE-INDEX“ button in the DOMAIN CONFIGURATION tab of the Styla Admin.

Re-rendering

The process of rendering (SSR) static .html files Styla Frontend consists of. It can be triggered by multiple events like updating a page with the Styla Editor or re-indexing product data.

Row

An element of a Styla Frontend page layout in which modules are gathered. One to five modules can fit in a single row. Rows have several settings that can be managed in the Layout tab of the Editor. Dragging and dropping a module onto a page automatically creates a row.

Slot

A placeholder that can be dragged and dropped onto a base or a page that can display Modular Content contextually. You can assign multiple Modular Content pieces to one slot and make each of them display only on some pages using a given base. You manage them in Styla Editor’s slot manager.

SSR

Server-side rendering is a process in which Styla Frontend merges content from multiple sources and outputs static .html files that are hosted by Styla and routed to by your domain. These files are what your browser renders when sent to a Styla Frontend page.

Styla Admin

A web interface at https://admin.styla.com/ that lest you manage your account settings including CSS and configure custom modules.

Styla Editor

A web interface at https://editor.styla.eu/ that lets you manage your Styla content: pages, bases, Modular Content.

Theme Settings

These are the settings applied in the THEME SETTINGS tab of your Styla Admin. In this JSON you set up font formats, colours and and several other properties that influence your content’s appearance. These settings are inherited and can be overriden in the MODULE SETTINGS tab.

User

The lowest entity configured with Styla Admin. It is basically a login you can use for both the Styla Editor and Styla Admin (if your privileges permit this).

In Styla data structure, Users are children of Organizations or Domains.