Introduction

This documentation website serves Styla partners, customers and prospects to provide information on how Styla Frontend works, guide them through the setup process and provide detail information on each of its features.

This documentation uses some Styla-specific terms. Please consult the Glossary if you unsure of what a term means.

What Styla Frontend is

Styla Frontend is the “head“ for a “headless“ e-commerce store. It delivers all pages to a shopper an online store consists of. It comes with a content and style editor that lets you publish and manage content & all pages on the entire purchase journey. It uses data from your e-commerce application to automatically generate category and product details pages and interacts with the e-commerce application’s API in the background to manage users, their baskets, payments and checkouts. This ecommerce application, the store backend, remains the place where, product data, inventory, orders and billing are managed.

Note that Styla Frontend is different from Stylas other products, CMS and Magazine. Those only deliver content into the frontends of other monolithic shop systems, whereas Frontend runs the entire shopping experience decoupled from a headless e-commerce store. Styla Frontend contains some of the same great features and functionality of CMS and Magazine, though.

Styla Frontend features

A full list of current features can be viewed here: Current Styla Frontend Features.

How Styla works

Styla Frontend combines content and product data from multiple sources and pre-renders it into static .html files (with JavaScript included where needed) according to layout and styles set by the Store admin. These files are delivered very fast to shoppers via CDN. Events in Styla or BigCommerce that can trigger updates of these files.

Where content for each page comes from

The data used to generate Frontend pages comes from multiple sources: BigCommerce APIs, content and templates managed in Styla Editor, settings and CSS managed in Styla Admin, other external data and JavaScript. Read more about this topic here: Base templates.

Prerequisites

The below are what you need to build your shop frontend with Styla:

a BigCommerce store,
An API key to your BigCommerce store (see Connecting to a BigCommerce instance),
a product inventory, category structure and order workflows configured in your BigCommerce store,
a style guide or an idea for how your Frontend should look like,
content to fill your pages with,
a domain to point to your Styla Frontend

Styla Frontend Documentation