Setting up Styla Frontend

8 Steps to get you started!

1. Account creation and styling

Whether Styla will create an account for you or you will set up Styling and CSS. The following will tell you how it works.

Styla does not use style sheets of any page it is embedded on. Instead, style definitions are loaded by the JS you embed your Styla content with and need to be configured.

Your Javascript CSS

You only need to reference one JavaScript file to have all Styla resources loaded on your website:

  • Your CSS most likely won't interfere with Styla's and vice versa as our selectors are very specific and uncommon.
  • Styla JS can also load any fonts that are referenced in our CSS. But in case your front-end loads them already, Styla will only define font-family rules to use exactly the same variants and not load anything twice. Styla itself can load fonts from various sources like: fonts.com, Google Fonts, typekit. We can also host font files ourselves.
  • Styla CSS is divided into three sets of rules:
    • Theme: font-family, font-size, line-height and other font properties per content class like headlines, body copy; list of colors to be used for each of them,
    • General layouting guidelines mostly amount of white space defined by gutters, padding, margin,
    • Style settings for a specific module that can override settings from the general theme.
    • Style preset which overrides the default style set for a specific module - this way you can reuse several variants of it
  • Styles for a specific module can be further overriden with Style Presets that you select from a dropdown when adding a new module.
  • This helps you using several variants of a given module. For instance: banners with blue and red buttons for different campaigns or sections of your website.
  • Also, fonts and colors can be changed freely on single instances of text and banner modules. As a result, there are four cascading levels of CSS:
    • General settings for an account,
    • General settings for a module,
    • Style Preset for a module,
    • Style overrides for an instance of a module.
  • Styla modules are fully responsive and Styla JS "knows" what size of view port it is displayed on. In addition to the four above cascading levels, every CSS property can be separately set for two sizes (for each of the four levels listed above):
    • general - with a set max-width which usually reflects the width of your main content column,
    • mobile - below the single breakpoint Styla layouts use, which can be set for your account. Modules below this breakpoint can have different font properties, paddings, colors and any other CSS property.

What you can provide to make us help you

You need to define your styling, especially:

  • What font-families with what further font properties you want to use for specific content elements like: headlines, body text, buttons, banners, product name, product price etc.
  • In case you need Styla to help out, please provide Links to examples of pages using these settings - they will let us understand better and configure your styling to match that.
  • We will also need the link to the website on which Styla content will be embedded. If you need us to help and the website is still in development, we'd be glad to get a stage access or even flattened designs of its front-end.
  • Also helpful for Styling via Styla is a a CI guide, especially the part about online presence and specific guidelines for typography, colors and content formats on websites.

If Styla does the styling on your behalf, you will receive an example page with all possible modules for you to see how the style works there and ask you to review it.
The best way to review it is to create several pages that you want to build anyway, so that you can see how the style is used for specific modules, how it changes from desktop to mobile view ports and send us feedback with any changes you need.
After your Styla content is launched, we can update your styling and add new presets.

When reviewing the appearance of Styla content, please have in mind that modules can be reused and what really matters is not for the style to work on one very specific layout, but on any layout you can build with these modules. The more specific the style for a module, the less flexible use you will have down the road.

When your styling sees limits

In general, the only thing that limits Styla when changing the appearance of Styla modules is the HTML structure of the modules as we can apply every CSS property supported by browsers as long as we have a tag to apply to. Therefore sometimes it is not possible to exactly reproduce a look of an element on your website because a Styla module simply has a different HTML structure.

That being said, we can find workarounds for most appearance-related issues. And we can also build new modules on client's request, especially if they benefit all clients of Styla.

The quickest workaround is usually the HTML module that can be used to host any HTML structure with custom classes and custom CSS as well as JavaScript code embedded in an iframe.

2. User creation

Styla will create users with logins and rights for your domain.

After these have been provided, you can log into your account that will be empty. You may already start filling in content. Just keep in mind, that styling changes will change of the look and you shouldn't try to work in changes via the editor styling, if the basics of your CSS and styling will still change.

3. Adding default pages:


Once the account has been created, Styla will add default pages to the account like Cart, Checkout, and anything else that has been discussed prior.

4. CDN creation:


For the creation of a CDN, you will have to use a DNS validation method to verify that the website is in your control. For this, we will ask you to generate a CNAME entry with information that we will provide to you. This will look like similar to the example you see below. This entry has to be made in your DNS config.

5. Bases creation


Styla will then create the Styla "Bases" in your account to allow the batch editing of your website's different areas including navigation.

6. Connecting BigCommerce

Creating a token

To connect to your BigCommerce store, you will have to go into BigCommerce, then click "Advanced Settings", then click "API Accounts" and then choose to "create a V2/V3 API Token".

Enable all permissions for the token when creating it in Big Commerce.

You will pass the token to us so that we can hook up your account with your BigCommerce store.

Here you can see how you can get to the page in BigCommerce:

Passing over your store URL (aka "permanent address")

In a second step, please provide your storeURL or the "permanent address" of your store as it is called in BigCommerce. It looks like this:

https://store-zcabt6ht3y.mybigcommerce.com/

You can find your store's permanent address by logging into the BigCommerce Account Dashboard. From there, click your store name within the My Account page. Then, scroll down to Details to see your Current Domain, Permanent Address, and Control Panel address URLs.

7. Prepopulating your store with product information


Now that we have your BigCommerce store set up, we will start the prepopulation. This will create a product detail page for every product and category pages according to the information you have entered into BigCommerce. 

After that, the store is up with all products and you can start creating additional pages around that.

8. Custom module creation


If you want to create additional modules that work different than the standard modules in our editor, you may do so by following the Custom Modules creation that is explained here:  

Go to custom modules page

Done! Now you are all ready to go and work with Styla as your frontend!