Styla Features Overview

TLDR: This page contains some information what Styla is from a technical point of view. The content is here only to help you better understand how Styla works. If you work on an implementation for your client or employee then you might also just move on to another page. If you need more information on them, follow the links or just ask us via Email or on a call.

One Styla account per locale

Styla accounts are groups of content with set styling rules and lots of other features, that you can place on your website. You can create content for them with Styla's editor (see below). If you have different audience groups or locales, you should get one Styla account for each of these groups. 

  • A locale is usually a country+language or a currency+language. Styla creates one account ID and at least one user for each of them. Both account IDs and Users have ISO codes in their names, for instance: client-name-fr-be.
  • An account for each locale is created with entries in several services that Styla consists of, for instance our layout engine an RSS feed, a sitemap, SEO API endpoints, access to and parameters like for instance: CSS, a source of product integration and currency, target domain and a root path. You cannot define these parameters on any lower level, so the same CSS and currency are used for all Pages and Magazine stories, not a different one for each of them.
  • Front-end messages and text on Styla content UI are automatically localised for each language but they still can be overrode if you need to.
  • If you have several accounts per one country (example: CH-DE, CH-IT, CH-FR or EU-EUR, EU-SEK), you can embed each of them using a different account ID accordingly. As a consequence, the CH-DE locale will use Styla JS from while the CH-IT from etc.
  • In general, content is written independently for each account (as they have different access) but they can be grouped in one organisation to enable the following functionalities:
    • pages and stories from one can be published to another one automatically (and canonical links set accordingly),
    • just one or more pages from one account can be manually copied to another one,
    • stories from different accounts with different locales can be grouped and a link rel="alternate" with an hreflang tag to each of them set accordingly,
    • a user can log into and edit content for more than one account/locale.

Single-Page Application

Styla content pages are single page-applications rendered by JavaScript which means the page initially requested from a Styla server once and then dynamically updated for subsequent pages. This is especially important for Magazines and has several consequences, among others:

  • The JS that you embed on your page to have a Styla content rendered, makes XHR requests to Styla servers but doe not retrieve further pages.
  • Handling external requests (routing) for URL that don't exist as separate HTML documents needs to be handled by your web server/CMS/shop application. It resolves requests for Styla's root path and Styla JS takes over from this moment and renders specific content in browser window, depending on what URL requested in the browser.
  • Styla content is embedded on just one page of the client's website, but static HTML content for search engines for each URL rendered is provided by Styla SEO API that needs to be integrated with.

Static HTML content delivered

Apart from rendering content in browser window with JS, Styla provides an API which delivers JSON with tags that can be rendered server-side and included in <head> and <body> tags of pages on which Styla content is embedded.

This means that:

  • crawlers that don't understand content rendered with JavaScript get a no-JS version to work with,
  • this no-JS covers all the content human users with JS on will see in their browsers,
  • the SEO API provides structured data, including:
    • tags for breadcrumbs,
    • author, publisher, organization, title, description,
    • published and modified date and time,
    • products,
    • images, videos,
  • Facebook, Twitter and any other medium you use to link to Styla content will get data their need to render their preview,
  • robots: noindex, follow can be set for specific pages in

Read about integration with Styla's SEO API on this page.

You can read a detailed list of Styla's features that are SEO-relevant and how we improve loading speed on this page: SEO and Page Speed

Styla CMS at

Together with your accounts, you get an access to with which you create and edit Pages, Magazines and Modular Content, upload images, embed products into stories. You can also:  

  • Log into it with a user name and a password created for you,
  • Set pages to be published and unpublished in the future,
  • Embed videos, define structure of page: headlines, paragraphs, add links and basically do whatever you do in any web content editor tool,
  • Edit META tags and set alt tags for images,
  • Assign categories and tags to Magazine stories (which will then be listed on a category or tag page),

Every new client gets a training on how to use the Editor and tips and tricks for creating content with Styla.

Styla content is modular

Any page you create there consists of modules that you can drag&drop into place, fill with content (text, images, videos, products), rearrange on a page, copy. Currently, the following modules are available:

  • banner,
  • text,
  • image,
  • video,
  • product slider/grid,
  • hotspot/editorial shopping,
  • magazine feed,
  • Instagram feed,
  • divider,
  • navigation/menu,
  • html.

Modules are grouped in rows and there can be up to three modules in a single row. You can set modules to take 1/3 or 2/3 of a row's width. You can also set some other properties for a row like: margin above it, padding inside it, width: full window or row width.
Read more about the modules on this page.

Products can be used in content

There are two options for interacting with products from your shop in your Styla Content:

  • the "Add to Cart" overlay - a click on Styla content adds a product ID to your shopping cart,
  • the "Go to Product" overlay - a click on Styla content opens a product page in your shop

The first option requires a higher integration level since you have to display product details (price, variants) and have a callback to add to cart. Product data can be sourced by Styla either from a static file or an API. Read about our product integration on this page.

Product data is used in two modules: product slider/grid and hotspot/editorial shopping.

Of course, Styla content without products at all is possible as well.

Images are optimised

Images used in Styla content are:

  • all hosted by Styla and served from our CDN to be loaded faster,
  • automatically resized using media queries to match a template and view port so that only lowest size required size is served to save loading and rendering speed,
  • their compression level can be set on a per-account basis,
  • background/white space can be removed automatically with a click in which is very useful for product photos,
  • can be freely manipulated in rotated, cropped, color balance, brightness and saturation changed etc.

Styla maintains several plugins

They reduce all integration effort to just installing and configuring them:  

  • they are available for some e-commerce (shops) and content management (CMS) solutions,
  • if none provided for the applications you use, a custom integration will be needed with four main steps listed in the table on this page,
  • if you want to use Styla on a PHP-base website, you can develop your integration based on our PHP SDK - which will make this work much easier.

Please find a list and a description of what they do on this page.

Uptime is Monitored by Styla LiveChecker

Each new account launched for a client is being monitored 24/7 by a tool that checks if:

  • the Styla page itself is online
  • the Styla page is embedded correctly on the client's website and displayed there
  • source of product data for your Styla pages is working correctly and products can be added to the cart.

We call this tool the LiveChecker. It works by simulating user clicks on the content hub. The LiveChecker is able to handle most basic popups (like cookie policies, promotionals, ...), but will get disturbed by more arcane implementations.

For instance, if there is one popup/overlay message displayed on first visit to inform about cookie policy and another one displayed periodically to inform about special discounts, then the LiveChecker will not work properly. As a consequence, Styla will not be alerted right away, if any of the features on the list above is not working correctly. Please be aware of this.