How To: Configure PWA Add-on


The add-on adds its own layout and block. This functionality provides you with a flexible and effective way to set up the appearance of your store according to your business goals.

Configuring blocks

If you need to add/remove/edit/move some blocks, follow the instructions below:

  1. Navigate to Design -> Layouts -> Layouts.
  2. Choose SPALayout option in the Switch layout window.


The Default tab contains blocks that will be visible on all store pages. You may edit blocks for particular pages when switching through other tabs.

  1. To add a block, hover the cursor over one of the grid sections with blocks and click on the “+” button.
  2. The opened window contains already configured default blocks. To add new ones, go to Design -> Layouts -> Manage blocks and click a “+” button. Choose the necessary block from the list of all available blocks.

Types of available blocks

  • SPA: Categories - A panel with website categories. Choose to display either the root categories of the store or select them manually.
  • SPA: Banners - A carousel with promo banners. Configure to display the most relevant banners or determine them manually.
  • SPA: Cart content button - A cart button.
  • SPA: Currencies - A drop-down menu for choosing a currency. The list of currencies is based on the currencies available on the storefront.
  • SPA: Languages - A drop-down menu for language selection. The list of languages is based on the languages available on the storefront.
  • SPA: Logo - A website logo. You can upload your own image. We recommend using .png image with the size 196x100px.
  • SPA: Menu button - A button to open the side menu.
  • SPA: My account button - A drop-down menu for managing a profile.
  • SPA: Search - A search field. Note that, on the mobile version, the search field is in the top toolbar by default and opens by clicking the search icon.
  • SPA: Wishlist button - A button to open a wishlist.
  • SPA: HTML block - A block created by the store administrator by adding HTML/CSS code.
  • SPA: Main - A block with the main content of the page. For example, it is a block with the product on the product details page.
  • SPA: Pages - A block with links to individual pages of the site (About the company, Contacts, etc.). You can display either the blog feed or particular content pages selected manually.
  • SPA: Products - A product block. It may display products selected: manually; by novelty; by price; recently viewed by the customer who opens the page; similar products (should be selected exclusively for the product page); products with a discount.

To change the position of the block, hold it, and move to the right place. You can also preview which blocks will be displayed on different devices (desktop, tablet, and mobile). To do this, click on the corresponding preview tab.

To change the display of a block on different devices, click on the Gear icon in the lower-left corner of the desired block. Then, click General -> Show On and choose the necessary option.

Setting up elements

Pages, vendors, categories, products, options, features, profile fields, menus, etc. are configured with the help of standard CS-Cart tools. For more information, please, refer to the CS-Cart user guide.