Page bases are templates into which either your product content from BigCommerce or Styla content from the Editor will be inserted. The basic idea behind bases 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 API and Styla content created with the Editor will be displayed by Styla Frontend between these header and footer.
/diagram here/
Styla Frontend uses two levels of page bases:
Page Base - usually contains header and footer for any page and a placeholder module in which content from the Editor or Big Commerce will appear
Category Base and Product Base - they inherit header and footer from Page 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 bases
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 bases 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 your bases. On clicking this, your base details will show:
Adding modules to your base
Right in the beginning your base will be blank. You should start populating it by dragging and dropping modules from the left sidebar onto it. You can both user the default Styla and custom modules for that.
For instance, a navigation is easiest built with a Navigation module but this module has its own limitations (only one level possible, no overlays). You can as well create your navigation as an HTML module (if you don’t plan to edit it often) or as a custom module (more development effort but easier maintenance with a UI in the Editor to update links).
Another example: 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, write as sentence or two and provide a link to a page with the details. The message will then show above/below your menu and you will be able to update or switch it off with a couple clicks.
The Placeholder module is always needed in the Page 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.
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.
Add Comment