{"id":220,"date":"2024-02-15T07:23:06","date_gmt":"2024-02-15T07:23:06","guid":{"rendered":"https:\/\/docs.mysterythemes.com\/storeflex\/?p=220"},"modified":"2024-02-15T07:23:08","modified_gmt":"2024-02-15T07:23:08","slug":"customization-of-scroll-top-with-storeflex-pro","status":"publish","type":"post","link":"https:\/\/docs.mysterythemes.com\/storeflex\/customization-of-scroll-top-with-storeflex-pro\/","title":{"rendered":"Customization of Scroll Top with StoreFlex Pro"},"content":{"rendered":"\n<p>If you have an online store with a huge catalogue of products, then the scroll to the top button is a very important functional feature for you. As the name suggests, it ascends the webpage directly to the top with just a click.<\/p>\n\n\n\n<p>Unlike the free version of StoreFlex, in the pro version of the theme, you can properly customize your scroll to the top button. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">To do so,<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to your <strong>WordPress Dashboard<\/strong> and head to <strong>Appearance > Customize<\/strong><\/li>\n\n\n\n<li>Then head to <strong>General Settings <\/strong>and choose the <strong>Scroll Top <\/strong>option in your customizer.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"521\" src=\"https:\/\/docs.mysterythemes.com\/storeflex\/wp-content\/uploads\/sites\/24\/2024\/02\/Scroll-Top_-StoreFlex-Pro-1024x521.jpg\" alt=\"Scroll Top_ StoreFlex Pro\" class=\"wp-image-221\" srcset=\"https:\/\/docs.mysterythemes.com\/storeflex\/wp-content\/uploads\/sites\/24\/2024\/02\/Scroll-Top_-StoreFlex-Pro-1024x521.jpg 1024w, https:\/\/docs.mysterythemes.com\/storeflex\/wp-content\/uploads\/sites\/24\/2024\/02\/Scroll-Top_-StoreFlex-Pro-300x153.jpg 300w, https:\/\/docs.mysterythemes.com\/storeflex\/wp-content\/uploads\/sites\/24\/2024\/02\/Scroll-Top_-StoreFlex-Pro-768x390.jpg 768w, https:\/\/docs.mysterythemes.com\/storeflex\/wp-content\/uploads\/sites\/24\/2024\/02\/Scroll-Top_-StoreFlex-Pro.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>First of all, enable Scroll Top by clicking on the <strong>Enable Scroll Top<\/strong> button.<\/li>\n\n\n\n<li>Then choose your preferred styles from the given <strong>scroll-top types<\/strong>. <\/li>\n\n\n\n<li>Select the <strong>type of device <\/strong>you want to <strong>display the scroll-top options <\/strong>on. We have chosen to display the button on desktop- and tablet-based devices but kept it disabled on mobile-based devices.<\/li>\n\n\n\n<li>Also, choose the alignments from the given options.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Designing of the Scroll-Top Button<\/h2>\n\n\n\n<p>StoreFlex Pro allows its users to reflect more of their creativity in their functional buttons. You can adjust the margin, padding, size, and color of your scroll-top button in this version of the theme.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"229\" height=\"454\" src=\"https:\/\/docs.mysterythemes.com\/storeflex\/wp-content\/uploads\/sites\/24\/2024\/02\/Design-Tab-Scroll-Top.jpg\" alt=\"Design Tab Scroll Top\" class=\"wp-image-222\" style=\"width:212px;height:auto\" srcset=\"https:\/\/docs.mysterythemes.com\/storeflex\/wp-content\/uploads\/sites\/24\/2024\/02\/Design-Tab-Scroll-Top.jpg 229w, https:\/\/docs.mysterythemes.com\/storeflex\/wp-content\/uploads\/sites\/24\/2024\/02\/Design-Tab-Scroll-Top-151x300.jpg 151w\" sizes=\"auto, (max-width: 229px) 100vw, 229px\" \/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Go to the <strong>Design tab <\/strong>beside <strong>General<\/strong> in the same section. <\/li>\n\n\n\n<li>Choose your <strong>scroll-top icon<\/strong> and <strong>background colors <\/strong>from the given circular palettes.<\/li>\n\n\n\n<li>Slide to your preferred size of the button with the given button. You can also manually add the size in the input field. <\/li>\n\n\n\n<li>Give proper radius and padding for the scroll-top button with the below options for precise alignment of the icon with the background.<\/li>\n<\/ul>\n\n\n\n<p><em>(Leave the margin and radius options as is, if you don&#8217;t know what you are doing.)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you have an online store with a huge catalogue of products, then the scroll to the top button is a very important functional feature for you. As the name suggests, it ascends the webpage directly to the top with just a click. Unlike the free version of StoreFlex, in the pro version of the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[],"class_list":["post-220","post","type-post","status-publish","format-standard","hentry","category-pro-modules"],"_links":{"self":[{"href":"https:\/\/docs.mysterythemes.com\/storeflex\/wp-json\/wp\/v2\/posts\/220","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.mysterythemes.com\/storeflex\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.mysterythemes.com\/storeflex\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.mysterythemes.com\/storeflex\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.mysterythemes.com\/storeflex\/wp-json\/wp\/v2\/comments?post=220"}],"version-history":[{"count":1,"href":"https:\/\/docs.mysterythemes.com\/storeflex\/wp-json\/wp\/v2\/posts\/220\/revisions"}],"predecessor-version":[{"id":223,"href":"https:\/\/docs.mysterythemes.com\/storeflex\/wp-json\/wp\/v2\/posts\/220\/revisions\/223"}],"wp:attachment":[{"href":"https:\/\/docs.mysterythemes.com\/storeflex\/wp-json\/wp\/v2\/media?parent=220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.mysterythemes.com\/storeflex\/wp-json\/wp\/v2\/categories?post=220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.mysterythemes.com\/storeflex\/wp-json\/wp\/v2\/tags?post=220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}