/
Current Styla Frontend Features

Current Styla Frontend Features

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

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

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

  • Best-selling

  • Alphabetical sorting

  • Pricing sorting

  • Created date sorting

  • Last changed date sorting

 

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.

Sale Pricing Documentation

 

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

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:

  • Product name

  • SKU

  • Product description

  • Product variants SKU

  • Categories which it belongs

 

Category search by fields

Live

Categories can be found by:

  • Category name

  • Category description

  • Subcategories

 

Content pages search by fields

Live

Content pages can be found by:

  • Title

  • Description

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

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

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

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

  1. Banner / Slider

  2. Navigation (Manual)

  3. Menu (Automatic Categories from BigCommerce)

  4. Image

  5. Accordion

  6. Product tile

  7. Product Listing

  8. Product Details

  9. (Rich-)Text

  10. Video embed (Vimeo/YouTube)

  11. Breadcrumbs

  12. Search

  13. Divider

  14. Contact Form

  15. Product Reviews

 

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

  • Background colours and images

  • Widths, alignments

  • Margins, paddings, sizes

…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