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

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 (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: 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.

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

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 of bases:

A default base: This base is applied to all pages, it usually contains the header with a navigation and a footer

A Product base: This base is applied to all product detail pages. It is nested inside the default base and therefore inherits header and footer from it

A Category base: This base is applied to all category listing pages or product listing pages. It is nested inside the default base and therefore inherits header and footer from it

Currently, there are only the described 3 bases and their nesting is fixed. No additional bases can be added or nesting changed. (That is however the intention to make the Page Base system more flexible and powerful in the future)

Slots & Modular Content

Live

Modular Content allows users to make targeted or site-wide changes to content affecting thousands of pages with a single edit.

Slots enable users to selectively choose which content gets displayed where, by simple business rule filters on specific page types like PLPs or PDPs. Slots can be defined within bases. Then modular content can be assigned to slots, based on simple business rules. Content will then be rendered in those slots if the business rules are met.

Extremely fast page load speed

Live

Allows page owners to have best-in-class page speeds by using every relevant trick in the book to load pages fast. In most cases, page speeds above 90 (out of 100) are achievable (but not guaranteed).

Best page speeds are achieved with no additional JavaScript and external third-party extensions loaded. If customers choose to add them, page speed will likely be impacted.

Page speed is also impacted when very large pages with many modules are built, or numerous large images are added to any page.

Despite the above, page speed in Styla currently is faster than any comparable ecommerce frontend solution out there, ceteris paribus.

PWA — Progressive Web App

Live

All pages generated by Styla are PWA compliant by default. PWA allows website users to add the site as an ‘app’ icon on their phone home screen. The content data is cached once first visited, and all pages that have been visited before can be used offline or with unstable internet connections to a large extent. PWA compliance is favoured by Google when deciding search result rankings, Styla sites tend to rank higher.

No push notifications can currently be sent to Styla PWAs. Checkout and add to basket are not possible offline.

Image optimisation

Live

All images in Styla content are automatically resized & quality optimised to match a user's screen size, so that only the smallest required file is served. This optimises loading and rendering speed and download size, especially on mobile connections. Compression level can be set on a per-front basis to allow speed vs. quality trade-off decisions.

All images on one front are optimised to the same compression level.

Content Delivery Network (CDN)

Live

All Styla pages and their content are automatically hosted on a fast global CDN to ensure the fastest possible delivery to shoppers.

Serverless infrastructure (mostly)

Live

A Styla frontend doesn't use a traditional “web server” for hosting, and thus enjoys the following advantages:

No additional server, hosting, or infrastructure costs above the cost of the Styla system itself.

Browsing does not get slower with more traffic, even with EXTREME traffic loads.

Needs zero server maintenance, upgrading, infrastructure servicing or system administrator know-how from customers.

Only very extreme loads for adding to basket, logging in, going to checkout and filtering products could have impact on the speed of those actions.

High uptime & resilience

Live

Even if Styla's internal systems go down, the frontend stays up and browsable for shoppers, as browsing does not depend on our systems or servers for uptime.

Even if any or all BigCommerce systems go down, a Styla frontend stays online and browsable to a shopper.

Adding new or changing existing content does require Styla internal systems to be running, so the ability to do this can be impacted temporarily by downtimes.

Should CDN procider or AWS S3 services have an outage STyla sites will be affected.

Login, add-to-basket and checkout functionalities do require BigCommerce systems to be available and won’t work if the BigCommerce system is down.

Multi-language capable

Live

Users can run several language or regional versions of their website in the same Styla organisation. Each language and region has its own ‘front’ in Styla, and each is connected to a different BigCommerce store.

Clients can choose to link to the homepage of the other language version of their website in the header or footer (but not to dynamic pages or products).

All funtional text strings on each page can be edited to get the right wording for each language/locale. (eg. 'checkout' vs 'basket')

Content pages, categories, or products are not ‘linked’ between language versions.

Content or Pages can’t be copied over to another language front.

Analytics (via 3rd party providers)

Live

User can use the Google Analytics embed JS or any external analytics solution, if it can be embedded in an HTML page using a script.

The native BigCommerce Analytics are not supported.

Currently no events are sent to GA by default.

Transactional Emails

Live

Styla uses the BigCommerce built-in transactional email system, and all those emails and templates can be managed in the BigCommerce system.

Because of limitations of the BigCommerce system, some transactional emails like forgotten password and user registration are sent directly from Styla and don’t use the BigCommerce management system.

External & Third-Party Scripts

Live

Users can embed any external script that they could also embed on any other site. This could be a custom-written script or an embed script of a third-party tool. This can be done directly or via Google Tag Manager (GTM).

Any additional Script that gets executed on the client side will likely affect page speed, although there are measures in place to minimise the effect.

Product Reviews

Live

Users can see Ratings and Reviews that have been left for a specific product if they are returned from the BigCommerce API.

Shoppers can’t leave reviews yet.

Custom modules

Live

Enables developer users to create custom modules that extend the functionalities offered out-of-the-box by the Styla Editor.

Custom modules can be written in JavaScript / TypeScript and Handlebars templates to produce almost any custom functionality. custom modules can consume product and category information, most data available via BigCommerce APIs, and can also pull in external data from most external post/get API calls that allow authentication keys to be passed as parameters.

Custom modules, once written, can be re-used across pages or fronts.

If custom modules are written correctly, their code can be computed during our pre-render process and data from APIs embedded into static HTML, so that page speed is not impacted negatively by somewhat dynamic data.

Advanced coding knowledge required. Feature intended for experienced developers (from customer or agency).

Some limitations to freedom using Handlebars and certain BC data.

Styla currently expects JSON format as a response from external APIs.

Some custom modules can impact page speed, depending on how they are architected & written and which data they pull in when.

If external data is highly dynamic, it likely is not suitable for pre-rendering, so should be loaded via client-side JavaScript.

HTML modules

Live

Enables customers to achieve more complex & out of the ordinary content layouts and designs.

Any custom HTML and CSS can be added. Some JavaScript can also be used to create dynamic interactions, but it is disabled by default.

Basic HTML & CSS coding knowledge required.

Most JavaScript will affect page speed scores.

Organisation Manager

Live

Allows agencies to set up and manage organisations (i.e., a new client), fronts (i.e., One or more shops of a client) and users with differing permissions (one or more admin/publisher/editor/viewer users of a client).

Allows agencies and developers to edit styling, global front settings and custom modules per front.

The UI for managing styling of fronts is basic and code-based, using a JSON format that encodes CSS styles.

BigCommerce

Live

Not all ‘standard’ BC features are supported yet (see list above for what is definitely supported).

Known unsupported:

• BigCommerce Analytics

• Automatic Related Products

• Price Filtering

• Pick Lists

• BigCommerce BundleB2B (“B3”)

• The area with Customer Groups

• More complex discount rules

Limited support

• Multi-currency