# How to Install PWA for Wowonder # Installaton Guide A PWA turns your website into an app-like experience. This setup enables offline functionality, faster load times, and the ability to "Add to Home Screen" on mobile devices. [Click here to see this tutorial online, the online tutorial is much better for copy and paste.](https://howto.scriptstribe.com/books/how-to-install-pwa-for-wowonder/page/installaton-guide) Before you start, please backup your files, uploading this will overwrite the following files if you need help or have suggestions please visit the dedicated support **[forum for this addon here](https://community.scriptstribe.com/forums/45/)** ##### **Step 1: Upload the files** --- Unzip and upload the files to your root directory according to the folder structure. ##### **Step 2: Add to header (Please backup any file before editing)** Open themes/yourTheme/layout/container.phtml Look for and comment it out or remove. ``` ``` Look for <head> at the very top After that add ``` ``` ##### **Step 3: Adding the popup banner** ##### Open themes/scriptstribe/home/content.phtml
Go to the very bottom and add ``` ``` ##### **Step 4: Adding the popup banner in welcome page** ##### Open themes/YourTheme/welcome/welcome-users-profiles.phtml
Go to the very bottom and add ``` ``` ##### **Step 5: Edit the service-worker.js file** Open /service-worker.js Look for and change wondertag for your theme name ##### **Step 6: Icon Images** Open themes/youtheme/img/pwai and replace these images for the icons. Yes! each image is importantand shows in different places if you delete one the app will not work. [![logo-48x48.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/scaled-1680-/afH0cHIPkgmumfSl-logo-48x48.png)](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/afH0cHIPkgmumfSl-logo-48x48.png)[![logo-72x72.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/scaled-1680-/KYpoB9DtXMi80MK5-logo-72x72.png)](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/KYpoB9DtXMi80MK5-logo-72x72.png)![logo-96x96.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/scaled-1680-/Mi1WfSSpqx5UVnRv-logo-96x96.png)[![logo-128x128.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/scaled-1680-/W1kb7I4HN4u0xKoB-logo-128x128.png)](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/W1kb7I4HN4u0xKoB-logo-128x128.png)![logo-144x144.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/scaled-1680-/MsKnS4uozvc4AARL-logo-144x144.png)[![logo-192x192.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/scaled-1680-/dyc93wIFIjmXXFQI-logo-192x192.png)](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/dyc93wIFIjmXXFQI-logo-192x192.png)[![logo-384x384.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/scaled-1680-/gNdpJ3u8SNq9SMWQ-logo-384x384.png)](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/gNdpJ3u8SNq9SMWQ-logo-384x384.png)[![logo-512x512.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/scaled-1680-/tmPSUCnVzPMt4OA3-logo-512x512.png)](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/tmPSUCnVzPMt4OA3-logo-512x512.png) ##### **Step 7: Screenshots icons** **Next you will create the screenshot images of your site. this is a example with my site and please name the images the same way, the screenshots will show like this when a user click the install button. pretty hum? check all the images names bellow.** **[![thisiswhy.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/scaled-1680-/XapLHvgqmeiM9Xdy-thisiswhy.png)](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/XapLHvgqmeiM9Xdy-thisiswhy.png)** **desktoplogout.png** **[![desktoplogout.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/scaled-1680-/HI5UKG1JAnSYqzsN-desktoplogout.png)](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/HI5UKG1JAnSYqzsN-desktoplogout.png)** **desktoplogin.png** **[![desktoplogin.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/scaled-1680-/qBNHwxR1Tw8859qA-desktoplogin.png)](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/qBNHwxR1Tw8859qA-desktoplogin.png)** **forums.png** **[![forums.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/scaled-1680-/4l6L7DyRaE5ImiX8-forums.png)](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/4l6L7DyRaE5ImiX8-forums.png)** **features.png** **[![features.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/scaled-1680-/BvBs3t3D2HDEvoan-features.png)](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/BvBs3t3D2HDEvoan-features.png)** **explore.png** **[![explore.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/scaled-1680-/rAxybv2Xh8NALQPX-explore.png)](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/rAxybv2Xh8NALQPX-explore.png)** **screenshot3.png** **[![screenshot3.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/scaled-1680-/akmVPfsp5nrCjuak-screenshot3.png)](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/akmVPfsp5nrCjuak-screenshot3.png)** **Enjoy! And if you love it leave me a [review here it really helps build a reputation.](https://scriptstribe.com/wowonder-pwa-addon-progressive-web-app/)** **[![emot.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/scaled-1680-/IYne7FovY9bt1UwY-emot.png)](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/IYne7FovY9bt1UwY-emot.png)** # Icons License Click any link below to see where I got the icons Blog Icon [GPL](https://www.iconfinder.com/icons/1055019/news_article_information_newspaper_periodical_icon) Forum [Free for Commercial use](https://www.iconfinder.com/icons/5027855/chat_communication_message_talk_icon) Events: [Free for Commercial use](https://www.iconfinder.com/icons/4171356/calendar_day_hanging_heart_letter_love_valentine_valentines_icon) Ads: [Free for Commercial use](https://www.iconfinder.com/icons/4550882/ads_adwords_google_icon%20Free) Market [CC0 1.0 Universal (CC0 1.0) Public Domain Dedication](https://www.iconfinder.com/icons/8726303/shop_icon) Reels [MIT License](https://www.iconfinder.com/icons/9039905/camera_reels_icon)