...
What do I need to do to serve my website with Styla Frontend?
Please check the “Prerequisites“ bottom of the Introduction page.How much does it take to launch a Styla Frontend?
Our general estimation is 1-2 months. This depends heavily on the number of your subpages and customisations you expect your Styla Frontend to deliver.Do I need to write code to create my Styla Frontend?
You don’t need to write any application code to launch the website. You will need to update your CSS for the Frontend to match your style guidelines. If you want to customise the default set of custom modules you, your developer or agency will need to write some HTML/CSS/JS code.Can Styla configure my CSS or build custom modules for me?
We don’t do this generally but yes, we can treat this as a separate project.What kind of trainings do you offer?
In case our onboarding videos about the Editor don’t cover your questions, we offer an online training on this subject. We can offer an online training on creating custom modules too. If you have any other specific needs, ask your Onboarding Manager, please.How do I point another domain to my Styla Frontend?
This process is described on this documentation subpage.How do I set up 301 redirects from my old website’s paths
Styla does this for you once you provide a list of redirects as a .csv file. Read more on this page.How long is the downtime when switching from a previous storefront to Styla Frontend?
You can set up your Styla Frontend in parallel to serving your website with your older storefront. Once you are ready to go-live, any possible downtime is only caused by the change of DNS settings for your domain. Which should not happen at all as one entry is replaced by another.How do I use product data in my custom modules?
The data fetched from BigCommerce APIs is provided in application context. You call and render it with variables in handlebar template. You can use helpers provided by Styla. This content will be server-, and not only client-side rendered.Can I reuse font definition or colours in my custom modules?
Yes, the colours and font formats defined in your front’s THEME SETTINGS tab in Styla Admin are provided in the app context. Which means that you can call them as variables, example:{{@root.context.theme.fonts.formats.body}}
. These are the same colours and font formats an Editor user can apply with the Editor UI.
Content creation
How do I manage my website content?
Product details and category pages are created automatically based on product data from your “headless“ shop’s API. Any other pages you create with the Editor. All pages use bases that you manage in the Editor as well.How do you import existing pages?
We have no importer tool for that. The only way to have this content on your Styla Frontend is to copy-paste it into the Editor.How should I build my website navigation?
There are at least three options: 1) Use the standard Navigation module (one level possible only) 2) HTML module (anything you can build with HTML, CSS and JS but no UI in the Editor to manage the links) 3) develop or reuse a custom module (any appearance customisation possible + UI in the Editor) which would let you fetch page trees from an external API too.How do I manage my website’s header and footer?
You do this with Bases manager in the Editor.How do I update my product details or category content in Styla Frontend?
You can’t see these pages in the Editor. They are created and updated automatically using the product data Styla fetches from the shop’s API. Updating product content triggers re-rendering of any pages containing this product.What is the delay between hitting the “Publish“ button and having a page re-rendered?
This depends mostly on how many pages need to be re-rendered. If it’s about one page, the changes should be visible in a couple seconds. The process might take several minutes if hundreds of product details pages need to be re-rendered.How much freedom do I have in setting URLs?
For pages created with the Editor you can freely change them, including having multiple slashes (/) and extensions like .html. For product details and category pages you can set patterns that will be used to create Styla URLs based on paths for specific products and categories created in your “headless“ shop.How can I display different content on pages using the same templates like product details or category pages?
You use Modular Content for that. It lets you define a space (slot) on a page template that can be populate with different Modular Content on different pages.What path should my home page have?
It should havehome
in its Page URL path field on the Settings tab. This will make sure requests for your top-level domain, without any path, will display this page.What path should my default 404 page have?
It should havenotfound
in its Page URL path field on the Settings tab. This will make sure requests for non-existent paths will display this page. You can modify its content as any other page’s.
...
How to I change my Styla Frontend appearance?
The content of a specific page itself is changed with the Editor. You can change its layout there and apply some CSS changes (select a different font format, background colour etc.). You can also directly change CSS for every module in Styla Admin, as described on this page.Is Styla Frontend responsive?
Yes it is. Styla content changes based on your view port. You can define different CSS above and below the only break point Styla features, which is per default set to 767px. These CSS rules are applied through media queries.What web browsers does Styla Frontend support?
The latest versions of Chrome, Firefox and Safari. We don’t support Internet Explorer.What are the limitations for my layouts on Styla Frontend?
They are limited by the range of modules you have available in the Editor. Each of them has a limited set of HTML tags you can apply CSS to. If you need a module with a different HTML structure, you need to paste your HTML code into HTML module or develop a custom module.
In addition, only up to 3 modules can be displayed next to each other in one row.Do you provide any grid system like Bootstrap for layouting purposes?
No, Styla does not provide any at the moment. If you need something like that for your custom modules, we suggest a lightweight library like https://css-tricks.com/snippets/css/complete-guide-grid/.
Shopping flow / user journey
...