Welcome to the documentation website of Styla Frontend, giving you all information you need to get to know Frontend, installing it, and using it.

Most important features

These are the features that make this product suitable for building completely new shop frontends if you have selected your backend already:

• Styla generates all pages as static HTML files with small scripts included only if needed for a specific module,
• It is very fast, PWA-compliant, SEO-optimised and includes http://schema.org markup,
• routing is provided by Styla and the only think you need to have your new frontend on your target domain is to point the domain to Styla CDN,
• product data and e-commerce features like adding to cart, login and checkout process are integrated with your shop backend via its APIs,
• product details and category pages are generated automatically by merging product inventory with page templates defined in Styla Editor (CMS),
• updates in your product inventory trigger automatic updates on your Styla frontend
• your page templates and content is, managed with the user-friendly Editor you might already know from the other Styla products.

The above feature set means that not only is your shop frontend independent and decoupled from the backend but also, that you may develop your new frontend integrated with the existing backend while still having the older frontend online.

How this works

The diagram below show basic architecture and actions happening in Styla Frontend. The SSR component produces static HTML files used to render your page content by merging content from multiple sources. You can influence this content directly with Styla Editor (page templates, page content and paths) and your shop backend (product inventory).

Differences compared to the other Styla products

The fundamental difference is the use case. While the Styla CMS (Landing Pages, Magazines and Modular Content) are included in content generated by a different web app, the Styla Frontend is a standalone solution letting you build any page for your e-commerce website. The features that Styla Frontend introduces are:

• it is in general much faster to load and render and is itself a Progressive Web App,
• it provides a proper page templating engine (example: 10000 product details pages generated automatically based on a page template you define),
• it does not require any custom integration nor installing any Styla plugins, it only uses open APIs provides by a shop app,
• it provides all the content that is needed to render a specific page (including its header and footer that in Styla CMS normally come from an external website): no external CSS or JS loaded, no external DBs or APIs connected to when loading a page,
• it features its own product and content indexing/search,
• no JavaScript is included unless needed for a specific module content that needs to be interactive,
• some new modules are available: product listing, login, slot, placeholder.

Commonalities with the other Styla products

While the basic principle and use case are completely different, there are still many common elements between these products:

• they both provide the same Editor to manage content and change page appearance,
• the same layouting principles: modules inside rows, one breakpoint between mobile and everything above,
• most of modules offered by both suites overlap, some are suite-specific,
• the same CSS structure and most of CSS class names,
• the same account structure/rights management principle: organisation > domain > user,
• the same approach to i10n: one domaine per locale (language+country),
• all images are delivered in the lowest size needed for a specific layout and view port,
• all Styla content delivered via a CDN,
• with both of them you can create and publish pages in a matter of minutes with both of them.

Steps to start using it:

This is what you will need to start using Styla Frontend:

• a shop with which Styla can integrate,
• set up product inventory, category structure and order workflows,
• provide guidelines/designs on how your Frontend should look like,
• create your website structure and fill your pages wit content in Styla Editor,
• in order to go live, point your domain to Styla's CDN with a DNS entry.

Go to the install Styla Frontend page

Now that you know the basics, give it a go and start installing Styla Frontend. Learn more here: