Base templates

On this page:

Base templates are templates into which either your product content from BigCommerce or Styla content from the Editor will be inserted. The basic idea behind base templates is that all pages need to share the same header and footer which, in turn, consist of multiple modules. Product details and category pages generated based on data from the BigCommerce APIs and Styla content created with the Editor will be displayed by Styla Frontend between these header and footer.

Depending on page type, the content comes from different data sources and is managed in different places. The diagrams below discuss this in details.

A standard page created in the Editor:

Open

A product details page:

Open

A category page:

Two levels of base templates and inheritance

Styla Frontend uses two levels of base templates:

1. Page Base Template - usually contains header and footer for any page and a placeholder module in which content from the Editor or Big Commerce will appear

2. Category Base Template and Product Base Template - they inherit header and footer from Page Base Template and render in between them content generated based on product data from the BigCommerce API plus any other content that might be needed, either modules common for all product details or category pages or Modular Content which can load different content for some pages only.

Managing your base Templates

You manage bases in Styla Editor in Bases Manager. You can reach it from the overlay appearing when you click your user name top-right:

Adding and deleting base templates is not needed and currently blocked. The only thing you can do on the list above is clicking the Edit link on the right to modify them. On clicking this, your base template details will show:

Adding modules to any base template

Right in the beginning, your base template will contain a header and a footer. You can add new content modules by dragging and dropping modules from the left sidebar onto it.

For instance, if you have an important message to your audience (a special promo, delayed shipping) and want it to be visible on every subpage, just drag and drop a text module on your Page Base Template, write as sentence or two and provide a link to a page with the details. Once you save and rerender the whole site, the message will be shown above/below your menu and you will be able to update or switch it off with a couple clicks.

Triggering page re-rendering

Once you are done with your base updates, click the Save&Re-render button top right. This will start updating the page .html files for all pages using this specific base, so:

• Page Base - will trigger re-rendering of all subpages

• Product Base - will trigger re-rendering of all product details pages

• Category Base - will trigger re-rendering of all category pages

This might take more than a couple minutes, especially if you have thousands of products in your BigCommerce inventory.

Alternatively, you can click the Save button top left and not trigger the re-rendering process.

All the events triggering page re-rendering

These are just some of the events that trigger re-rendering of the .html files. The full list is as follows:

• account settings (including CSS) updated in Styla Admin → all pages re-rendered,

• page base (template) updated in Styla Editor → all pages using this base re-rendered,

• modular content updated in Styla Editor → all pages with this content re-rendered,

• a new version of a page published in Styla Editor → only this page re-rendered,

• product data in the “headless“ shop updated → pages for products and. categories affected re-rendered,

• category data in the “headless” shop updated → only this category page re-rendered,
  clicking the “re-index“ button in Styla Admin → all category and product pages re-rendered.

Page path patterns

The view with all your bases above displays a path pattern for each of them. This field defines on what location in your website all pages using a specific base will be create.

For instance, if your Default Base has {placeholder} set up in this field, pages using this base will have paths equal to the Page URL path field you fill in when creating a new page. However, if path pattern is set to {placeholder}.html the “.html“ extension will automatically be added to page files created with this base.

Similarly, if you set your Product Base’s path pattern to products/{product.slug}.html all product details page .html files will be created in a /products/ directory and have the .html extension.

Setting page patterns

At the moment there is not user interface to enter them other than directly in JSON data for a base. When editing a base, simply add a /json to the URL in your browser’s address bar and go there. A JSON with all data for the base will be displayed. You can edit its pattern in the path field and then save (and trigger re-rendering).