Base templates – Help Center

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. So, you can achieve this by having a Header module in the top area of your master template and a Footer module located in the bottom area of the same template.

Styla Frontend offers a second level of templates dedicated to Product Detail pages and Category pages. These pages will share a template that will inherit the content from the master template, while at the same time, give you the opportunity to further customized the content by including any other additional modules.

Templates inheritance

As mentioned above, Styla Frontend offers two levels of templates:

Level 1: Default base or Storefront master template - this is the master template of your site, and any modules contained here will be rendered globally in your Storefront. Therefore, it generally contains the header and footer for the Storefront. When editing this template, you will notice that there is another area called "placeholder". This is the area where the application will render the content of your pages. While the placeholder is not editable, when editing a page in the Editor, the modules from your master template will be visible in the preview mode.
Level2: Category and product base templates - they inherit the modules from the default base 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

Click on the Base Templates option in the main navigation:

To modify a template, click on the Edit option:

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.

Note: The Placeholder module is always needed in the master template (default base). It denotes the place in which content of pages created with the Editor, product details and category pages will be displayed. So everything you will set up in Category Base and Product Base will “go into“ the Placeholder. You don’t need to drag and drop the same set of modules on these bases again.

On most websites everything above the Placeholder will be the header while everything below, the footer.

Publishing changes

When editing your template, you have two options for saving your changes:

1.- Save

2.- Save & Re-render

Use the Save option, if you are not completely done with your changes or Save & re-render, if you are done and want to update your site.

Depending on which template you are editing, the Save & re-render button 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.

It is worth to mention that when you only save changes done in a template, the changes will be applied only to all new pages created from that moment, and not to the pages already existing. For that, you will need to Save & re-render.