Current Styla Frontend Features
- Fabian Frei
- Antonio Elena (Unlicensed)
- Alexander Kong (Unlicensed)
- Michal Wojtas (Unlicensed)
This document gives an overview of the general concept of Styla Frontend and all features that it currently has. Styla Frontend constantly gets new features and improvements to existing ones, so this is a living document that will be updated with each significant release.
Last update: Oct 14, 2021
Introduction
Styla Frontend is the “Front” of your shop that your shoppers use to browse and purchase your goods. It’s what shoppers see and interact within the browser on their computers or phones. It is connected to a back office shop system (like BigCommerce) where it fetches all product & category data it needs. Styla has its own admin & editing area, where styling and all non-shop-system content can be managed.
Content & page types
Styla creates and manages the following types of content and pages.
Content type | Description | Source of truth |
|---|---|---|
Page bases / Layout Standards | A base defines layout and global content for content pages, PDPs and CLPs. A base often contains the site’s header and footer, for example. Bases can contain 'content slots' While Page bases are nestable and inherit content from their parent base, the editor does not allow to have multiple product or category bases just yet. Additionally, Styla currently supports a ‘default base’ for all content pages, a product base for PDPs and a category base for CLPs. | All: Styla Editor |
Product pages (PDP) | An automatically generated page that shows product details | Product data: Shop system Layout: Styla Product Base |
Category pages (CLP) | An automatically generated page that lists products of a category | Category data: Shop system Layout: Styla Category Base |
Content pages | Pages with rows of content manually created in the no-code editor. Can be homepage, landing pages, blog pages, marketing pages, general content pages. | Content: Styla Editor & Styla Page Base |
Modular content | A self-contained ‘snippet’ of content, created manually, that, based on rules, can be injected into ‘content slots’ that can be added to bases and content pages. | All: Styla Editor |
Content and pages are managed as follows:
Features
Styla has the following features grouped by feature category
Ecommerce & Merchandising
Feature | Description | Current noteworthy Limitations |
|---|---|---|
Checkout | ||
Checkout (Native BigCommerce) Live | Users can check out of the shop using the standard embedded BigCommerce one-page checkout, as offered in the BigCommerce checkout SDK. | The BigCommerce native checkout does not benefit from the speed advantages that the rest of the frontend enjoys. |
Product Catalogue | ||
Custom Fields Live | Custom fields allow shop owners to extend the information about a given product, which can be used for adding custom filters or accessing them with custom modules. Custom Fields are available on product pages, category pages and custom modules using the product content type to allow users to add certain products to a module. | Custom fields won’t be displayed in the PDP by default, but will be available in the context response. This means that Agency partners can access to this information to extend the PDP, or add additional functionality to the site. |
Product data synchronization Live | Automatically keeps any currently displayed product data changes (images, descriptions, prices, etc) in the shop system reflected on frontend product listing pages (category pages), and product detail pages (product pages) by using BigCommerce hooks. |
|
Product Variants Live | Products with variants defined in BigCommerce are displayed in the PDP of their main product and share the URL of the main product. When searching for a product variant, the user is directed to the main product. Sorting considers varying properties of product variants |
|
Filtering options in category pages | ||
Filtering by product attributes Live | Users can filter products by properties using most standard BigCommerce Filters, including the ‘custom field’ filter method. Filter facets can be shown on PLPs and SERPs. | Filter facets currently can only be displayed horizontally across the whole width of a page and not vertically in a column. |
Product options via custom fields Live | When a custom field matches a product attribute, this attribute will appear as a filter option in category pages. For instance, when “Colour” is a valid global filter, when a shop owner sets “Colour” as a custom field with the value “Blue” for a specific product, this product will appear as a result when a customer selects the “blue” value in the Colour filter. | Shop owners can set multiple product options via custom fields for the same product. Custom fields won’t be displayed in the PDP. |
Sorting options in category pages | ||
Sorting methods Live |
|
|
Manual sorting (sort order) Live | A products sort order number can be used to control how products are sorted on a category page when the sorting method Featured Items is selected. This is the recommended way to control precisely how products are displayed on a specific category. | Manual sorting is managed on product level, not on category level. |
Customer management | ||
Customer accounts Live | Shoppers can register, log in and out & view their profile. Shoppers can re-set their password. |
|
Order status page Live | Shoppers can access to their orders and view their details. |
|
Customer wish lists Live | Shoppers can add and managed items on a wish list. |
|
Pricing | ||
Bulk pricing Live | Specific products can be offered at a lower price if a certain minimum number of items is ordered. |
|
Sale Pricing (“Was / Now”) Live | Users can define a sale price in BigCommerce, which can then displayed alongside a struck “was” price on product tiles and PDPs. |
|
Merchandising | ||
Frequently bought together Live | Users can show products on the product page that are frequently bought together to shoppers. Shoppers can select which FBT products should be added to the cart (by default all products are selected) and can add them in one click. | This feature uses a custom field set on product level to manually render this section on PDP. Products that do not have this custom field set, won’t render this section. |
Product Stickers Live | Allows users to add visual labels to products via BigCommerce to highlight aspects of specific products in Product Listing pages (category pages). |
|
Search
Feature | Description | Current noteworthy Limitations |
|---|---|---|
Search (via Algolia) Live | Fast and clever searches through all products, their parameters, and all Styla content pages. Algolia is the search provider Styla supports at the moment. | The BigCommerce default search is incapable of supporting a headless frontend like Styla and therefore can’t be used. Currently, Algolia is the only supported 3rd-party search provider. |
Search catalogue synchronization Live | Updates done in the BC catalogue are automatically synchronized with the search provider. |
|
Product search by fields Live | Products can be found by:
|
|
Category search by fields Live | Categories can be found by:
|
|
Content pages search by fields Live | Content pages can be found by:
Updates to those fields in the Editor are passed to the search provider automatically within seconds. |
|
Instant result dropdown Live | Users who are searching on the website will see the first few results after they started typing the first 3 characters of their search string into the search field. |
|
Search Result Page Live | Users see a full search result page when they hit enter after typing in a search query. |
|
Product Attributes in results / Faceted search / filter search results Live | Allows shoppers to refine product searches based on multiple attributes like price, colour, size, and reviews. |
|
Product categories in results Live | Search results returns also relevant product categories. |
|
SEO
Feature | Benefit & Description | Current noteworthy Limitations |
|---|---|---|
SEO: Best practices for on-page SEO & Compliance checker Live | Assists content creators to achieve high SEO best practice compliance of technical on-page SEO before publishing content. If correct content is maintained, on-page SEO scores between 90-100 are achievable. | If content is not maintained, SEO scores will be impacted. If best practices for UI (i.e., minimum button sizes on mobile) are not adhered to, SEO scores will be impacted. |
SEO fields for Product pages Live | Values for Page Title, Meta Description fields are pulled automatically from BigCommerce for product pages. | If content is not maintained, SEO scores will be impacted. |
SEO fields for Category pages Live | Values for Page Title, Meta Description and SEO Keywords fields are pulled automatically from BigCommerce for category pages. | If content is not maintained, SEO scores will be impacted. |
“Href lang” SEO tags Live | All pages are marked with their region/language in “href lang” tags, so that search engines know the region and language of a page. This means search engines send users from specific countries to the pages for their region & language in a multi-language setup. | Currently a page contains only it’s own language / country but not references to other countries and translations. |
Styling
Feature | Benefit & Description | Current noteworthy Limitations |
|---|---|---|
Themes Live | Merchants can choose between several themes for their page | Limited theme selection at the moment. No good theme preview functionality at the moment. |
Styling & Style presets Live | The styling section allows admins to set styles for their entire frontend. From general font choices, colours, margins, paddings, borders, and shadows that apply site-wide to specific styling of single modules, page elements, HTML tags, CSS classes, or custom modules. Styling defined for a specific front/account, like colours, font formats, gutters can be reused across multiple custom modules as variables Changing style values at any time will automatically update the entire website with the new style with one edit. Once the styling has been set, it will be automatically enforced on all content that are added to the site, ensuring compliance with style guidelines on all elements like buttons, titles, and texts. | Styla is good at getting accurate implementations of most brands' CI/CD, style guides or design systems on a variety of screen sizes. The Styla styling system is not well suited to achieve a “pixel perfect” highly-varied custom design that a designer can achieve in a design software or a developer coding a custom website with lots of effort. |
No-Code Content Editing
Feature | Benefit & Description | Current noteworthy Limitations |
|---|---|---|
No-code content editing Live | All Styla content consists of modules that content creators drag & drop onto a page, fill with content like text, images, videos, products, CTA buttons, etc. Modules are grouped in rows, and there can be up to three modules in a single row. This allows for a wide variety of possible layouts without any knowledge of coding. | Content cannot be arranged in columns. |
Core content modules Live | Users can drag and drop these content modules into Pages, modular content or bases in the no-code editor
|
|
Module styling options Live | Each of these content modules have various options and settings that can be used to customise the appearance and layout of each one. Editors can assign styling options to each content module or the row it sits in on a page
…all from a list of customer predefined values, governed by the overarching style presets, so no coding knowledge is required. The full power of the editor is best experienced by building a page with it. | The no-code nature means that customising layout and style of core modules beyond the constraints of the layout system and of the style preset system is only possible via custom modules |
Blog / Stories content type Planned / workaround | Enables content editors to publish stories on a blog-style page in a structured layout automatically. Blog functionality can currently be immitated with a workaround. |
|
Mobile specific breakpoint Live | By default, all Styla content and modules work for all screen sizes. Editors can apply specific styles and options to modules for mobile only, or even choose to hide modules on desktop or on mobile, to optimise the user experience The mobile breakpoint can be freely set to a specific pixel width. | There is no specific tablet breakpoint. Tablets either shows the mobile version or the desktop version, depending on screen size and resolution |
Image editor Live | Allows content creators to resize, crop and edit images with cool filters and a wide variety of visual effects directly from the editor. Focal points can be set that will be observed when images are automatically cropped for different screen sizes |
|
Background colour or image in content rows Live | Enables content creators to set a background solid colour or an image as a background for rows. |
|
Page Bases Live | Bases enable users to apply default modules, content and styling to many of their pages at once. Bases are nestable, meaning that a nested base inherits content from its parent. Bases and nesting of bases gives editors the power to make site-wide changes to layouts, modules, and designs affecting thousands of pages with a single edit. There are 3 kinds |