Managing Accounts and Fronts in the Styla Admin
- Michal Wojtas (Unlicensed)
- Fabian Frei
This page describes what entities you need to set up, how you manage them and the tools with which to do this. Styla provides this for you to be able to manage all settings yourself, including CSS for your modules. The UI is still far from perfect and most of settings are configured simply in raw JSON nodes.
On this page:
Styla Admin is an online tool that lets you manage Styla Frontend accounts. It is available at https://admin.styla.eu/. You log in with the credentials you receive from your Styla Onboarding Manager after your contract is signed. You use the same credentials for logging in to Styla Editor at https://editor.styla.eu/
The below are the most important actions you can take in the Styla Admin:
update your front settings
create new users (depends on user’s privileges)
create new fronts (depends on user’s privileges)
You will only be able to manage fronts and users in your organisation/front scope. If there is any specific front you need to manage but don't have an access to, you will need to ask Styla for help.
Organization, front and user
In order to set up a fully functioning Styla environment for a new client, you'll need to configure three different levels of entities. The table below discusses each of them briefly.
Entity: | Details: |
|---|---|
Organization | This is the highest level which in most cases will equal a client owning multiple brands and employing multiple people. Organization groups all of these and lets you share access to all or only some brands to specific people. |
front | This is the intermediate level which in most cases will equal either a client's brand (if available only in one language/country) or once of its language/country versions (if multiple locales available). If the parent brand's website, on which the Styla content is to be included, is available in multiple locales, you will need to create one Styla front for each of them. Then you will need to configure your integration with Styla in a way that uses a specific Styla front on a specific website's locale. This way you can publish content in language matching each of the website's locales and also use product inventory from a specific country and with prices in a matching currency to create Styla content. Each front can source product data from a different “headless“ e-commerce application. |
User | This is the lowest level which in most cases will equal a person working for your client. A user (login+password) can also be shared by multiple persons if they don't need a separate one for each of them. You can apply four privilege levels for each user on each organization/front. So it's a matrix that enables a very granular access levels, from bottom to the top:
All of these can be applied on an organization or front level. So user A can be able to only create pages (but not publish them) on front X while publish them as well on front Y while user B can be do everything on fronts X, Y, Z that are part of their organization. |
Steps to set up a new front
For every new website, you will need to start creating the entities above from the top. You will only need to create them if Styla has not created them for you before. These are the steps to take:
Go to the "Your Organizations" tab, click the "add Organization" button, fill in the name field and save the changes. There are no other settings here. For one company with multiple websites you will only need one organization hosting multiple fronts.
Go back to the "Your Organizations" tab and click your newly-created organisation's name to enter it. Then click the "Create a front" link top-right. On the resulting screen fill in the front name and click "Create". If you need to create multiple fronts, prepare a list beforehand. You can avoid later misunderstandings by keeping one convention, for instance: mydomain-en-gb for English/Great Britain and mydomain-de-de for Germany/German.
Go back to the "Your fronts" tab, find your newly-created front and enter it to edit settings. You will need to enter a simple JSON into the "FRONT CONFIGURATION" tab and switch some feature flags ON. More details about settings below.
Repeat this process for every front you need to create.
Now go to each of the newly created fronts and and click the "Create User" link top left. Then fill in the following form with user's Email (will serve as a login, Styla won’t be sending any messages to it), name, surname and password. It makes sense to create passwords with an online tool like this one and then obviously save them to be later shared with the client.
If you need your user to be able to access all fronts in your organization, create the user in the organization instead of a front.
Once you create a front, users with the front in their scope will be able to manage its content in the Editor athttps://editor.styla.eu/{$frontName}/pages.Make sure to apply the appropriate User Roles (mentioned in the table above) to each of the newly created users in the organisation or front context.
Once you've gone through the steps, you can move on to creating some example content in the Editor and configuring CSS for the new client which will be much more time-consuming and is explained on this page.
front configuration JSON
For every newly-created front, you will need to paste a simple JSON snippet with some basic config into the "FRONT CONFIGURATION" tab. You can use the JSON below as a template.
{
"url": "https://mydomain.com",
"locale": {
"lang": "en",
"regions": [
"DE",
"GB",
"US"
]
},
"shop_settings": {},
"shop": {},
"integrations": {},
"customModules": []
}How to set this up:
lang and region - these fields matter to search engines and need to be set up with ISO language and country codes that search engines understand.
Do not set the region of a customer unless you want to restrict the entire website from showing up on search results like (example: Google) outside of a specific country! If you only want to set the language, don’t set a region (just omit it).
url - this needs to be filled in with the (sub)domain on which Styla content from this domain will be embedded, including the protocol. The field will be used to construct canonical links. So setting it up wrongly will result in a search engine penalty.
You will learn how to fill in the other the JSON nodes on the following pages:
"shop_settings","shop"→ Connecting to your BigCommerce"integrations"→ Search results"customModules"→ Custom Modules
Feature Flags:
The front view also features some switches for features that can be activated for a specific front. You will need to activate some of them for the front to work as expected. Some of them should only be activated on client's request.
Feature flags explained:
dunning - switch it on if a client hasn'T paid their invoices. It will show a reminder about this in the Editor.
disableAutoSaving - disables auto saving your content in the Editor. Otherwise the autosave will happen every 30 seconds.
use_non_retina_images - if switched on, this will make Styla front-end not load higher resolution images for retina displays. Switch it on (and lower the image quality from imgix in Them settings) if your client is unhappy with loading speed.
The REINDEX button is not a feature flag. It triggers re-rendering process for all category and product pages (.html files) based on updated product data from the shop’s API. Only use it if you have updated the settings in the shop or shop_settings nodes. Any product changes done in your shop will trigger the re-rending process automatically anyway.
Other tabs in front settings
The other three tabs you can see in your front settings are used to configure some other settings:
THEME SETTINGS - used to configure font formats, colours, page margins - more on this page: update your front CSS
MODULE SETTINGS - used to configure specific CSS per module type - more on the page above
HOSTED DOMAINS - used to set up CDNs to point your website domain to - more on Pointing your domain to Styla Frontend