{"id":10216,"date":"2023-12-05T12:17:02","date_gmt":"2023-12-05T12:17:02","guid":{"rendered":"https:\/\/www.picreel.com\/blog\/?p=10216"},"modified":"2025-10-15T05:26:15","modified_gmt":"2025-10-15T05:26:15","slug":"magento-popup","status":"publish","type":"post","link":"https:\/\/www.picreel.com\/blog\/magento-popup\/","title":{"rendered":"Magento Popup Guide: Built-in Tool vs Simple No-Code Alternative"},"content":{"rendered":"<p>I used\u00a0<strong>Magento<\/strong>\u00a0for my businesses in the beginning stages, and it really helped me with creating my functional e-commerce website, catalog management, and a lot more.<\/p>\n<p>Recently, I discovered the potential of using popups to boost my online presence and engagement. Popups have shown significant benefits in growing email lists and improving click-through rates (CTRs).<\/p>\n<p>There are two ways to create a Magento 2 popup: using Magento&#8217;s own popup builder or utilizing a standardized popup tool like\u00a0<a href=\"https:\/\/www.picreel.com\/\">Picreel<\/a>. In fact, here&#8217;s how my Picreel popup looks like in Magento:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10910 size-full\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/12\/Mask-Group-315.jpg\" alt=\"Magento popup\" width=\"1076\" height=\"659\" \/><\/p>\n<p>But does Magento offer popups? Yes, Magento does offer popup functionality. So, let&#8217;s compare Magento&#8217;s own popup builder with Picreel, considering the following criteria:<\/p>\n<div id=\"tablepress-185-scroll-wrapper\" class=\"tablepress-scroll-wrapper\">\n\n<table id=\"tablepress-185\" class=\"tablepress tablepress-id-185 tablepress-responsive\">\n<thead>\n<tr class=\"row-1 odd\">\n\t<th class=\"column-1\">Criteria<\/th><th class=\"column-2\">Magento Popup<\/th><th class=\"column-3\">Picreel Popup<\/th>\n<\/tr>\n<\/thead>\n<tbody class=\"row-hover\">\n<tr class=\"row-2 even\">\n\t<td class=\"column-1\">Multi-platform support<\/td><td class=\"column-2\">\u274c Limited to Magento platform only<\/td><td class=\"column-3\">\u2705 Supports integration with various website platforms, including WordPress, Wix, Drupal, and more.<\/td>\n<\/tr>\n<tr class=\"row-3 odd\">\n\t<td class=\"column-1\">Exit Intent Technology<\/td><td class=\"column-2\">\u274c Does not offer exit intent technology<\/td><td class=\"column-3\">\u2705 Can trigger popups when users show signs of leaving<\/td>\n<\/tr>\n<tr class=\"row-4 even\">\n\t<td class=\"column-1\">Advanced Popup Builder<\/td><td class=\"column-2\">\u2705 Offers basic popup creation with code<\/td><td class=\"column-3\">\u2705 Allows for advanced customization of popups, including different designs and triggering options<\/td>\n<\/tr>\n<tr class=\"row-5 odd\">\n\t<td class=\"column-1\">Integrates with various website platforms<\/td><td class=\"column-2\">\u274c Integrates only with the Magento platform<\/td><td class=\"column-3\">\u2705 Able to integrate with a variety of website platforms across the web.<\/td>\n<\/tr>\n<tr class=\"row-6 even\">\n\t<td class=\"column-1\">Advanced targeting options<\/td><td class=\"column-2\">\u274c Does not offer targeting options<\/td><td class=\"column-3\">\u2705 Provides advanced targeting features, offering personalized content based on user behaviors<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n<\/div>\n<p>From my experience, I recommend using Picreel for creating popups because it excels in the following areas:<\/p>\n<ul>\n<li><strong>No coding required:<\/strong>\u00a0Unlike Magento, Picreel simplifies creating popups with a code-free and drag-and-drop interface. No coding is required whatsoever.<\/li>\n<li><strong>Better customization options:<\/strong>\u00a0With Picreel, you have extensive control over the design and layout of your popups, ensuring they align with your brand and capture attention effectively.<\/li>\n<li><strong>Advanced targeting options:<\/strong>\u00a0The\u00a0<a href=\"https:\/\/www.picreel.com\/features\/popup-targeting\/\">advanced targeting<\/a>\u00a0capabilities of Picreel enable you to show your popups to specific audience segments based on various parameters, maximizing the impact of your campaign.<\/li>\n<\/ul>\n<p>Now, let&#8217;s dive into the step-by-step tutorial of creating popups using both methods.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Method_1_Using_Magento%E2%80%99s_Built-in_Popup_Tool\"><\/span>Method 1: Using Magento\u2019s Built-in Popup Tool<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Magento offers a built-in popup builder that you can leverage to create popups. Follow these steps to create a Magento 2 popup:<\/p>\n<p><strong>1.<\/strong> Create a\u00a0<strong>\u2018registration.php\u2019<\/strong>\u00a0file inside your extension folder and add the following code:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10221\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/12\/Magento-_PIC_registration.php_.jpg\" alt=\"registration.php\" width=\"1533\" height=\"254\" \/><\/p>\n<p><strong>2.<\/strong> Inside the\u00a0<strong>\u2018etc\u2019<\/strong>\u00a0directory of your extension, create a\u00a0<strong>\u2018module.xml\u2019<\/strong>\u00a0file and then add the following code:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10222\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/12\/Magento-_PIC_module.xml_.jpg\" alt=\"module.xml\" width=\"1533\" height=\"179\" \/><\/p>\n<p><strong>3.<\/strong> Create a\u00a0<strong>\u2018routes.xml\u2019<\/strong>\u00a0file inside the\u00a0<em>\u2018etc\/frontend\u2019<\/em>\u00a0directory of your extension with this code:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10223\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/12\/Magento-_PIC_routes.xml_.jpg\" alt=\"routes.xml\" width=\"1533\" height=\"324\" \/><\/p>\n<p><strong>4.<\/strong> Now, create a\u00a0<strong><em>\u2018extension_index_index.xml\u2019<\/em><\/strong>\u00a0file inside the\u00a0<strong><em>\u2018view\/frontend\/layout\u2019<\/em><\/strong>\u00a0directory of your extension with this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10224\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/12\/Magento-_PIC_extension_index_index.xm_.jpg\" alt=\"extension_index_index.xml\" width=\"1533\" height=\"324\" \/><\/p>\n<p><strong>5.<\/strong> Create a\u00a0<strong><em>\u2018custom.phtml\u2019<\/em><\/strong>\u00a0file using this code:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10225\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/12\/Magento-_PIC_custom.phtml_.jpg\" alt=\"custom.phtml\" width=\"1121\" height=\"805\" \/><\/p>\n<p><strong>6.<\/strong> Once you have completed these steps, the form popup modal will be created in Magento 2.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10226\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/12\/Magento-_PIC_Custom-Form-Popup.jpg\" alt=\"Custom Form Popup\" width=\"1310\" height=\"656\" \/><\/p>\n<p><strong>Note: You can customize the content and appearance of the popup by modifying the custom.phtml file.<\/strong><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Method_2_Using_Picreel_Popup_Builder\"><\/span>Method 2: Using Picreel Popup Builder<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Picreel is a versatile popup builder that works seamlessly across multiple platforms. Watch this video tutorial on how you can create a popup using Picreel.<\/p>\n<p><iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/J1tBmOnBJEA?si=lTWMlXNS6b69Yai9\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>Here are step-by-step instructions on creating a popup in Magento 2 using Picreel:<\/p>\n<p><strong>1.<\/strong> Sign up for a Picreel account and log in.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9856\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/11\/PP_PIC_Sign-up-for-a-Picreel-account-and-log-in.jpg\" alt=\"Sign up for a Picreel account and log in\" width=\"1313\" height=\"658\" \/><\/p>\n<p><strong>2.<\/strong> Navigate to the \u201c<strong>Campaigns<\/strong>\u201d menu and click &#8220;<strong>New Campaign.<\/strong>&#8221; You can select the templates option from the drop-down or start from scratch.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10754\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/12\/PP_PIC_New-Campaign.-2.jpg\" alt=\"New Campaign\" width=\"1313\" height=\"561\" \/><\/p>\n<p><strong>3.<\/strong> From the templates menu, choose the type of popup you want to create.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9859\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/11\/PP_PIC_templates-menu.jpg\" alt=\"templates menu\" width=\"1313\" height=\"243\" \/><\/p>\n<p><strong>4.<\/strong> Once you select the design, customize it according to your preferences.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10227\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/12\/PP_PIC_design-customize-\u2013-6.jpg\" alt=\"design customize\" width=\"1313\" height=\"619\" \/><\/p>\n<p><strong>5.<\/strong> Configure your targeting and trigger options to specify when and where you want your popup to appear.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9861\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/11\/PP_PIC_Configure.jpg\" alt=\"Configure\" width=\"1313\" height=\"558\" \/><\/p>\n<p><strong>6.<\/strong> Click &#8220;<strong>Save<\/strong>&#8221; to activate your popup.<\/p>\n<h3>Embedding Picreel HTML Code Inside Magento<\/h3>\n<p>To embed the Picreel popup in Magento 2, follow these steps:<\/p>\n<p><strong>1.<\/strong> Navigate to campaigns and click on &#8220;<strong>View Code.<\/strong>&#8221;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10760\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/12\/PP_PIC_View-Code-2.jpg\" alt=\"View Code\" width=\"1601\" height=\"344\" \/><\/p>\n<p><strong>2.<\/strong> Click on the code to copy it.<\/p>\n<p><strong>3.<\/strong> Now, log in to your Magento Admin Panel.<\/p>\n<p><strong>4.<\/strong> On the Admin Panel sidebar, navigate to \u201c<strong>CONTENT &gt; Design &gt; Configuration<\/strong>.\u201d<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10228\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/12\/Magento__PIC_CONTENT.jpg\" alt=\"CONTENT\" width=\"1511\" height=\"745\" \/><\/p>\n<p><strong>5.<\/strong> Locate and select the store view that you want to configure and click on the\u00a0<strong>&#8220;Edit&#8221;<\/strong>\u00a0link in the\u00a0<strong>Action column<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10229\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/12\/Magento__PIC_Design_Configuration.jpg\" alt=\"Design_Configuration\" width=\"1387\" height=\"756\" \/><\/p>\n<p><strong>6.<\/strong> In the configuration settings, click on the\u00a0<strong>&#8220;Other Settings&#8221;<\/strong>\u00a0tab and expand the\u00a0<strong>&#8220;HTML Head&#8221;<\/strong>\u00a0section.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10230\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/12\/Magento__PIC_HTML_Head.jpg\" alt=\"HTML_Head\" width=\"1024\" height=\"591\" \/><\/p>\n<p><strong>7.<\/strong> Find the\u00a0<strong>&#8220;Scripts and Style Sheets&#8221;<\/strong>\u00a0field and add your custom code in this field. You can insert any verification code or scripts required by third-party services.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10231\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/12\/Magento__PIC_Scripts_and_Style_Sheet.jpg\" alt=\"Scripts_and_Style_Sheet\" width=\"1184\" height=\"712\" \/><\/p>\n<p><strong>8.<\/strong> Once you have added your custom code, click the\u00a0<strong>&#8220;Save Configuration&#8221;<\/strong>\u00a0button to save your changes.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Which_Method_is_Better_Method_1_or_2\"><\/span>Which Method is Better: Method 1 or 2?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>When looking at the bigger picture, Picreel clearly stands out as the superior option for creating popups. With its advanced popup functionality and an extensive selection of triggers, you can create highly engaging popups that target customers at the right time.<\/p>\n<p>Also, Picreel comes with a forever-free plan for startups and small businesses and allows you to create unlimited popups with all premium features. I feel the free version does the job, however, you can always look for paid options that start as low as $9.99\/month.<\/p>\n<p>Ultimately, the choice depends on your priorities, budget, coding skills, customization and functionality you require for your popups.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I used\u00a0Magento\u00a0for my businesses in the beginning stages, and it really helped me with creating my functional e-commerce website, catalog management, and a lot more. Recently, I discovered the potential of using popups to boost my online presence and engagement. Popups have shown significant benefits in growing email lists and improving click-through rates (CTRs). There&#8230;<\/p>\n","protected":false},"author":21,"featured_media":10217,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71],"tags":[],"class_list":["post-10216","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-popup"],"_links":{"self":[{"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/posts\/10216","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/comments?post=10216"}],"version-history":[{"count":15,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/posts\/10216\/revisions"}],"predecessor-version":[{"id":15309,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/posts\/10216\/revisions\/15309"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/media\/10217"}],"wp:attachment":[{"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/media?parent=10216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/categories?post=10216"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/tags?post=10216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}