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 which 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 ckick 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 meny for managing a profile.
  • SPA: Search - A search field. Note that, on 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 cintent 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 choose to display either the blog feed, or particular content pages selected manually.
  • SPA: Products - A product block. It maty 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, etc. are configured with the help of standard CS-Cart tools. For more information, please, refer to CS-Cart user guide.