{"id":10118,"date":"2025-04-29T15:12:24","date_gmt":"2025-04-29T15:12:24","guid":{"rendered":"https:\/\/www.magetop.com\/blog\/?p=10118"},"modified":"2025-04-29T15:12:28","modified_gmt":"2025-04-29T15:12:28","slug":"how-to-add-back-to-top-button-in-magento-2","status":"publish","type":"post","link":"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/","title":{"rendered":"How To Add Back To Top Button In Magento 2"},"content":{"rendered":"\n<p>A &#8220;Back to Top&#8221; button enhances the user experience by allowing customers to quickly scroll back to the top of the page. In this guide, you&#8217;ll learn how to add a fully customizable button to your Magento 2 store using only admin panel features\u2014no code deployment or theme file editing required. This guide shows you How To Add Back To Top Button In Magento 2.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Steps To Add Back To Top Button In Magento 2<\/h2>\n\n\n\n<p><strong>1. Create a CMS Static Block for the Button<\/strong><\/p>\n\n\n\n<p>We&#8217;ll build everything inside a single CMS block that includes the HTML, CSS, and JavaScript for the button.<\/p>\n\n\n\n<p>Navigate to <strong>Content &gt; Blocks &gt; Add New Block<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"305\" data-attachment-id=\"10120\" data-permalink=\"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/screenshot_2-7\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_2-1.png?fit=1904%2C727&amp;ssl=1\" data-orig-size=\"1904,727\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot_2\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_2-1.png?fit=300%2C115&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_2-1.png?fit=800%2C305&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_2-1.png?resize=800%2C305&#038;ssl=1\" alt=\"\" class=\"wp-image-10120\" srcset=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_2-1.png?resize=1024%2C391&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_2-1.png?resize=300%2C115&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_2-1.png?resize=768%2C293&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_2-1.png?resize=1536%2C586&amp;ssl=1 1536w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_2-1.png?w=1904&amp;ssl=1 1904w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_2-1.png?w=1600&amp;ssl=1 1600w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>Fill in the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Block Title<\/strong>: <code>Back to Top Button<\/code><\/li>\n\n\n\n<li><strong>Identifier<\/strong>: <code>back_to_top_button<\/code><\/li>\n\n\n\n<li><strong>Store View<\/strong>: Select as needed<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"312\" data-attachment-id=\"10121\" data-permalink=\"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/screenshot_1-11\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_1-3.png?fit=1783%2C694&amp;ssl=1\" data-orig-size=\"1783,694\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot_1\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_1-3.png?fit=300%2C117&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_1-3.png?fit=800%2C312&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_1-3.png?resize=800%2C312&#038;ssl=1\" alt=\"\" class=\"wp-image-10121\" srcset=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_1-3.png?resize=1024%2C399&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_1-3.png?resize=300%2C117&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_1-3.png?resize=768%2C299&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_1-3.png?resize=1536%2C598&amp;ssl=1 1536w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_1-3.png?w=1783&amp;ssl=1 1783w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_1-3.png?w=1600&amp;ssl=1 1600w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>Click <strong>Edit with Page Builder<\/strong> button and drag a <strong>HTML Code<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"241\" data-attachment-id=\"10125\" data-permalink=\"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/screenshot_3-5\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_3-1.png?fit=1901%2C571&amp;ssl=1\" data-orig-size=\"1901,571\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot_3\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_3-1.png?fit=300%2C90&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_3-1.png?fit=800%2C241&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_3-1.png?resize=800%2C241&#038;ssl=1\" alt=\"\" class=\"wp-image-10125\" srcset=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_3-1.png?resize=1024%2C308&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_3-1.png?resize=300%2C90&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_3-1.png?resize=768%2C231&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_3-1.png?resize=1536%2C461&amp;ssl=1 1536w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_3-1.png?w=1901&amp;ssl=1 1901w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_3-1.png?w=1600&amp;ssl=1 1600w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"235\" data-attachment-id=\"10126\" data-permalink=\"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/screenshot_4-6\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_4-1.png?fit=1904%2C560&amp;ssl=1\" data-orig-size=\"1904,560\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot_4\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_4-1.png?fit=300%2C88&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_4-1.png?fit=800%2C235&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_4-1.png?resize=800%2C235&#038;ssl=1\" alt=\"\" class=\"wp-image-10126\" srcset=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_4-1.png?resize=1024%2C301&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_4-1.png?resize=300%2C88&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_4-1.png?resize=768%2C226&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_4-1.png?resize=1536%2C452&amp;ssl=1 1536w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_4-1.png?w=1904&amp;ssl=1 1904w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_4-1.png?w=1600&amp;ssl=1 1600w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"361\" data-attachment-id=\"10127\" data-permalink=\"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/screenshot_5-4\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_5-1.png?fit=1743%2C786&amp;ssl=1\" data-orig-size=\"1743,786\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot_5\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_5-1.png?fit=300%2C135&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_5-1.png?fit=800%2C361&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_5-1.png?resize=800%2C361&#038;ssl=1\" alt=\"\" class=\"wp-image-10127\" srcset=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_5-1.png?resize=1024%2C462&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_5-1.png?resize=300%2C135&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_5-1.png?resize=768%2C346&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_5-1.png?resize=1536%2C693&amp;ssl=1 1536w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_5-1.png?w=1743&amp;ssl=1 1743w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_5-1.png?w=1600&amp;ssl=1 1600w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>And insert code below:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&lt;style&gt;\n#back-to-top {\n    position: fixed;\n    bottom: 30px;\n    right: 30px;\n    width: 45px;\n    height: 45px;\n    background-color: #333;\n    border-radius: 8px;\n    cursor: pointer;\n    z-index: 9999;\n    transition: background-color 0.3s ease;\n    display: none; \/* Initially hidden *\/\n}\n\n#back-to-top .inner {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n    color: #fff;\n    font-size: 20px;\n    text-align: center;\n}\n\n#back-to-top:hover {\n    background-color: #555;\n}\n&lt;\/style&gt;\n\n&lt;div id=&quot;back-to-top&quot; title=&quot;Back to top&quot;&gt;\n    &lt;div class=&quot;inner&quot;&gt;&amp;uarr;&lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;script type=&quot;text\/javascript&quot;&gt;\nrequire(&#x5B;'jquery'], function($) {\n    $(document).ready(function() {\n        var $btn = $('#back-to-top');\n        $(window).scroll(function() {\n            if ($(this).scrollTop() &gt; 300) {\n                $btn.fadeIn();\n            } else {\n                $btn.fadeOut();\n            }\n        });\n        $btn.click(function() {\n            $('html, body').animate({scrollTop: 0}, 600);\n            return false;\n        });\n    });\n});\n&lt;\/script&gt;\n<\/pre><\/div>\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>\u2705 <strong>Tip<\/strong>: You can customize the color by changing <code>background-color<\/code> and <code>color<\/code>, or even replace <code>&amp;uarr;<\/code> with an SVG arrow icon for a more polished design.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Then <strong>Save<\/strong> HTML Code and <strong>Save<\/strong> Blocks when done.<\/p>\n\n\n\n<p><strong>2. Display the Block Using a Widget<\/strong><\/p>\n\n\n\n<p>Now, we\u2019ll use Magento\u2019s Widget system to render the block on all pages.<\/p>\n\n\n\n<p>Go to <strong>Content &gt; Widgets &gt; Add Widget<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Type<\/strong>: CMS Static Block<\/li>\n\n\n\n<li><strong>Design Theme<\/strong>: Select your current frontend theme<\/li>\n\n\n\n<li>Click <strong>Continue<\/strong>.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"215\" data-attachment-id=\"10129\" data-permalink=\"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/screenshot_6-4\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_6-1.png?fit=1798%2C483&amp;ssl=1\" data-orig-size=\"1798,483\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot_6\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_6-1.png?fit=300%2C81&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_6-1.png?fit=800%2C215&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_6-1.png?resize=800%2C215&#038;ssl=1\" alt=\"\" class=\"wp-image-10129\" srcset=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_6-1.png?resize=1024%2C275&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_6-1.png?resize=300%2C81&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_6-1.png?resize=768%2C206&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_6-1.png?resize=1536%2C413&amp;ssl=1 1536w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_6-1.png?w=1798&amp;ssl=1 1798w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_6-1.png?w=1600&amp;ssl=1 1600w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p><strong>Widget Settings<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Widget Title<\/strong>: <code>Back to Top Widget<\/code><\/li>\n\n\n\n<li><strong>Assign to Store Views<\/strong>: Choose appropriate views<\/li>\n\n\n\n<li><strong>Layout Updates<\/strong>:\n<ul class=\"wp-block-list\">\n<li><strong>Display On<\/strong>: <code>All Pages<\/code><\/li>\n\n\n\n<li><strong>Container<\/strong>: <code>After Body Start<\/code> (or <code>Footer<\/code> if you prefer)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"306\" data-attachment-id=\"10130\" data-permalink=\"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/screenshot_7-5\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_7-1.png?fit=1790%2C685&amp;ssl=1\" data-orig-size=\"1790,685\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot_7\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_7-1.png?fit=300%2C115&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_7-1.png?fit=800%2C306&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_7-1.png?resize=800%2C306&#038;ssl=1\" alt=\"\" class=\"wp-image-10130\" srcset=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_7-1.png?resize=1024%2C392&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_7-1.png?resize=300%2C115&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_7-1.png?resize=768%2C294&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_7-1.png?resize=1536%2C588&amp;ssl=1 1536w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_7-1.png?w=1790&amp;ssl=1 1790w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_7-1.png?w=1600&amp;ssl=1 1600w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>In the <strong>Widget Options<\/strong>, select the <code>Back to Top Button<\/code> block you just created.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"190\" data-attachment-id=\"10131\" data-permalink=\"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/screenshot_8-5\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_8-1.png?fit=1805%2C428&amp;ssl=1\" data-orig-size=\"1805,428\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot_8\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_8-1.png?fit=300%2C71&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_8-1.png?fit=800%2C190&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_8-1.png?resize=800%2C190&#038;ssl=1\" alt=\"\" class=\"wp-image-10131\" srcset=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_8-1.png?resize=1024%2C243&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_8-1.png?resize=300%2C71&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_8-1.png?resize=768%2C182&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_8-1.png?resize=1536%2C364&amp;ssl=1 1536w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_8-1.png?w=1805&amp;ssl=1 1805w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_8-1.png?w=1600&amp;ssl=1 1600w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>Click <strong>Save<\/strong> and <strong>Flush Magento Cache<\/strong> under <strong>System &gt; Cache Management<\/strong>.<\/p>\n\n\n\n<p><strong>Results<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"493\" data-attachment-id=\"10132\" data-permalink=\"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/screenshot_9-3\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_9.png?fit=1323%2C815&amp;ssl=1\" data-orig-size=\"1323,815\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot_9\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_9.png?fit=300%2C185&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_9.png?fit=800%2C493&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_9.png?resize=800%2C493&#038;ssl=1\" alt=\"\" class=\"wp-image-10132\" srcset=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_9.png?resize=1024%2C631&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_9.png?resize=300%2C185&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_9.png?resize=768%2C473&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot_9.png?w=1323&amp;ssl=1 1323w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The &#8220;Back to Top&#8221; button appears when users scroll down more than 300 pixels.<\/li>\n\n\n\n<li>It is fully centered, square with rounded corners, and animated.<\/li>\n\n\n\n<li>No need to touch <code>.phtml<\/code> files, deploy static content, or edit Magento\u2019s core theme files.<\/li>\n\n\n\n<li>You can easily edit its style, color, or behavior from the admin panel later.<\/li>\n<\/ul>\n\n\n\n<p>Adding a &#8220;Back to Top&#8221; button in Magento 2 doesn\u2019t have to be complicated or require code changes on the server. By leveraging Magento&#8217;s CMS blocks and widgets, you can implement a functional and beautifully styled button using only admin panel tools.<\/p>\n\n\n\n<p>Would you like to add an SVG arrow or animation effect? Drop your ideas in the comments and let\u2019s enhance it together!<\/p>\n\n\n\n<p>Follow us for the more helpful posts!<\/p>\n\n\n\n<p>We hope this is a useful post for you.<\/p>\n\n\n\n<p>You can read more useful posts like\u00a0<strong><a href=\"https:\/\/www.magetop.com\/blog\/whats-new-in-magento-2-4-8-key-features-and-updates\/\">What\u2019s New in Magento 2.4.8: Key Features and Updates<\/a><\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A &#8220;Back to Top&#8221; button enhances the user experience by allowing customers to quickly scroll back to the top of<\/p>\n","protected":false},"author":106,"featured_media":10133,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2],"tags":[2292,2290,2291,2293],"class_list":["post-10118","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento-2-tutorials","tag-add-back-to-top-button-in-magento-2","tag-back-to-top","tag-back-to-top-button","tag-how-to-add-back-to-top-button-in-magento-2"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How To Add Back To Top Button In Magento 2 - Magetop Blog<\/title>\n<meta name=\"description\" content=\"A &quot;Back to Top&quot; button enhances the user experience by allowing customers to quickly scroll back to the top of the page. In this guide, you&#039;ll learn how to add a fully customizable button to your Magento 2 store using only admin panel features\u2014no code deployment or theme file editing required. This guide shows you How To Add Back To Top Button In Magento 2.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Add Back To Top Button In Magento 2 - Magetop Blog\" \/>\n<meta property=\"og:description\" content=\"A &quot;Back to Top&quot; button enhances the user experience by allowing customers to quickly scroll back to the top of the page. In this guide, you&#039;ll learn how to add a fully customizable button to your Magento 2 store using only admin panel features\u2014no code deployment or theme file editing required. This guide shows you How To Add Back To Top Button In Magento 2.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Magetop Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/MagetopStore\" \/>\n<meta property=\"article:published_time\" content=\"2025-04-29T15:12:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-29T15:12:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/How-To-Add-Back-To-Top-Button-In-Magento-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1355\" \/>\n\t<meta property=\"og:image:height\" content=\"753\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Aaron LX\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@MagetopStore\" \/>\n<meta name=\"twitter:site\" content=\"@MagetopStore\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Aaron LX\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/\"},\"author\":{\"name\":\"Aaron LX\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/b8770690a02cc53a273d6b7205229ff7\"},\"headline\":\"How To Add Back To Top Button In Magento 2\",\"datePublished\":\"2025-04-29T15:12:24+00:00\",\"dateModified\":\"2025-04-29T15:12:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/\"},\"wordCount\":408,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/How-To-Add-Back-To-Top-Button-In-Magento-2.png?fit=1355%2C753&ssl=1\",\"keywords\":[\"Add Back To Top Button In Magento 2\",\"Back To Top\",\"Back To Top Button\",\"How To Add Back To Top Button In Magento 2\"],\"articleSection\":[\"Magento 2 Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/\",\"url\":\"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/\",\"name\":\"How To Add Back To Top Button In Magento 2 - Magetop Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/How-To-Add-Back-To-Top-Button-In-Magento-2.png?fit=1355%2C753&ssl=1\",\"datePublished\":\"2025-04-29T15:12:24+00:00\",\"dateModified\":\"2025-04-29T15:12:28+00:00\",\"description\":\"A \\\"Back to Top\\\" button enhances the user experience by allowing customers to quickly scroll back to the top of the page. In this guide, you'll learn how to add a fully customizable button to your Magento 2 store using only admin panel features\u2014no code deployment or theme file editing required. This guide shows you How To Add Back To Top Button In Magento 2.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/How-To-Add-Back-To-Top-Button-In-Magento-2.png?fit=1355%2C753&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/How-To-Add-Back-To-Top-Button-In-Magento-2.png?fit=1355%2C753&ssl=1\",\"width\":1355,\"height\":753,\"caption\":\"How To Add Back To Top Button In Magento 2\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.magetop.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Add Back To Top Button In Magento 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#website\",\"url\":\"https:\/\/www.magetop.com\/blog\/\",\"name\":\"Magetop Blog\",\"description\":\"Exploring Magento Tips, Tricks, and Trends\",\"publisher\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.magetop.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#organization\",\"name\":\"Magetop.com\",\"url\":\"https:\/\/www.magetop.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/11\/logo.png?fit=475%2C475&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/11\/logo.png?fit=475%2C475&ssl=1\",\"width\":475,\"height\":475,\"caption\":\"Magetop.com\"},\"image\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/MagetopStore\",\"https:\/\/x.com\/MagetopStore\",\"https:\/\/www.linkedin.com\/company\/magetop\",\"https:\/\/www.pinterest.com\/magetop\",\"https:\/\/www.youtube.com\/channel\/UCXoiJsz88OfPmwa8QpUkwOA\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/b8770690a02cc53a273d6b7205229ff7\",\"name\":\"Aaron LX\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/11\/475315059_122137709240563546_260104055231757176_n.jpg?fit=96%2C96&#038;ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/11\/475315059_122137709240563546_260104055231757176_n.jpg?fit=96%2C96&#038;ssl=1\",\"caption\":\"Aaron LX\"},\"description\":\"Aaron is a passionate writer, crazy about shopping, eCommerce and trends. Besides his outstanding research skills and a positive mind, Aaron eagerly shares his experience with the readers.\",\"url\":\"https:\/\/www.magetop.com\/blog\/author\/aaron-lx\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Add Back To Top Button In Magento 2 - Magetop Blog","description":"A \"Back to Top\" button enhances the user experience by allowing customers to quickly scroll back to the top of the page. In this guide, you'll learn how to add a fully customizable button to your Magento 2 store using only admin panel features\u2014no code deployment or theme file editing required. This guide shows you How To Add Back To Top Button In Magento 2.","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:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/","og_locale":"en_US","og_type":"article","og_title":"How To Add Back To Top Button In Magento 2 - Magetop Blog","og_description":"A \"Back to Top\" button enhances the user experience by allowing customers to quickly scroll back to the top of the page. In this guide, you'll learn how to add a fully customizable button to your Magento 2 store using only admin panel features\u2014no code deployment or theme file editing required. This guide shows you How To Add Back To Top Button In Magento 2.","og_url":"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/","og_site_name":"Magetop Blog","article_publisher":"https:\/\/www.facebook.com\/MagetopStore","article_published_time":"2025-04-29T15:12:24+00:00","article_modified_time":"2025-04-29T15:12:28+00:00","og_image":[{"width":1355,"height":753,"url":"https:\/\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/How-To-Add-Back-To-Top-Button-In-Magento-2.png","type":"image\/png"}],"author":"Aaron LX","twitter_card":"summary_large_image","twitter_creator":"@MagetopStore","twitter_site":"@MagetopStore","twitter_misc":{"Written by":"Aaron LX","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/#article","isPartOf":{"@id":"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/"},"author":{"name":"Aaron LX","@id":"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/b8770690a02cc53a273d6b7205229ff7"},"headline":"How To Add Back To Top Button In Magento 2","datePublished":"2025-04-29T15:12:24+00:00","dateModified":"2025-04-29T15:12:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/"},"wordCount":408,"commentCount":0,"publisher":{"@id":"https:\/\/www.magetop.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/How-To-Add-Back-To-Top-Button-In-Magento-2.png?fit=1355%2C753&ssl=1","keywords":["Add Back To Top Button In Magento 2","Back To Top","Back To Top Button","How To Add Back To Top Button In Magento 2"],"articleSection":["Magento 2 Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/","url":"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/","name":"How To Add Back To Top Button In Magento 2 - Magetop Blog","isPartOf":{"@id":"https:\/\/www.magetop.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/#primaryimage"},"image":{"@id":"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/How-To-Add-Back-To-Top-Button-In-Magento-2.png?fit=1355%2C753&ssl=1","datePublished":"2025-04-29T15:12:24+00:00","dateModified":"2025-04-29T15:12:28+00:00","description":"A \"Back to Top\" button enhances the user experience by allowing customers to quickly scroll back to the top of the page. In this guide, you'll learn how to add a fully customizable button to your Magento 2 store using only admin panel features\u2014no code deployment or theme file editing required. This guide shows you How To Add Back To Top Button In Magento 2.","breadcrumb":{"@id":"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/#primaryimage","url":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/How-To-Add-Back-To-Top-Button-In-Magento-2.png?fit=1355%2C753&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/How-To-Add-Back-To-Top-Button-In-Magento-2.png?fit=1355%2C753&ssl=1","width":1355,"height":753,"caption":"How To Add Back To Top Button In Magento 2"},{"@type":"BreadcrumbList","@id":"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.magetop.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How To Add Back To Top Button In Magento 2"}]},{"@type":"WebSite","@id":"https:\/\/www.magetop.com\/blog\/#website","url":"https:\/\/www.magetop.com\/blog\/","name":"Magetop Blog","description":"Exploring Magento Tips, Tricks, and Trends","publisher":{"@id":"https:\/\/www.magetop.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.magetop.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.magetop.com\/blog\/#organization","name":"Magetop.com","url":"https:\/\/www.magetop.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.magetop.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/11\/logo.png?fit=475%2C475&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/11\/logo.png?fit=475%2C475&ssl=1","width":475,"height":475,"caption":"Magetop.com"},"image":{"@id":"https:\/\/www.magetop.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/MagetopStore","https:\/\/x.com\/MagetopStore","https:\/\/www.linkedin.com\/company\/magetop","https:\/\/www.pinterest.com\/magetop","https:\/\/www.youtube.com\/channel\/UCXoiJsz88OfPmwa8QpUkwOA"]},{"@type":"Person","@id":"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/b8770690a02cc53a273d6b7205229ff7","name":"Aaron LX","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/11\/475315059_122137709240563546_260104055231757176_n.jpg?fit=96%2C96&#038;ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/11\/475315059_122137709240563546_260104055231757176_n.jpg?fit=96%2C96&#038;ssl=1","caption":"Aaron LX"},"description":"Aaron is a passionate writer, crazy about shopping, eCommerce and trends. Besides his outstanding research skills and a positive mind, Aaron eagerly shares his experience with the readers.","url":"https:\/\/www.magetop.com\/blog\/author\/aaron-lx\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/How-To-Add-Back-To-Top-Button-In-Magento-2.png?fit=1355%2C753&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/paOdw5-2Dc","jetpack-related-posts":[{"id":5549,"url":"https:\/\/www.magetop.com\/blog\/create-new-cms-block-in-magento-2\/","url_meta":{"origin":10118,"position":0},"title":"How To Create New CMS Block In Magento 2","author":"Aaron LX","date":"June 3, 2021","format":false,"excerpt":"In this post, I will guide you on\u00a0How To Create New CMS Block In Magento 2. Share information with customers, make the store more interesting and attractive with CMS Block.","rel":"","context":"In &quot;Magento 2 Tutorials&quot;","block_context":{"text":"Magento 2 Tutorials","link":"https:\/\/www.magetop.com\/blog\/magento-2-tutorials\/"},"img":{"alt_text":"How To Create New CMS Block In Magento 2","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/06\/How-To-Create-New-CMS-Block-In-Magento-2.png?fit=1200%2C711&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/06\/How-To-Create-New-CMS-Block-In-Magento-2.png?fit=1200%2C711&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/06\/How-To-Create-New-CMS-Block-In-Magento-2.png?fit=1200%2C711&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/06\/How-To-Create-New-CMS-Block-In-Magento-2.png?fit=1200%2C711&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/06\/How-To-Create-New-CMS-Block-In-Magento-2.png?fit=1200%2C711&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":3939,"url":"https:\/\/www.magetop.com\/blog\/magento-2-add-custom-notice-to-page-top\/","url_meta":{"origin":10118,"position":1},"title":"How To Add Custom Notice To Page Top In Magento 2","author":"Aaron LX","date":"December 31, 2020","format":false,"excerpt":"Preferential campaigns, advertisements and notices of the shop owners are regularly applied. Maybe one of them is not known. This can be overcome with the post How To Add Custom Notice To Page Top In Magento 2.","rel":"","context":"In &quot;Magento 2 Tutorials&quot;","block_context":{"text":"Magento 2 Tutorials","link":"https:\/\/www.magetop.com\/blog\/magento-2-tutorials\/"},"img":{"alt_text":"How To Add Custom Notice To Page Top In Magento 2","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/12\/How-To-Add-Custom-Notice-To-Page-Top-In-Magento-2.jpg?fit=750%2C445&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/12\/How-To-Add-Custom-Notice-To-Page-Top-In-Magento-2.jpg?fit=750%2C445&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/12\/How-To-Add-Custom-Notice-To-Page-Top-In-Magento-2.jpg?fit=750%2C445&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/12\/How-To-Add-Custom-Notice-To-Page-Top-In-Magento-2.jpg?fit=750%2C445&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":8942,"url":"https:\/\/www.magetop.com\/blog\/how-to-get-add-to-cart-button-on-phtml-magento-2\/","url_meta":{"origin":10118,"position":2},"title":"How to get Add to Cart button on phtml Magento 2","author":"Callula Huy","date":"June 6, 2024","format":false,"excerpt":"In this blog post, we will explore the steps to add the \"Add to Cart\" button on a PHTML file in Magento 2.","rel":"","context":"In &quot;Magento 2 Tutorials&quot;","block_context":{"text":"Magento 2 Tutorials","link":"https:\/\/www.magetop.com\/blog\/magento-2-tutorials\/"},"img":{"alt_text":"How to get Add to Cart button on phtml Magento 2","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2024\/06\/How-to-get-Add-to-Cart-button-on-phtml-Magento-2.jpg?fit=684%2C360&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2024\/06\/How-to-get-Add-to-Cart-button-on-phtml-Magento-2.jpg?fit=684%2C360&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2024\/06\/How-to-get-Add-to-Cart-button-on-phtml-Magento-2.jpg?fit=684%2C360&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":5722,"url":"https:\/\/www.magetop.com\/blog\/fix-add-to-cart-button-not-working-in-magento-2\/","url_meta":{"origin":10118,"position":3},"title":"How To Fix Add To Cart Button Not Working In Magento 2","author":"Aaron LX","date":"June 18, 2021","format":false,"excerpt":"The add cart button stops working suddenly without knowing the reason. In this post, I will guide you on\u00a0How To Fix Add To Cart Button Not Working In Magento 2.","rel":"","context":"In &quot;Magento 2 Tutorials&quot;","block_context":{"text":"Magento 2 Tutorials","link":"https:\/\/www.magetop.com\/blog\/magento-2-tutorials\/"},"img":{"alt_text":"How To Fix Add To Cart Button Not Working In Magento 2","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/06\/How-To-Fix-Add-To-Cart-Button-Not-Working-In-Magento-2.png?fit=1200%2C711&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/06\/How-To-Fix-Add-To-Cart-Button-Not-Working-In-Magento-2.png?fit=1200%2C711&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/06\/How-To-Fix-Add-To-Cart-Button-Not-Working-In-Magento-2.png?fit=1200%2C711&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/06\/How-To-Fix-Add-To-Cart-Button-Not-Working-In-Magento-2.png?fit=1200%2C711&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/06\/How-To-Fix-Add-To-Cart-Button-Not-Working-In-Magento-2.png?fit=1200%2C711&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":5594,"url":"https:\/\/www.magetop.com\/blog\/customize-email-templates-in-magento-2\/","url_meta":{"origin":10118,"position":4},"title":"How To Customize Email Templates In Magento 2","author":"Aaron LX","date":"July 14, 2021","format":false,"excerpt":"In this post, I will guide you on\u00a0How To Customize Email Templates In Magento 2. The most effective communication method to interact with customers is email.","rel":"","context":"In &quot;Magento 2 Tutorials&quot;","block_context":{"text":"Magento 2 Tutorials","link":"https:\/\/www.magetop.com\/blog\/magento-2-tutorials\/"},"img":{"alt_text":"How To Customize Email Templates In Magento 2","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/07\/How-To-Customize-Email-Templates-In-Magento-2.png?fit=904%2C537&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/07\/How-To-Customize-Email-Templates-In-Magento-2.png?fit=904%2C537&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/07\/How-To-Customize-Email-Templates-In-Magento-2.png?fit=904%2C537&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/07\/How-To-Customize-Email-Templates-In-Magento-2.png?fit=904%2C537&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":5535,"url":"https:\/\/www.magetop.com\/blog\/create-a-new-root-category-in-magento-2\/","url_meta":{"origin":10118,"position":5},"title":"How To Create A New Root Category In Magento 2","author":"Aaron LX","date":"June 7, 2021","format":false,"excerpt":"In this post, I will guide you on\u00a0How To Create A New Root Category In Magento 2. Products in the main menu are determined by the root category that is assigned to the store.","rel":"","context":"In &quot;Magento 2 Tutorials&quot;","block_context":{"text":"Magento 2 Tutorials","link":"https:\/\/www.magetop.com\/blog\/magento-2-tutorials\/"},"img":{"alt_text":"How To Create A New Root Category In Magento 2","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/06\/How-To-Create-A-New-Root-Category-In-Magento-2.png?fit=972%2C577&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/06\/How-To-Create-A-New-Root-Category-In-Magento-2.png?fit=972%2C577&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/06\/How-To-Create-A-New-Root-Category-In-Magento-2.png?fit=972%2C577&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/06\/How-To-Create-A-New-Root-Category-In-Magento-2.png?fit=972%2C577&ssl=1&resize=700%2C400 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/posts\/10118","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/users\/106"}],"replies":[{"embeddable":true,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/comments?post=10118"}],"version-history":[{"count":3,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/posts\/10118\/revisions"}],"predecessor-version":[{"id":10134,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/posts\/10118\/revisions\/10134"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/media\/10133"}],"wp:attachment":[{"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/media?parent=10118"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/categories?post=10118"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/tags?post=10118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}