{"id":177286,"date":"2019-06-07T07:14:26","date_gmt":"2019-06-07T07:14:26","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=177286"},"modified":"2026-04-22T14:32:59","modified_gmt":"2026-04-22T14:32:59","slug":"progressive-web-app-woocommerce","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/progressive-web-app-woocommerce\/","title":{"rendered":"Progressive Web App for WooCommerce"},"content":{"rendered":"<p><span style=\"color: #000000;\">C<\/span>onvert your WooCommerce website into a <strong>PWA (Progressive Web App)<\/strong> instantly. The store visitors will experience the high-performance benefits of the PWA, which is based on a headless architecture.<\/p>\n<p>The customers will be able to come back to your website by launching the app from their mobile home screen and can interact with your website through an app-like interface.<\/p>\n<p><a href=\"https:\/\/store.webkul.com\/woocommerce-progressive-web-app.html\">Progressive Web App for WooCommerce<\/a> uses modern web technologies to deliver an app-like experience to users right within their web browsers.<\/p>\n<p>This <a href=\"https:\/\/store.webkul.com\/woocommerce-mobile-app.html\" target=\"_blank\" rel=\"noopener\">Woocommerce Mobile app<\/a> is built on top of the React.js library, which makes it even more powerful, flexible, fast, and scalable.\u00a0<\/p>\n<p><strong>Note<\/strong>:\u00a0<\/p>\n<ul>\n<li>Your website must be https:\/\/ enabled for offline caching to work.<\/li>\n<li>Progressive Web App for WooCommerce\u00a0is compatible with multisite.<\/li>\n<li><a href=\"https:\/\/webkul.com\/blog\/convert-woocommerce-pwa-into-apk-ipa-file\/\" target=\"_blank\" rel=\"noopener\">Convert PWA into APK \/ IPA files<\/a> and publish on Google Play and App Store.<\/li>\n\n\n<li><strong>NOTE:<\/strong>We will provide with the APK file, which you can use to publish your app on the Google Play Store. Please note that publishing on the Play Store is a paid service.<\/li>\n\n<li>We provide a production version of the plugin. If you want a development version then you can get it at an additional cost. Please contact\u00a0support@webkul.com\u00a0for it.<\/li>\n<\/ul>\n<div class=\"wk-index-wrap\">\n<h3 class=\"index-title\">Check the backend configuration &#8211;\u00a0<\/h3>\n<\/div>\n<div class=\"wp-block-wk-block-youtube-video wk-block--yt-video wk-block-yt-classic components-placeholder\">\n<div class=\"wk-block--yt-video-frame\">\n<div class=\"wk-block--yt-video-frame-request\" data-plyr-provider=\"youtube\" data-plyr-embed-id=\"a8FyjXVuKr4\">\n<div class=\"components-placeholder__instructions\">a8FyjXVuKr4<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wk-index-wrap\">\n<h3 class=\"index-title\">Check the mobile end workflow &#8211;\u00a0<\/h3>\n<\/div>\n<div class=\"wp-block-wk-block-youtube-video wk-block--yt-video wk-block-yt-classic components-placeholder\">\n<div class=\"wk-block--yt-video-frame\">\n<div class=\"wk-block--yt-video-frame-request\" data-plyr-provider=\"youtube\" data-plyr-embed-id=\"ZfP4lyMFtl0\">\n<div class=\"components-placeholder__instructions\">ZfP4lyMFtl0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div>\n<p>Also check out the <a href=\"https:\/\/webkul.com\/shopify-headless-development\/\" target=\"_blank\" rel=\"noopener\">Shopify Headless<\/a> React-based e-commerce.<\/p>\n<h3 class=\"panel-title\">What is a Progressive Web App?<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<p>A <strong>Progressive web app<\/strong> is a website that looks and feels like an app on your <strong>mobile<\/strong> device.<\/p>\n<p>What this means is that the users can access all information and capabilities without downloading and installing the mobile app.<\/p>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">Why go for Progressive Web Apps?<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<p>Progressive web apps are helping businesses to increase their conversions, page visits, and session lengths.<\/p>\n<p>PWAs also provide a better web experience to mobile users and are also a good option for businesses that don&#8217;t have much investment in developing their mobile apps.<\/p>\n<p>To sum up, here are some of the benefits to reap &#8211;<\/p>\n<ul>\n<li><strong>Supports Slow Internet<\/strong><\/li>\n<li><strong>Less data usage<\/strong><\/li>\n<li><strong>Faster loading times<\/strong><\/li>\n<li><strong>Improved performance<\/strong><\/li>\n<li><strong>Engaging user experiences<\/strong><\/li>\n<li><strong>Always updated app<\/strong><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">Features<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Light Weight App.<\/li>\n<li>Easy to customise and make changes.<\/li>\n<li>More user-friendly than a web application.<\/li>\n<li>Supports slow internet.<\/li>\n<li>The shimmer effect is used for unobtrusive loading indicators.<\/li>\n<li>Work with low-quality internet also.<\/li>\n<li>No need to update the Progressive Web Application.<\/li>\n<li>It looks &amp; feels like a native application.<\/li>\n<li>Increases user engagement in the store.<\/li>\n<li>Add the App Icon Text visible on the mobile device.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">Installation<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<p><strong><u>1st Step:<\/u><\/strong> Log in to <strong>WordPress Admin Panel<\/strong> and navigate through &#8216;<strong>Plugins<\/strong>-&gt;<strong>Add<\/strong> <strong>New<\/strong>&#8216;.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-177885 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/webkul_wc_pwa_installation_add_plugin.png\" alt=\"webkul_wc_pwa_installation_add_plugin\" width=\"551\" height=\"233\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/webkul_wc_pwa_installation_add_plugin.png 551w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/webkul_wc_pwa_installation_add_plugin-250x106.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/webkul_wc_pwa_installation_add_plugin-300x127.png 300w\" sizes=\"(max-width: 551px) 100vw, 551px\" loading=\"lazy\" \/><\/p>\n<p><strong><u>2nd Step: <\/u><\/strong>Click on the &#8216;<strong>Upload Plugin<\/strong>&#8216; button on the top of your page to upload the zip file.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-177886 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/webkul_wc_pwa_installation_upload_plugin.png\" alt=\"webkul_wc_pwa_installation_upload_plugin\" width=\"747\" height=\"505\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/webkul_wc_pwa_installation_upload_plugin.png 747w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/webkul_wc_pwa_installation_upload_plugin-250x169.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/webkul_wc_pwa_installation_upload_plugin-300x203.png 300w\" sizes=\"(max-width: 747px) 100vw, 747px\" loading=\"lazy\" \/><\/p>\n<p><strong><u>3rd Step: <\/u><\/strong>Now, tap the &#8216;<strong>Choose File<\/strong>&#8216; button to <strong>browse<\/strong> for the <strong>zip<\/strong> file.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-177888 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/webkul_wc_pwa_installation_browse_plugin.png\" alt=\"webkul_wc_pwa_installation_browse_plugin\" width=\"1058\" height=\"477\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/webkul_wc_pwa_installation_browse_plugin.png 1058w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/webkul_wc_pwa_installation_browse_plugin-250x113.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/webkul_wc_pwa_installation_browse_plugin-300x135.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/webkul_wc_pwa_installation_browse_plugin-768x346.png 768w\" sizes=\"(max-width: 1058px) 100vw, 1058px\" loading=\"lazy\" \/><strong><u>4th Step: <\/u><\/strong>After <strong>selecting<\/strong> the <strong>zip<\/strong> file, tap the &#8216;<strong>Install Now<\/strong>&#8216; button to install the plugin.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-177890 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/webkul_wc_pwa_installation_install_plugin.png\" alt=\"webkul_wc_pwa_installation_install_plugin\" width=\"1027\" height=\"463\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/webkul_wc_pwa_installation_install_plugin.png 1027w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/webkul_wc_pwa_installation_install_plugin-250x113.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/webkul_wc_pwa_installation_install_plugin-300x135.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/webkul_wc_pwa_installation_install_plugin-768x346.png 768w\" sizes=\"(max-width: 1027px) 100vw, 1027px\" loading=\"lazy\" \/><\/p>\n<p><strong><u>5th Step: <\/u><\/strong>After successful installation, a<strong> success message<\/strong> is visible along with an option to &#8216;<strong>activate<\/strong>&#8216; the plugin. Tap on &#8216;<strong>Activate Plugin<\/strong>&#8216;\u00a0to activate the installed plugin.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-177891 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/webkul_wc_pwa_installation_success_installed_plugin.png\" alt=\"webkul_wc_pwa_installation_success_installed_plugin\" width=\"1121\" height=\"474\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/webkul_wc_pwa_installation_success_installed_plugin.png 1121w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/webkul_wc_pwa_installation_success_installed_plugin-250x106.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/webkul_wc_pwa_installation_success_installed_plugin-300x127.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/webkul_wc_pwa_installation_success_installed_plugin-768x325.png 768w\" sizes=\"(max-width: 1121px) 100vw, 1121px\" loading=\"lazy\" \/><\/p>\n<div class=\"wk-index-wrap\">\n<h3 class=\"index-title\">Module Translation<\/h3>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-body\">\n<div>\n<p>To know how to translate the module, you can click\u00a0<a href=\"https:\/\/webkul.com\/blog\/how-to-translate-the-woocommerce-plugins\/\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">Creating Firebase Product Credential<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<p>In order to use this module, you need to have\u00a0<strong>Firebase Project Credentials,\u00a0<\/strong>which will be used in the <strong>backend configuration<\/strong> for <strong>setting up<\/strong> the module.<\/p>\n<p>Please visit <strong><a href=\"https:\/\/console.firebase.google.com\/\">this<\/a><\/strong>\u00a0link\u00a0and create a new project with your Gmail account.<\/p>\n<p><img decoding=\"async\" class=\"img-center-small zm-zoomer zm-zoomer-in wk-lazify-loaded alignnone wp-image-502637 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/firebaseconsole.webp\" alt=\"firebaseconsole\" width=\"1366\" height=\"768\" data-src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18063413\/firebase.png\" data-alt=\"firebase\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/firebaseconsole.webp 1366w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/firebaseconsole-300x169.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/firebaseconsole-1200x675.webp 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/firebaseconsole-250x141.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/firebaseconsole-768x432.webp 768w\" sizes=\"(max-width: 1366px) 100vw, 1366px\" \/><\/p>\n<p><strong>1.<\/strong>\u00a0 After opening the<strong>\u00a0Firebase<\/strong> website, please click on the <strong>Create a Firebase project<\/strong> button.<\/p>\n<p><strong>2. A new<\/strong> page will open the as shown below image, here you have to enter your <strong>Project Name. <\/strong>Then click on the &#8220;Continue&#8221; button.<\/p>\n<p><img decoding=\"async\" class=\"wp-image-502641 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/webkul-woocommerce-pwa-create-project-1.webp\" alt=\"webkul-woocommerce-pwa-create-project\" width=\"1366\" height=\"768\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/webkul-woocommerce-pwa-create-project-1.webp 1366w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/webkul-woocommerce-pwa-create-project-1-300x169.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/webkul-woocommerce-pwa-create-project-1-1200x675.webp 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/webkul-woocommerce-pwa-create-project-1-250x141.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/webkul-woocommerce-pwa-create-project-1-768x432.webp 768w\" sizes=\"(max-width: 1366px) 100vw, 1366px\" loading=\"lazy\" \/><\/p>\n<p>3. Now click on the &#8220;<strong> Continue<\/strong>&#8221; button.<\/p>\n<p><img decoding=\"async\" class=\"wp-image-502645 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/creating-firebase-project.webp\" alt=\"creating-firebase-project\" width=\"1366\" height=\"768\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/creating-firebase-project.webp 1366w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/creating-firebase-project-300x169.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/creating-firebase-project-1200x675.webp 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/creating-firebase-project-250x141.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/creating-firebase-project-768x432.webp 768w\" sizes=\"(max-width: 1366px) 100vw, 1366px\" loading=\"lazy\" \/><\/p>\n<p>4. Now you need to configure the Google Analytics. Here you need to mention the account name . Then click on the &#8220;<strong>Create project<\/strong>&#8221; button.\u00a0<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-502647 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/configuring-google-analytics.webp\" alt=\"Configuring-google-analytics\" width=\"1366\" height=\"768\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/configuring-google-analytics.webp 1366w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/configuring-google-analytics-300x169.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/configuring-google-analytics-1200x675.webp 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/configuring-google-analytics-250x141.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/configuring-google-analytics-768x432.webp 768w\" sizes=\"(max-width: 1366px) 100vw, 1366px\" loading=\"lazy\" \/><\/p>\n<p>Here you need to mention the analytics location. Then click on the &#8220;<strong>Create project<\/strong>&#8221; button.\u00a0<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-502651 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/configuring-google-analytics-2-1.webp\" alt=\"configuring-google-analytics-2\" width=\"1366\" height=\"768\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/configuring-google-analytics-2-1.webp 1366w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/configuring-google-analytics-2-1-300x169.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/configuring-google-analytics-2-1-1200x675.webp 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/configuring-google-analytics-2-1-250x141.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/configuring-google-analytics-2-1-768x432.webp 768w\" sizes=\"(max-width: 1366px) 100vw, 1366px\" loading=\"lazy\" \/><\/p>\n<article class=\"text-token-text-primary w-full focus:outline-none scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\" dir=\"auto\" tabindex=\"-1\" data-turn-id=\"request-6863966e-1ba0-8007-be4e-6256300c21df-1\" data-testid=\"conversation-turn-282\" data-scroll-anchor=\"true\" data-turn=\"assistant\">\n<div class=\"text-base my-auto mx-auto pb-10 [--thread-content-margin:--spacing(4)] @[37rem]:[--thread-content-margin:--spacing(6)] @[72rem]:[--thread-content-margin:--spacing(16)] px-(--thread-content-margin)\">\n<div class=\"[--thread-content-max-width:32rem] @[34rem]:[--thread-content-max-width:40rem] @[64rem]:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\" tabindex=\"-1\">\n<div class=\"flex max-w-full flex-col grow\">\n<div class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal [.text-message+&amp;]:mt-5\" dir=\"auto\" data-message-author-role=\"assistant\" data-message-id=\"9da97622-75fe-4954-ba20-d22c23878d2d\" data-message-model-slug=\"gpt-4o\">\n<div class=\"flex w-full flex-col gap-1 empty:hidden first:pt-[3px]\">\n<div class=\"markdown prose dark:prose-invert w-full break-words dark markdown-new-styling\">\n<p data-start=\"0\" data-end=\"125\" data-is-last-node=\"\" data-is-only-node=\"\">After clicking on <strong data-start=\"18\" data-end=\"36\">Create Project<\/strong>, a page appears saying <strong data-start=\"60\" data-end=\"97\">&#8220;Your Firebase project is ready.&#8221;<\/strong> Now, click on <strong data-start=\"112\" data-end=\"124\">Continue<\/strong>.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"flex min-h-[46px] justify-start\">\n<div class=\"touch:-me-2 touch:-ms-3.5 -ms-2.5 -me-1 flex flex-wrap items-center gap-y-4 p-1 select-none touch:w-[calc(100%+--spacing(3.5))] -mt-1 w-[calc(100%+--spacing(2.5))] duration-[1.5s] focus-within:transition-none hover:transition-none pointer-events-none [mask-image:linear-gradient(to_right,black_33%,transparent_66%)] [mask-size:300%_100%] [mask-position:100%_0%] motion-safe:transition-[mask-position] group-hover\/turn-messages:pointer-events-auto group-hover\/turn-messages:[mask-position:0_0] group-focus-within\/turn-messages:pointer-events-auto group-focus-within\/turn-messages:[mask-position:0_0] has-data-[state=open]:pointer-events-auto has-data-[state=open]:[mask-position:0_0]\">\n<div class=\"grow\"><img decoding=\"async\" class=\"alignnone wp-image-502766 size-full\" style=\"font-size: revert; color: initial;\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/firebase-app-create-2.webp\" alt=\"firebase-app-create\" width=\"1366\" height=\"768\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/firebase-app-create-2.webp 1366w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/firebase-app-create-2-300x169.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/firebase-app-create-2-1200x675.webp 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/firebase-app-create-2-250x141.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/firebase-app-create-2-768x432.webp 768w\" sizes=\"(max-width: 1366px) 100vw, 1366px\" loading=\"lazy\" \/><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/article>\n<p><strong>4.<\/strong> After creating your new project, click on the Storage.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-502770 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/firebase-properties-and-features-1.webp\" alt=\"firebase-properties-and-features\" width=\"1366\" height=\"768\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/firebase-properties-and-features-1.webp 1366w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/firebase-properties-and-features-1-300x169.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/firebase-properties-and-features-1-1200x675.webp 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/firebase-properties-and-features-1-250x141.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/firebase-properties-and-features-1-768x432.webp 768w\" sizes=\"(max-width: 1366px) 100vw, 1366px\" loading=\"lazy\" \/><\/p>\n<p>Now click on Storage and then click on Realtime database<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-502785 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/buildsettings.webp\" alt=\"buildsettings\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/buildsettings.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/buildsettings-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/buildsettings-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/buildsettings-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>Now you need to configure the database settings\u00a0<br \/><img decoding=\"async\" class=\"alignnone wp-image-502786 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/realtimedatabase-2.webp\" alt=\"realtimedatabase\" width=\"1366\" height=\"768\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/realtimedatabase-2.webp 1366w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/realtimedatabase-2-300x169.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/realtimedatabase-2-1200x675.webp 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/realtimedatabase-2-250x141.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/realtimedatabase-2-768x432.webp 768w\" sizes=\"(max-width: 1366px) 100vw, 1366px\" loading=\"lazy\" \/><\/p>\n<p>\u00a0<\/p>\n<p><strong>5.<\/strong> Now navigate to the project overview\u00a0<\/p>\n<p>Then click on the (&lt;\/&gt;) button\u00a0 <img decoding=\"async\" class=\"alignnone wp-image-502790 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/projectoverview.webp\" alt=\"projectoverview\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/projectoverview.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/projectoverview-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/projectoverview-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/projectoverview-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>Now, after clicking on the button then we need to give the app nickname and register our app .<\/p>\n<p>1st Step &#8211;\u00a0<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-502795 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/add-firebase-to-app.webp\" alt=\"add-firebase-to-app\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/add-firebase-to-app.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/add-firebase-to-app-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/add-firebase-to-app-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/add-firebase-to-app-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>2nd Step\u00a0 -The following credentials will be used for configuration:<br data-start=\"70\" data-end=\"73\" \/><strong data-start=\"73\" data-end=\"84\">API Key<\/strong>, <strong data-start=\"86\" data-end=\"101\">Auth Domain<\/strong>, <strong data-start=\"103\" data-end=\"119\">Database URL<\/strong>, <strong data-start=\"121\" data-end=\"135\">Project ID<\/strong>, <strong data-start=\"137\" data-end=\"155\">Storage Bucket<\/strong>, <strong data-start=\"157\" data-end=\"167\">App ID<\/strong>, and <strong data-start=\"173\" data-end=\"191\">Measurement ID<\/strong>.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-502806 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/step-2-creating.webp\" alt=\"step-2-creating\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/step-2-creating.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/step-2-creating-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/step-2-creating-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/step-2-creating-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>3rd Step &#8211;\u00a0<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-502807 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/step3.webp\" alt=\"step3\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/step3.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/step3-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/step3-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/step3-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>4th Step &#8211;\u00a0<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-502810 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/step-4-setting-up.webp\" alt=\"step-4-setting-up\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/step-4-setting-up.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/step-4-setting-up-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/step-4-setting-up-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/step-4-setting-up-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>\u00a0<\/p>\n<p>\u00a0<\/p>\n<\/div>\n<\/div>\n<h3 class=\"panel-title\">Basic Configuration Settings &#8211; PWA<\/h3>\n<\/div>\n<div class=\"panel-body\">\n<p>After the successful installation of the extension, the admin will navigate through <strong>PWA Application<\/strong>-&gt;<strong>Configurations<\/strong>. Here, we have five <strong>different tabs<\/strong>\u00a0to configure &#8211;<\/p>\n<ul>\n<li><strong>General<\/strong><\/li>\n<li><b>Firebase<\/b><\/li>\n<li><strong>Sliders<\/strong><\/li>\n<li><strong>Categories<\/strong><\/li>\n<li><strong>Pages<\/strong><\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone wp-image-379724 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwascreenshot-1.png\" alt=\"wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwascreenshot-1\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwascreenshot-1.png 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwascreenshot-1-300x236.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwascreenshot-1-250x196.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwascreenshot-1-768x603.png 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>Under the <strong>General tab<\/strong>, the admin will configure the<strong> App Configs<\/strong> and <strong>App Icons<\/strong>.<\/p>\n<p><strong>App Configs<\/strong>:<\/p>\n<p>Here, the admin will &#8211;\u00a0<\/p>\n<ul>\n<li>Enter the <strong>name<\/strong> of the Progressive Web App.<\/li>\n<li>Set the <strong>short name<\/strong> for the PWA app shortcut on the mobile device after installation.<\/li>\n<li>Set the <strong>theme color<\/strong> of the PWA.<\/li>\n<li>Choose the <strong>background color<\/strong> of the PWA.<\/li>\n<li>Enter the <strong>app endpoint<\/strong> for accessing the PWA on mobile devices.<\/li>\n<\/ul>\n<p><strong>App Icons<\/strong>:<\/p>\n<p>Here, the admin will upload the PWA App Logo and the app icons in various sizes as mentioned below &#8211;<\/p>\n<ul>\n<li><strong>48*48<\/strong><\/li>\n<li><strong>96*96<\/strong><\/li>\n<li><strong>144*144<\/strong><\/li>\n<li><strong>192*192<\/strong><\/li>\n<li><strong>512*512<\/strong><\/li>\n<\/ul>\n<p>After making the above settings, tap the <strong>Save<\/strong> button at the bottom to save your <strong>general settings<\/strong>.<\/p>\n<p>Under the <strong>Firebase<\/strong> tab, the admin will configure the Firebase and Google credentials.\u00a0<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-379728\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwatabfirebase-configscreenshot.png\" alt=\"wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwatabfirebase-configscreenshot\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwatabfirebase-configscreenshot.png 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwatabfirebase-configscreenshot-300x236.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwatabfirebase-configscreenshot-250x196.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwatabfirebase-configscreenshot-768x603.png 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>Here, the admin will &#8211;\u00a0<\/p>\n<ul>\n<li>Set the Google server key<\/li>\n<li>Enter the Google API key<\/li>\n<li>Set the Google Authentication Domain<\/li>\n<li>Enter the Google database URL<\/li>\n<li>Google measurement id needs to be entered<\/li>\n<li>Google project ID has to be entered<\/li>\n<li>Enter the Google storage bucket<\/li>\n<li>Set the GCM sender ID<\/li>\n<li>Enter the Google app ID<\/li>\n<li>Setup the Web push certificate key<\/li>\n<\/ul>\n<p>Lastly, tap the save button at the bottom.\u00a0<\/p>\n<h3>Sliders:<\/h3>\n<p>Under this section, the admin will be able to see the added sliders and can add sliders for the PWA app as required.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-379733\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwatabslider-configscreenshot.png\" alt=\"wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwatabslider-configscreenshot\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwatabslider-configscreenshot.png 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwatabslider-configscreenshot-300x236.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwatabslider-configscreenshot-250x196.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwatabslider-configscreenshot-768x603.png 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>To add a new slider, tap the Add Slider button. Here, the admin can &#8211;\u00a0\u00a0<\/p>\n<ul>\n<li>Enable or disable the slider\u00a0<\/li>\n<li>Upload the image for the slider<\/li>\n<li>Add a link for the slider image, tapping on which the customer gets redirected to the added link.<\/li>\n<\/ul>\n<p>Lastly, tap on the save button to save the sliders.<\/p>\n<p>The slider with the images is visible in the PWA app as per the snapshot below.\u00a0<\/p>\n<div class=\"wk-two-columns\">\n<div class=\"wk-columns --right\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-379779\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup.png\" alt=\"mockup\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<h3>Categories:<\/h3>\n<p>Here, the admin can add the top categories that will then be visible on the PWA App.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-379768\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/33.png\" alt=\"33\" width=\"1350\" height=\"582\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/33.png 1350w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/33-300x129.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/33-1200x517.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/33-250x108.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/33-768x331.png 768w\" sizes=\"(max-width: 1350px) 100vw, 1350px\" loading=\"lazy\" \/><\/p>\n<p>To add a top category, tap the Add Category button. After that the admin will &#8211;\u00a0\u00a0<\/p>\n<ul>\n<li>Enable the category by toggling the button to enable position.\u00a0<\/li>\n<li>Upload the top category icon.<\/li>\n<li>Choose a category to make it a top category.\u00a0<br \/><img decoding=\"async\" class=\"alignnone size-full wp-image-379770\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/34.png\" alt=\"34\" width=\"1347\" height=\"565\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/34.png 1347w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/34-300x126.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/34-1200x503.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/34-250x105.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/34-768x322.png 768w\" sizes=\"(max-width: 1347px) 100vw, 1347px\" loading=\"lazy\" \/><\/li>\n<\/ul>\n<p>Lastly, save the top category by tapping the Save button at the bottom.\u00a0<\/p>\n<p>After adding the top category, the top categories are visible on the PWA.\u00a0<\/p>\n<div class=\"wk-two-columns\">\n<div class=\"wk-columns --right\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-379780\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-1.png\" alt=\"mockup-1\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-1.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-1-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-1-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-1-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<h3>Pages:<\/h3>\n<p>Here, the admin can add custom pages for the PWA app.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-379774 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwatabcustom-pagesscreenshot-1.png\" alt=\"wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwatabcustom-pagesscreenshot-1\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwatabcustom-pagesscreenshot-1.png 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwatabcustom-pagesscreenshot-1-300x236.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwatabcustom-pagesscreenshot-1-250x196.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwatabcustom-pagesscreenshot-1-768x603.png 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>To add a page, the admin will tap the Add page button. Thereafter, the admin will\u00a0 &#8211;\u00a0<\/p>\n<ul>\n<li>Enable the page<\/li>\n<li>Choose the page where the customer should be redirected after tapping on the respective page.<\/li>\n<\/ul>\n<p>Lastly, tap on the Save button.\u00a0<\/p>\n<p>Now, after a customer has logged in to the PWA, under his account panel options he can see the added custom pages.<\/p>\n<div class=\"wk-two-columns\">\n<div class=\"wk-columns --right\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-379781\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-2.png\" alt=\"mockup-2\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-2.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-2-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-2-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-2-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<h3>Notifications:\u00a0<\/h3>\n<p>Here, under this section, the admin can create and send notifications as required.\u00a0<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-379784\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwa-notificationscreenshot.png\" alt=\"wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwa-notificationscreenshot\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwa-notificationscreenshot.png 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwa-notificationscreenshot-300x236.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwa-notificationscreenshot-250x196.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwa-notificationscreenshot-768x603.png 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>To add a notification, tap the Add Notification button at the top and the below-shown section appears.\u00a0<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-379790\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwa-notificationactionaddscreenshot.png\" alt=\"wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwa-notificationactionaddscreenshot\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwa-notificationactionaddscreenshot.png 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwa-notificationactionaddscreenshot-300x236.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwa-notificationactionaddscreenshot-250x196.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwa-notificationactionaddscreenshot-768x603.png 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>Here, to add a notification, the admin will &#8211;\u00a0\u00a0<\/p>\n<ul>\n<li>Enter the title of the notification<\/li>\n<li>Set the status of the notification as enabled<\/li>\n<li>Enter the content of the notification<\/li>\n<li>Upload an image for the notification<\/li>\n<li>Choose the type of notification as Product, Category, or Custom as required<br \/><img decoding=\"async\" class=\"alignnone size-full wp-image-379794\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/35.png\" alt=\"35\" width=\"1352\" height=\"582\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/35.png 1352w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/35-300x129.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/35-1200x517.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/35-250x108.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/35-768x331.png 768w\" sizes=\"(max-width: 1352px) 100vw, 1352px\" loading=\"lazy\" \/><\/li>\n<li>According to the chosen type of notification choose the product, category, or enter the custom link as required.\u00a0<\/li>\n<\/ul>\n<p>Lastly, tap the save button to save the notification.\u00a0<\/p>\n<p>To send the notification tap the Send Notification button.\u00a0<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-379795\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwa-notificationscreenshot-1.png\" alt=\"wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwa-notificationscreenshot-1\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwa-notificationscreenshot-1.png 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwa-notificationscreenshot-1-300x236.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwa-notificationscreenshot-1-250x196.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_admin.php_pagewkwcpwa-notificationscreenshot-1-768x603.png 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>After sending the notification, the same is visible on the PWA.<\/p>\n<p>If you require expert assistance or want to develop custom unique functionality, check out our <a href=\"https:\/\/webkul.com\/woocommerce-mobile-app-development\/\">WooCommerce mobile app development services.<\/a><\/p>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">How to use &#8211; PWA for WooCommerce?<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<h4><strong><u>For Android Devices:<\/u><\/strong><\/h4>\n<p><strong>1st Step<\/strong>: Navigate to the <strong>URL<\/strong> &#8211; <a href=\"https:\/\/wcpwa.webkul.com\/\" target=\"_blank\" rel=\"noopener\">https:\/\/wcpwa.webkul.com\/<\/a>\u00a0on your desktop and scan the <strong>QR Code<\/strong> available on the page using your <strong>Android mobile device<\/strong>.<\/p>\n<p><span style=\"color: #ff0000;\">**Note:<\/span> You can also directly scan the <strong>QR Code<\/strong> from the <strong>image displayed<\/strong> below.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-379870 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/Woocommerce-PWA-1.png\" alt=\"Woocommerce-PWA-1\" width=\"1302\" height=\"607\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/Woocommerce-PWA-1.png 1302w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/Woocommerce-PWA-1-300x140.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/Woocommerce-PWA-1-1200x559.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/Woocommerce-PWA-1-250x117.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/Woocommerce-PWA-1-768x358.png 768w\" sizes=\"(max-width: 1302px) 100vw, 1302px\" loading=\"lazy\" \/><\/p>\n<p><strong>2nd Step<\/strong>: After <strong>scanning<\/strong> the <strong>QR Code<\/strong>, you will be <strong>redirected<\/strong> to the <strong>Progressive Web App for WooCommerce<\/strong>.<\/p>\n<p>Tap the &#8216;<strong>Add PWA to Home Screen<\/strong>&#8216; notice(from the bottom of the screen) to <strong>add a shortcut<\/strong> of the <strong>PWA<\/strong> to your mobile home screen.<\/p>\n<div class=\"wk-image-wrapper\">\n<div class=\"wk-wrapper-left\"><img decoding=\"async\" class=\"alignnone size-full wp-image-379883\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-7-1.png\" alt=\"mockup-7-1\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-7-1.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-7-1-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-7-1-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-7-1-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/div>\n<div class=\"wk-wrapper-right\">\u00a0<\/div>\n<\/div>\n<p><strong>3rd Step<\/strong>: This brings up a <strong>pop-up<\/strong>. Tap the &#8216;<strong>Add<\/strong>&#8216; button on the right. Now, the <strong>PWA<\/strong> shortcut is added to your mobile home\/app screen.<\/p>\n<\/div>\n<\/div>\n\n\n<div class=\"wp-block-columns are-vertically-aligned-top has-2-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"576\" height=\"1024\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/mockup-8-576x1024.png\" alt=\"mockup-8\" class=\"wp-image-379884\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/mockup-8-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/mockup-8-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/mockup-8-140x249.png 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/mockup-8.png 720w\" sizes=\"(max-width: 576px) 100vw, 576px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"576\" height=\"1024\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/mockup-9-576x1024.png\" alt=\"mockup-9\" class=\"wp-image-379885\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/mockup-9-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/mockup-9-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/mockup-9-140x249.png 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/mockup-9.png 720w\" sizes=\"(max-width: 576px) 100vw, 576px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n<h4><strong><u>For iOS Devices:<\/u><\/strong><\/h4>\n<p><strong>1st Step<\/strong>: Navigate to the <strong>URL<\/strong> &#8211; <a href=\"https:\/\/wcpwa.webkul.com\/\" target=\"_blank\" rel=\"noopener\">https:\/\/wcpwa.webkul.com\/<\/a>\u00a0on your desktop.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-379870 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/Woocommerce-PWA-1.png\" alt=\"Woocommerce-PWA-1\" width=\"1302\" height=\"607\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/Woocommerce-PWA-1.png 1302w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/Woocommerce-PWA-1-300x140.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/Woocommerce-PWA-1-1200x559.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/Woocommerce-PWA-1-250x117.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/Woocommerce-PWA-1-768x358.png 768w\" sizes=\"(max-width: 1302px) 100vw, 1302px\" loading=\"lazy\" \/><\/p>\n<p><strong>2nd Step<\/strong>: <strong>Open<\/strong> the <strong>camera<\/strong> on your <strong>iOS device<\/strong> and scan the <strong>QR code<\/strong>. <strong>Tap<\/strong> the pop-up to <strong>open<\/strong> the <strong>website URL<\/strong>.<\/p>\n<p><span style=\"color: #ff0000;\">**Note:<\/span> You can also directly scan the <strong>QR Code<\/strong> from the <strong>image displayed<\/strong> in <strong>step 1<\/strong>.<\/p>\n<div class=\"wk-image-wrapper\">\n<div class=\"wk-wrapper-left\"><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/iOs_scan_qr_code-1.jpg\" alt=\"progressive web app for woocommerce iOs_scan_qr_code\" loading=\"lazy\" \/><\/div>\n<div class=\"wk-wrapper-right\">\u00a0<\/div>\n<\/div>\n<p><strong>3rd Step<\/strong>: Now, you can see the <strong>Progressive Web App for WooCommerce<\/strong>. Tap the &#8216;<strong>Share<\/strong> &#8216; button to<strong> add a shortcut<\/strong> to your mobile home screen.<\/p>\n<div class=\"wk-image-wrapper\">\n<div class=\"wk-wrapper-left\"><img decoding=\"async\" class=\"alignnone size-full wp-image-379862\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-3-1.png\" alt=\"mockup-3-1\" width=\"1242\" height=\"2688\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-3-1.png 1242w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-3-1-139x300.png 139w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-3-1-473x1024.png 473w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-3-1-115x249.png 115w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-3-1-768x1662.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-3-1-710x1536.png 710w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-3-1-946x2048.png 946w\" sizes=\"(max-width: 1242px) 100vw, 1242px\" loading=\"lazy\" \/><\/div>\n<div class=\"wk-wrapper-right\">\u00a0<\/div>\n<\/div>\n<p><strong>4th Step<\/strong>: Select &#8216;<strong>Add to Home Screen<\/strong>&#8216; option to add a <strong>PWA<\/strong> <strong>shortcut<\/strong>.<\/p>\n<div class=\"wk-image-wrapper\">\n<div class=\"wk-wrapper-left\"><img decoding=\"async\" class=\"alignnone size-full wp-image-379863\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-4-1.png\" alt=\"mockup-4-1\" width=\"1242\" height=\"2688\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-4-1.png 1242w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-4-1-139x300.png 139w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-4-1-473x1024.png 473w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-4-1-115x249.png 115w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-4-1-768x1662.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-4-1-710x1536.png 710w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-4-1-946x2048.png 946w\" sizes=\"(max-width: 1242px) 100vw, 1242px\" loading=\"lazy\" \/><\/div>\n<div class=\"wk-wrapper-right\">\u00a0<\/div>\n<\/div>\n<p><strong>5th Step<\/strong>: Now <strong>rename<\/strong> the <strong>PWA<\/strong> shortcut to something you can recognize and after that tap &#8216;<strong>DONE<\/strong>&#8216;.<\/p>\n<div class=\"wk-image-wrapper\">\n<div class=\"wk-wrapper-left\"><img decoding=\"async\" class=\"alignnone size-full wp-image-379864\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-5-1.png\" alt=\"mockup-5-1\" width=\"1242\" height=\"2688\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-5-1.png 1242w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-5-1-139x300.png 139w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-5-1-473x1024.png 473w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-5-1-115x249.png 115w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-5-1-768x1662.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-5-1-710x1536.png 710w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-5-1-946x2048.png 946w\" sizes=\"(max-width: 1242px) 100vw, 1242px\" loading=\"lazy\" \/><\/div>\n<div class=\"wk-wrapper-right\">\u00a0<\/div>\n<\/div>\n<p><strong>6th Step<\/strong>: <strong>PWA<\/strong> shortcut is visible on your <strong>home<\/strong> <strong>screen<\/strong>.<\/p>\n<div class=\"wk-image-wrapper\">\n<div class=\"wk-wrapper-left\"><img decoding=\"async\" class=\"alignnone size-full wp-image-379865\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-6-1.png\" alt=\"mockup-6-1\" width=\"1242\" height=\"2688\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-6-1.png 1242w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-6-1-139x300.png 139w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-6-1-473x1024.png 473w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-6-1-115x249.png 115w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-6-1-768x1662.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-6-1-710x1536.png 710w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-6-1-946x2048.png 946w\" sizes=\"(max-width: 1242px) 100vw, 1242px\" loading=\"lazy\" \/><\/div>\n<div class=\"wk-wrapper-right\">\u00a0<\/div>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">PWA For Users &#8212;<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<p>On your mobile home screen tap the <strong>PWA<\/strong> icon to open the <strong>Progressive Web App for WooCommerce<\/strong>.<\/p>\n<div class=\"wk-image-wrapper\">\n<div class=\"wk-wrapper-left\"><img decoding=\"async\" class=\"alignnone size-full wp-image-379902\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-10.png\" alt=\"mockup-10\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-10.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-10-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-10-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-10-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/div>\n<div class=\"wk-wrapper-right\">\u00a0<\/div>\n<\/div>\n<p>Tapping the icon brings up a <strong>splash<\/strong> <strong>screen<\/strong>. After that, the home screen of the PWA is displayed to the users.<\/p>\n<div class=\"wk-image-wrapper\">\n<div class=\"wk-wrapper-left\"><img decoding=\"async\" class=\"alignnone size-full wp-image-379904\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-11.png\" alt=\"mockup-11\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-11.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-11-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-11-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-11-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/div>\n<div class=\"wk-wrapper-right\"><img decoding=\"async\" class=\"alignnone size-full wp-image-379906\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-12.png\" alt=\"mockup-12\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-12.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-12-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-12-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-12-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/div>\n<\/div>\n<p>The<strong> users<\/strong> can see the <strong>home screen<\/strong> displaying the &#8211;<\/p>\n<ul>\n<li><strong>Slider<\/strong><\/li>\n<li><strong>Search Icon<\/strong><\/li>\n<li><strong>Top Categories<\/strong><\/li>\n<li><strong>New Arrivals<\/strong><\/li>\n<li><strong>Featured Products<\/strong><\/li>\n<li><strong>On Sale Products<\/strong><\/li>\n<li><strong>Home Page Option<\/strong><\/li>\n<li><strong>Categories Option<\/strong><\/li>\n<li><strong>SignIn Option<\/strong><\/li>\n<li><strong>Cart Option<\/strong><\/li>\n<\/ul>\n<p>Within the <strong>PWA for WooCommerce<\/strong>, the users can navigate to the <b>home page <\/b>of the PWA by tapping the Home icon in the lower\u00a0left-hand corner.<\/p>\n<p>If you require ongoing support and maintenance services for your WooCommerce store, check out our <a href=\"https:\/\/webkul.com\/woocommerce-support-maintenance-services\/\">WooCommerce Support and Maintenance Services<\/a>.<\/p>\n<div class=\"wk-image-wrapper\">\n<div class=\"wk-wrapper-left\"><img decoding=\"async\" class=\"alignnone size-full wp-image-379911\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-13.png\" alt=\"mockup-13\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-13.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-13-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-13-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-13-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/div>\n<div>\u00a0<\/div>\n<div>\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div>\n<h4>Search Products:\u00a0<\/h4>\n<p>The users can search for the products within the store by tapping on the search icon in the top right-hand corner.<\/p>\n<p>In the search section just enter the 3 or more search letters to search the product within the store.\u00a0<\/p>\n<div class=\"wk-two-columns\">\n<div class=\"wk-columns --left\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-380963\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-41.png\" alt=\"mockup-41\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-41.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-41-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-41-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-41-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<div class=\"wk-columns --right\">\u00a0<\/div>\n<\/div>\n<h4><u><strong>Register\/Login:<\/strong><\/u><\/h4>\n<p>Navigate to the profile section within the PWA and you will find the option to log in to your account if you already have one.\u00a0<\/p>\n<div class=\"wk-two-columns\">\n<div class=\"wk-columns --left\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-379913\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-14.png\" alt=\"mockup-14\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-14.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-14-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-14-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-14-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<p>If the user wants to register then he can tap on the Sign Up option in the profile section. After that, the user can enter the details and register himself as a customer within the PWA.<\/p>\n<div class=\"wk-two-columns\">\n<div class=\"wk-columns --left\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-379914\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-15.png\" alt=\"mockup-15\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-15.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-15-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-15-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-15-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<div class=\"wk-columns --right\">\u00a0<\/div>\n<\/div>\n<p>The user who is already registered and forgets his password can make use of the Forget password option to reset his password.<\/p>\n<p>The user needs to enter his registered email address or user name and tap on the Reset password button to reset the password thereafter.\u00a0<\/p>\n<div class=\"wk-two-columns\">\n<div class=\"wk-columns --left\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-380935\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-38.png\" alt=\"mockup-38\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-38.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-38-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-38-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-38-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<div class=\"wk-columns --right\">\u00a0<\/div>\n<\/div>\n<p>Now, the customer can enter his details again and will be logged in.<\/p>\n<div class=\"wk-two-columns\">\n<div class=\"wk-columns --left\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-379915\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-16.png\" alt=\"mockup-16\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-16.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-16-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-16-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-16-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<div class=\"wk-columns --right\">\u00a0<\/div>\n<\/div>\n<p>After\u00a0<strong>Sign In<\/strong>, the\u00a0<strong>customer<\/strong>\u00a0has the following\u00a0<strong>account options<\/strong>\u00a0\u2013<\/p>\n<ul>\n<li><strong>Theme Mode<\/strong><\/li>\n<li><strong>Personal information<\/strong><\/li>\n<li><strong>My Orders\u00a0<\/strong><\/li>\n<li><strong>My Address Book\u00a0<\/strong><\/li>\n<li><strong>Custom Pages<\/strong>(Like &#8211; Sample Page)<\/li>\n<\/ul>\n<p>Let&#8217;s go through each section&#8217;s overview.<\/p>\n<h4><strong>Theme Mode:<\/strong><\/h4>\n<p>Here, the users can change the theme to light and dark modes for the PWA as required by tapping on the crest icon, and tapping on the light icon brings back the light theme.\u00a0<\/p>\n<div class=\"wk-two-columns\">\n<div class=\"wk-columns --left\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-379922\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-17.png\" alt=\"mockup-17\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-17.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-17-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-17-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-17-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<div class=\"wk-columns --right\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-379923\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-18.png\" alt=\"mockup-18\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-18.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-18-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-18-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-18-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<h4><strong>Personal Information<\/strong>:<\/h4>\n<p>Under this section, customers can alter their information as required. Apart from that, the customer can add a Gravatar as required for his profile.<\/p>\n<div class=\"wk-two-columns\">\n<div class=\"wk-columns --left\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-379924\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-19.png\" alt=\"mockup-19\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-19.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-19-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-19-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-19-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<div class=\"wk-columns --right\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-379925\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-20.png\" alt=\"mockup-20\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-20.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-20-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-20-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-20-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<h4>My Orders:<\/h4>\n<p>Under this section, the customers can see the complete list of orders that they have placed. Apart from that, they can view the details of a particular order as well.<\/p>\n<div class=\"wk-two-columns\">\n<div class=\"wk-columns --left\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-379926\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-21.png\" alt=\"mockup-21\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-21.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-21-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-21-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-21-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<div class=\"wk-columns --right\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-379927\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-22.png\" alt=\"mockup-22\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-22.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-22-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-22-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-22-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<h4>My Address Book:<\/h4>\n<p>Under this section, the customers can see their added addresses and can edit the addresses as well as required.\u00a0<\/p>\n<div class=\"wk-two-columns\">\n<div class=\"wk-columns --left\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-379928\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-23.png\" alt=\"mockup-23\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-23.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-23-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-23-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-23-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<div class=\"wk-columns --right\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-379929\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-24.png\" alt=\"mockup-24\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-24.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-24-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-24-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-24-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<h4>Custom Pages:\u00a0<\/h4>\n<p>Here, the customers can see the custom pages added by the admin from the configuration settings of the PWA. Tapping on the particular custom page displays the content of the page.<\/p>\n<div class=\"wk-two-columns\">\n<div class=\"wk-columns --left\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-379931\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-16-1.png\" alt=\"mockup-16-1\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-16-1.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-16-1-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-16-1-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-16-1-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<div class=\"wk-columns --right\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-379930\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-25.png\" alt=\"mockup-25\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-25.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-25-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-25-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-25-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n<h4 class=\"wp-block-heading\">Categories:<\/h4>\n\n\n\n<p>Here, the customers can see the complete list of store categories and can navigate within them as required. Tapping on a particular category brings up the products within the same. <\/p>\n\n\n<div class=\"wk-two-columns\">\n<div class=\"wk-columns --left\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-380684\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-26.png\" alt=\"mockup-26\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-26.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-26-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-26-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-26-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<div class=\"wk-columns --right\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-380686\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-27.png\" alt=\"mockup-27\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-27.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-27-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-27-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-27-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<p>Apart from that, the customers can sort and filter the products as per the available options.&nbsp;<\/p>\n<div class=\"wk-two-columns\">\n<div class=\"wk-columns --left\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-380688\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-28.png\" alt=\"mockup-28\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-28.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-28-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-28-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-28-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<div class=\"wk-columns --right\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-380690\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-29.png\" alt=\"mockup-29\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-29.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-29-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-29-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-29-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<p>The admin can change the category banners from the backend. To do so, navigate through Products-&gt;Categories and then edit a particular category to add the category banner.&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-380823\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_term.php_taxonomyproduct_cattag_ID17post_typeproductwp_http_referer2Fwp-admin2Fedit-tags.php3Ftaxonomy3Dproduct_cat26post_type3Dproductscreenshot.png\" alt=\"wcpwa.webkul.com_wp-admin_term.php_taxonomyproduct_cattag_ID17post_typeproductwp_http_referer2Fwp-admin2Fedit-tags.php3Ftaxonomy3Dproduct_cat26post_type3Dproductscreenshot\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_term.php_taxonomyproduct_cattag_ID17post_typeproductwp_http_referer2Fwp-admin2Fedit-tags.php3Ftaxonomy3Dproduct_cat26post_type3Dproductscreenshot.png 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_term.php_taxonomyproduct_cattag_ID17post_typeproductwp_http_referer2Fwp-admin2Fedit-tags.php3Ftaxonomy3Dproduct_cat26post_type3Dproductscreenshot-300x236.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_term.php_taxonomyproduct_cattag_ID17post_typeproductwp_http_referer2Fwp-admin2Fedit-tags.php3Ftaxonomy3Dproduct_cat26post_type3Dproductscreenshot-250x196.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/wcpwa.webkul.com_wp-admin_term.php_taxonomyproduct_cattag_ID17post_typeproductwp_http_referer2Fwp-admin2Fedit-tags.php3Ftaxonomy3Dproduct_cat26post_type3Dproductscreenshot-768x603.png 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>Also, the customer can easily make a checkout. To do so, the customer will navigate to the product and add it to the cart.<\/p>\n<div class=\"wk-two-columns\">\n<div class=\"wk-columns --left\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-380692\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-30.png\" alt=\"mockup-30\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-30.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-30-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-30-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-30-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<div class=\"wk-columns --right\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-380693\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-31.png\" alt=\"mockup-31\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-31.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-31-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-31-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-31-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<p>After adding to the cart the customer will go to the bag. Here, the customer will be able to apply a coupon as well and can change the delivery address as well as per requirement.<\/p>\n<p>After that, the customer will tap on the place order button and will be taken to the page where the customer needs to select the payment method.&nbsp;<\/p>\n<p>After selecting the payment method, the customer will tap the complete order button.&nbsp;<\/p>\n<div class=\"wk-two-columns\">\n<div class=\"wk-columns --left\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-380694\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-32.png\" alt=\"mockup-32\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-32.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-32-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-32-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-32-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<div class=\"wk-columns --right\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-380695\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-33.png\" alt=\"mockup-33\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-33.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-33-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-33-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-33-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<p>Completing the order the customer will see the success section for the placed order.&nbsp;<\/p>\n<div class=\"wk-two-columns\">\n<div class=\"wk-columns --left\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-380699\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-34.png\" alt=\"mockup-34\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-34.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-34-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-34-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-34-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<div class=\"wk-columns --right\">&nbsp;<\/div>\n<\/div>\n\n\n<p>Apart from placing the orders, the customers can also make ratings and reviews on the products. For the same, the customer will navigate to the product page and tap on the ratings and review option. <\/p>\n\n\n\n<p>After that, the customer will see the option to write a review.<\/p>\n\n\n<div class=\"wk-two-columns\">\n<div class=\"wk-columns --left\">\n<p><img decoding=\"async\" class=\"alignnone wp-image-380957 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-39.png\" alt=\"mockup-39\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-39.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-39-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-39-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-39-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<div class=\"wk-columns --right\">\n<p><img decoding=\"async\" class=\"alignnone wp-image-380958 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-40.png\" alt=\"mockup-40\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-40.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-40-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-40-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-40-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<p>Tap the Write Review button and give the rating and enter your review description for the product. Lastly, tap the Submit Review button.<\/p>\n<p>After approval from the admin, the review will be visible on the product page.\u00a0<\/p>\n<div class=\"wk-two-columns\">\n<div class=\"wk-columns --left\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-380718\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-37.png\" alt=\"mockup-37\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-37.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-37-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-37-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/mockup-37-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<div class=\"wk-columns --right\">\u00a0<\/div>\n<\/div>\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">How to Integrate &#8211; WooCommerce Stripe Payment Gateway for PWA<\/h3>\n<\/div><\/div>\n\n\n\n<p>After the successful installation of the PWA for WooCommerce you need to navigate through Plugins and search for Stripe as per the below snapshot. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"623\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/screenshot_from_2023_06_29_13_47_05-1200x623.png\" alt=\"screenshot_from_2023_06_29_13_47_05\" class=\"wp-image-388886\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/screenshot_from_2023_06_29_13_47_05-1200x623.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/screenshot_from_2023_06_29_13_47_05-300x156.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/screenshot_from_2023_06_29_13_47_05-250x130.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/screenshot_from_2023_06_29_13_47_05-768x398.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/screenshot_from_2023_06_29_13_47_05.png 1280w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Now, install and activate the Stripe payment gateway within your WooCommerce store. <\/p>\n\n\n\n<p>After the above step, at the header, you can see a message displaying the details of installing and configuring the Stripe Payment gateway with the PWA application. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"525\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/1-5-7-1200x525.png\" alt=\"1-5-7\" class=\"wp-image-388888\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/1-5-7-1200x525.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/1-5-7-300x131.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/1-5-7-250x109.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/1-5-7-768x336.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/1-5-7.png 1283w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Tap the button to integrate the payment method with the PWA app and activate it as well. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"612\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/2-8-1200x612.png\" alt=\"2-8\" class=\"wp-image-388889\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/2-8-1200x612.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/2-8-300x153.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/2-8-250x127.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/2-8-768x391.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/2-8.png 1295w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>After activating you can see a success message as well. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"593\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/3-3-5-1200x593.png\" alt=\"3-3-5\" class=\"wp-image-388893\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/3-3-5-1200x593.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/3-3-5-300x148.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/3-3-5-250x124.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/3-3-5-768x379.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/3-3-5.png 1273w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Now, customers can see this payment gateway at checkout time in the PWA app after you have configured the payment gateway.<\/p>\n\n\n\n<p>You can also checkout <a href=\"https:\/\/store.webkul.com\/woocommerce-multi-vendor-stripe-payment.html\">Multi Vendor Stripe Payment for WooCommerce<\/a> plugin&nbsp;to accept payments from all over the world for your e-commerce store.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"459\" height=\"1024\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/1-459x1024.jpg\" alt=\"1\" class=\"wp-image-388896\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/1-459x1024.jpg 459w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/1-135x300.jpg 135w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/1-112x249.jpg 112w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/1-768x1712.jpg 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/1-689x1536.jpg 689w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/1-919x2048.jpg 919w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/1.jpg 1080w\" sizes=\"(max-width: 459px) 100vw, 459px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"support\">Support<\/h3>\n\n\n\n<p>For any technical assistance kindly&nbsp;<a href=\"https:\/\/webkul.uvdesk.com\/en\/customer\/create-ticket\/\" target=\"_blank\" rel=\"noreferrer noopener\"> raise&nbsp;a ticket<\/a>&nbsp;or&nbsp;reach&nbsp;us by email at&nbsp;support@webkul.com. Thanks for Your Time! Have a Good Day!<\/p>\n\n\n\n<p>Also, discover various solutions to add more features and enhance your online store by visiting the&nbsp;<a href=\"https:\/\/store.webkul.com\/woocommerce-plugins.html\" target=\"_blank\" rel=\"noreferrer noopener\">WooCommerce plugins<\/a>.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Convert your WooCommerce website into a PWA (Progressive Web App) instantly. The store visitors will experience the high-performance benefits of the PWA, which is based on a headless architecture. The customers will be able to come back to your website by launching the app from their mobile home screen and can interact with your website <a href=\"https:\/\/webkul.com\/blog\/progressive-web-app-woocommerce\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":79,"featured_media":184163,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2990,7966,1260],"tags":[8783],"class_list":["post-177286","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-featured","category-wordpress-woocommerce","category-wordpress","tag-progressive-web-app-for-woocommerce"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>WooCommerce Progressive Web App | PWA eCommerce Mobile Plugin<\/title>\n<meta name=\"description\" content=\"WooCommerce progressive web app (PWA) will covert eCommerce store into a native-style mobile app with offline &amp; Push Notifications.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/progressive-web-app-woocommerce\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WooCommerce Progressive Web App | PWA eCommerce Mobile Plugin\" \/>\n<meta property=\"og:description\" content=\"WooCommerce progressive web app (PWA) will covert eCommerce store into a native-style mobile app with offline &amp; Push Notifications.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/progressive-web-app-woocommerce\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-07T07:14:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-22T14:32:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/04042103\/progressive_web_app_for_woocommerce.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"505\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Nishad Bhan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nishad Bhan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"27 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/progressive-web-app-woocommerce\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/progressive-web-app-woocommerce\/\"},\"author\":{\"name\":\"Nishad Bhan\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/d5f376b54be75483744f8320d172d9e0\"},\"headline\":\"Progressive Web App for WooCommerce\",\"datePublished\":\"2019-06-07T07:14:26+00:00\",\"dateModified\":\"2026-04-22T14:32:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/progressive-web-app-woocommerce\/\"},\"wordCount\":2557,\"commentCount\":12,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/progressive-web-app-woocommerce\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/04042103\/progressive_web_app_for_woocommerce.png\",\"keywords\":[\"progressive web app for woocommerce\"],\"articleSection\":[\"featured\",\"WooCommerce\",\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/progressive-web-app-woocommerce\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/progressive-web-app-woocommerce\/\",\"url\":\"https:\/\/webkul.com\/blog\/progressive-web-app-woocommerce\/\",\"name\":\"WooCommerce Progressive Web App | PWA eCommerce Mobile Plugin\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/progressive-web-app-woocommerce\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/progressive-web-app-woocommerce\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/04042103\/progressive_web_app_for_woocommerce.png\",\"datePublished\":\"2019-06-07T07:14:26+00:00\",\"dateModified\":\"2026-04-22T14:32:59+00:00\",\"description\":\"WooCommerce progressive web app (PWA) will covert eCommerce store into a native-style mobile app with offline & Push Notifications.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/progressive-web-app-woocommerce\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/progressive-web-app-woocommerce\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/progressive-web-app-woocommerce\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/04042103\/progressive_web_app_for_woocommerce.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/04042103\/progressive_web_app_for_woocommerce.png\",\"width\":1100,\"height\":505,\"caption\":\"progressive_web_app_for_woocommerce\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/progressive-web-app-woocommerce\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Progressive Web App for WooCommerce\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/d5f376b54be75483744f8320d172d9e0\",\"name\":\"Nishad Bhan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7a708390ff9ca00da55b3ed0b076fe4f3624005bce5b5d88e6b3d99d15c13ec2?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7a708390ff9ca00da55b3ed0b076fe4f3624005bce5b5d88e6b3d99d15c13ec2?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Nishad Bhan\"},\"description\":\"Nishad Bhan excels in analyzing eCommerce processes on the Magento platform, optimizing workflows, and delivering strategic solutions. Expertise ensures seamless platform integration, driving digital innovation and aligning technology with business objectives for growth.\",\"url\":\"https:\/\/webkul.com\/blog\/author\/nishad-bhan981\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WooCommerce Progressive Web App | PWA eCommerce Mobile Plugin","description":"WooCommerce progressive web app (PWA) will covert eCommerce store into a native-style mobile app with offline & Push Notifications.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/progressive-web-app-woocommerce\/","og_locale":"en_US","og_type":"article","og_title":"WooCommerce Progressive Web App | PWA eCommerce Mobile Plugin","og_description":"WooCommerce progressive web app (PWA) will covert eCommerce store into a native-style mobile app with offline & Push Notifications.","og_url":"https:\/\/webkul.com\/blog\/progressive-web-app-woocommerce\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2019-06-07T07:14:26+00:00","article_modified_time":"2026-04-22T14:32:59+00:00","og_image":[{"width":1100,"height":505,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/04042103\/progressive_web_app_for_woocommerce.png","type":"image\/png"}],"author":"Nishad Bhan","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Nishad Bhan","Est. reading time":"27 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/progressive-web-app-woocommerce\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/progressive-web-app-woocommerce\/"},"author":{"name":"Nishad Bhan","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/d5f376b54be75483744f8320d172d9e0"},"headline":"Progressive Web App for WooCommerce","datePublished":"2019-06-07T07:14:26+00:00","dateModified":"2026-04-22T14:32:59+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/progressive-web-app-woocommerce\/"},"wordCount":2557,"commentCount":12,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/progressive-web-app-woocommerce\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/04042103\/progressive_web_app_for_woocommerce.png","keywords":["progressive web app for woocommerce"],"articleSection":["featured","WooCommerce","WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/progressive-web-app-woocommerce\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/progressive-web-app-woocommerce\/","url":"https:\/\/webkul.com\/blog\/progressive-web-app-woocommerce\/","name":"WooCommerce Progressive Web App | PWA eCommerce Mobile Plugin","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/progressive-web-app-woocommerce\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/progressive-web-app-woocommerce\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/04042103\/progressive_web_app_for_woocommerce.png","datePublished":"2019-06-07T07:14:26+00:00","dateModified":"2026-04-22T14:32:59+00:00","description":"WooCommerce progressive web app (PWA) will covert eCommerce store into a native-style mobile app with offline & Push Notifications.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/progressive-web-app-woocommerce\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/progressive-web-app-woocommerce\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/progressive-web-app-woocommerce\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/04042103\/progressive_web_app_for_woocommerce.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/06\/04042103\/progressive_web_app_for_woocommerce.png","width":1100,"height":505,"caption":"progressive_web_app_for_woocommerce"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/progressive-web-app-woocommerce\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Progressive Web App for WooCommerce"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/d5f376b54be75483744f8320d172d9e0","name":"Nishad Bhan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7a708390ff9ca00da55b3ed0b076fe4f3624005bce5b5d88e6b3d99d15c13ec2?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7a708390ff9ca00da55b3ed0b076fe4f3624005bce5b5d88e6b3d99d15c13ec2?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Nishad Bhan"},"description":"Nishad Bhan excels in analyzing eCommerce processes on the Magento platform, optimizing workflows, and delivering strategic solutions. Expertise ensures seamless platform integration, driving digital innovation and aligning technology with business objectives for growth.","url":"https:\/\/webkul.com\/blog\/author\/nishad-bhan981\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/177286","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/79"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=177286"}],"version-history":[{"count":400,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/177286\/revisions"}],"predecessor-version":[{"id":504956,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/177286\/revisions\/504956"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media\/184163"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=177286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=177286"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=177286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}