{"id":200,"date":"2019-07-04T07:54:21","date_gmt":"2019-07-04T07:54:21","guid":{"rendered":"http:\/\/pwa-for-wp.com\/docs\/?post_type=ht_kb&#038;p=200"},"modified":"2019-10-14T06:56:45","modified_gmt":"2019-10-14T06:56:45","slug":"how-to-add-custom-add-to-homescreen-banner","status":"publish","type":"ht_kb","link":"https:\/\/pwa-for-wp.com\/docs\/article\/how-to-add-custom-add-to-homescreen-banner\/","title":{"rendered":"How to Add Custom &#8220;Add to Home&#8221; banner"},"content":{"rendered":"\n<p>If you don\u2019t like the default Add to Home button and if you want to add your own custom \u201cAdd to Home\u201d banner then follow the below steps.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>You will find this option in <strong>WordPress Dashboard<\/strong> -> Navigate to <strong>PWA<\/strong> option -> <strong>Settings<\/strong> -> <span style=\"background-color: rgb(232, 234, 235);\"><b>Features <\/b><\/span>-> Enable this &#8220;<strong>Custom Add To Home Banner<\/strong>&#8221; option. Click on the \u201c<strong>gear<\/strong>\u201d icon like below the screenshot. <\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"464\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/7-1024x464.png\" alt=\"\" class=\"wp-image-514\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/7-1024x464.png 1024w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/7-300x136.png 300w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/7-768x348.png 768w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/7-50x23.png 50w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/7-60x27.png 60w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/7-100x45.png 100w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/7.png 1086w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>Once you click on the gear icon you can access the Settings page. Check the &#8220;<strong>Custom Add To Home Banner<\/strong>&#8221; option. <\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"833\" height=\"441\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/8.png\" alt=\"\" class=\"wp-image-522\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/8.png 833w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/8-300x159.png 300w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/8-768x407.png 768w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/8-50x26.png 50w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/8-60x32.png 60w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/8-100x53.png 100w\" sizes=\"auto, (max-width: 833px) 100vw, 833px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>First, you need to check this option &#8211; Show custom responsive add to home banner popup.  <\/li><li>If you want to enable on the desktop then check &#8211; enable on desktop option. <\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Customizing Add to Home Banner<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>You will find this option in <strong>WordPress Dashboard<\/strong> -> Navigate to <strong>PWA<\/strong> option -> <strong>Settings<\/strong> -> <strong>Features <\/strong>-> Enable this &#8220;<strong>Custom Add To Home Banner<\/strong>&#8221; option. Click on the \u201c<strong>gear<\/strong>\u201d icon Custom Add To Homescreen Customization.  <\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"835\" height=\"552\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/11.png\" alt=\"\" class=\"wp-image-524\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/11.png 835w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/11-300x198.png 300w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/11-768x508.png 768w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/11-50x33.png 50w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/11-60x40.png 60w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/11-100x66.png 100w\" sizes=\"auto, (max-width: 835px) 100vw, 835px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>By using this option you can change the title, button text, background color, Banner title color, Banner Text color, and Button background color.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">The Output of Custom Add To Home Banner in Desktop<\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"475\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/07\/chb-2-1-1024x475.png\" alt=\"\" class=\"wp-image-240\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/07\/chb-2-1-1024x475.png 1024w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/07\/chb-2-1-300x139.png 300w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/07\/chb-2-1-768x356.png 768w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/07\/chb-2-1-50x23.png 50w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/07\/chb-2-1-60x28.png 60w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/07\/chb-2-1-100x46.png 100w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/07\/chb-2-1.png 1348w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>Once you click on the Add button App it will show pop up message Install the app you need to click on the install button like below the screenshot.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"264\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/07\/chb-3-1-1024x264.png\" alt=\"\" class=\"wp-image-241\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/07\/chb-3-1-1024x264.png 1024w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/07\/chb-3-1-300x77.png 300w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/07\/chb-3-1-768x198.png 768w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/07\/chb-3-1-50x13.png 50w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/07\/chb-3-1-60x15.png 60w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/07\/chb-3-1-100x26.png 100w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/07\/chb-3-1.png 1352w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>Once you click on install button app will be installed on your Desktop and mobile<\/li><\/ul>\n\n\n\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n\n\n\n<p>We hope we\u2019ve clear your doubts in case If you have any feedback or questions, Just contact us&nbsp;<strong><a href=\"http:\/\/pwa-for-wp.com\/contact-us\/\">here<\/a><\/strong>and we are always available for you.<\/p>\n\n\n\n<p><br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you don\u2019t like the default Add to Home button and if you want to add your own custom \u201cAdd to Home\u201d banner then follow the below steps. You will find this option in WordPress Dashboard -> Navigate to PWA option -> Settings -> Features -> Enable this &#8220;Custom Add&#8230;<\/p>\n","protected":false},"author":3,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[6],"ht-kb-tag":[],"class_list":["post-200","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-how-to"],"_links":{"self":[{"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb\/200","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/comments?post=200"}],"version-history":[{"count":39,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb\/200\/revisions"}],"predecessor-version":[{"id":525,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb\/200\/revisions\/525"}],"wp:attachment":[{"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/media?parent=200"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb-category?post=200"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb-tag?post=200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}