FAQ

The Product / Use Cases

• What is exactly the use case Styla Frontend covers?
  To deliver a full e-commerce website frontend using product data from a “headless“ shop’s API.

• Where is the line between Styla Frontend and a “headless“ shop, for instance, BigCommerce?
  BigCommerce delivers product data, shopping capabilities and handles orders. Styla renders and hosts any content on the website and provides a tool to create non-product pages.

• What’s the difference between Styla Frontend and Styla CMS?
  Styla Frontend is the product that lets you build your complete frontend for a “headless” e-commerce application. An older product, Styla CMS, covers a different use case (including Styla content on a non-Styla website) and you can find its documentation here.

• How fast Styla Frontend is?
  Most pages score higher than 90 in Google Lighthouse tests. It depends on the amount and type of content. A page with just some HTML and an image or two will usually score close to 98. The more custom modules and scripts you add to your pages, the slower they will get.

• Where is Styla Frontend hosted?
  In AWS, Frankfurt, Germany.

• Is Styla Frontend served over a CDN?
  Yes, it uses AWS’ CloudFront.

• What if I need to cover store fronts in multiple languages with Styla Frontend?
  You need a separate BigCommerce and Styla front for each of the languages/locales.

• Is Styla Frontend a Progressive Web App?
  Yes, as long as you provide the data needed to configure its manifest.

• Can I use tracking scripts from Google/Hubspot/LinkedIn?
  Yes, you can include them as on any other website.

• How is European GDPR covered?
  Styla on its own only receives the IP and the user-agent which end-users accessing the website use. Styla does not store this data after having processed the request. This changes if you include third-party content like tracking scripts. All the data is hosted in Germany.

• I love the selection of plugins BigCommerce / Shopify offers? Can I use all of them with Styla Frontend?
  Styla Frontend only uses the data it gets over the API. All website content is rendered by Styla only. So if your plugin directly influences the appearance, it won’t be included by Styla. If it influences the product data used by Styla to render pages, it will be included.

• Can Styla push content to external (native) web/mobile apps?
  This is not possible at the moment. But Styla Frontend, being responsive and a PWA, works perfectly fine on different view ports/devices.

• Styla doesn't have built-in blog feature. So what can we do about our blog?
  You can create a page mocking a blog feed with banner modules linking to your blog entries and then recreate each blog entry as a separate page. Automatically generated blog feeds should be provided by Styla in the future.

Setting your Frontend up

• 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 have home 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 have notfound 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.

Appearance

• 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

• Where do orders from Styla Frontend go?
  They are saved in the order management in your “headless“ shop. You can manage them as any order coming from a BigCommerce/Shopify frontend.

• Can I adapt BigCommerce’s cart and checkout?
  You can adapt the cart as long as the data from the shop’s API permits it. In this respect Styla is limited by whatever the API delivers and accepts. The checkout is included as an iframe directly from BigCommerce, so you cannot modify it.

• Cart and Checkout buttons don’t show up in my minicart. Why?
  They are probably not configured. Go to the Editor to Bases Manager and set labels and links for your cart and checkout buttons. They should use relative links like /cart to your pages with Cart and Checkout modules respectively.

• How do I create and update pages for checkout, cart, signup, login, forgot password?
  You create them in the Editor, as any other content page, and then drag&drop specific modules on them. Remember to configure each module’s options for it to work correctly.
  The above modules use a BigCommerce API to let users perform actions and sync with data in BigCommerce.

• How will our out-of-stock products look on the storefront?
  Such products are simply displayed as “not available“. Styla Frontend does not offer substituting them with any similar products at the moment. This may be developed later.

• Login does not work
  If your BigCommerce store is set to “Down for Maintenance“ then registration will work but login won’t. If you want to test login, go to Store Setup > Store Settings in your BC backend and switch the Store Status switch to Open.
  If login still does not work, make sure the bigcommerce.store_url setting for your account in the FRONT CONFIGURATION tab is correct (https://store-mystorehash.mybigcommerce.com).

• Can I log in as a BigCommerce client?
  Styla Frontend does not offer this functionality at the moment.