1. Overview
A progressive app (PWA), is a web application that uses technology and design patterns to create a fast, reliable, and responsive, engaging user experience. They are able to act like native apps on mobile.
Magento 2 PWA Speedy Theme is built on Magento PWA Studio allows for the development, deployment, and maintenance of the PWA storefront on top of Magento 2.3 and above.
2. How does it work?
2.1. Theme Config
Go to Store ⇒ Configuration ⇒ BSS Theme ⇒ General Setting.
Check the Theme Version to make sure that you are using the latest version.
- Banner Slider Config
In Enable Banner Slider on Homepage, choose Yes or No to show/hide the Banner Slider on the Homepage.
In Auto Slide, choose Yes to auto slide the banner slider display on the Homepage.
In Speed, enter a number to change the speed of the slide when moving from one slide to another. The slide speed is measured with ms, with 1s = 1000ms.
In Hide on Mobile, choose Yes to hide the banner slider on the mobile homepage screen.
- Product Tabs Configs
In Product tabs on Homepage, choose Yes to enable the Product tabs on the Homepage frontend.
In List Options, choose the tabs that will show in the tab panel on the Homepage.
- Product Attribute Config:
This config will allow admin to choose the products that appear in the ‘Featured Products’ tab on
Go to Catalog ⇒ Product ⇒ Product Detail
In Product Feature, toggle Yes to display the product in the Featured Products panel of the Product tabs.
2.2. List of Modules used in Speedy PWA Theme
The theme presents a customizable, seamless design and responsive interface by using a bundle of extensions created for Speedy Theme:
- Bss_CoreTheme
- Bss_BannerSlider
- Bss_BannerSliderGraphQl
- Bss_ClientCacheRefresh
- Bss_ProductTabs
- Bss_ProductTabsGraphQl
- Bss_ThemeSettings
a) Module Bss_CoreTheme
The module is used to create the configs and general logic for the theme and includes the libraries used for the theme. Bss_Core Theme also used to call the theme version.
b) Module Bss_Banner Slider
The module is built to manage the banner slider on the backend.
Go to Manage Slider Items
Click on Add New Slider Item to add a new slider into the banner slider on the homepage.
In Title, enter the title of the slide you want to add to the banner slider.
In Show Title, choose Yes or No to show/hide the slider title.
In URL, enter the URL of the page you want to link to the slider.
In Description, write the description for your slider to show under the title.
In Status, toggle Enable to show the slider on the homepage.
In Store View, select a store view to display the slider.
In Banner Image, upload the image background of the chosen slider.
c) Module Bss_BannerSliderGraphQL
Used to get banner sliders using GraphQL, and from there display the banner slider on PWA Theme.
d) Module Bss_ClientCacheRefresh
Use to send push notifications about any change happening on the site, and require customers to refresh the page.
Go to System ⇒ Cache Management.
In Additional Cache Management, click on Notify Clients to Refresh PWA Cache.
The notification will appear on the frontend:
e) Module Bss_ProductTabs
Used to handle the logic data load products for the product tabs in the homepage.
f) Module Bss_ProductTabsGraphQL
Used to support the display of Product Tabs on PWA Speedy Theme frontend.
g) Module Bss_ThemeSettings
The module was used to import the cms page/block on the frontend.
In order to access and edit the cms pages/blocks, go to Content ⇒ Pages/ Blocks.