{"id":2444,"date":"2021-06-03T13:40:25","date_gmt":"2021-06-03T10:40:25","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&#038;p=2444"},"modified":"2026-10-08T12:15:32","modified_gmt":"2026-10-08T09:15:32","slug":"shortcuts-bar","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/extensions\/shortcuts-bar\/","title":{"rendered":"Shortcuts Bar"},"content":{"rendered":"\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2021\/06\/Screen-Recording-2021-07-15-at-14.20.00.mov\" playsinline><\/video><figcaption class=\"wp-element-caption\">The Shortcuts Bar in action.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Shortcuts Bar<\/strong> extension adds a persistent navigation bar near the bottom of the browser window, giving visitors quick access to important destinations and actions across your website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It can contain regular navigation links, contact actions and supported WooCommerce functionality, with individual controls for icons, labels, device visibility and other presentation options.<\/p>\n\n\n\n<div class=\"wp-block-group has-palette-color-8-color has-palette-color-1-background-color has-text-color has-background is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"is-style-info coblocks-alert-paragraph wp-block-paragraph\"><strong>Blocksy Pro required<\/strong><br>The Shortcuts Bar extension requires Blocksy Companion Pro to be installed and active.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Getting Started<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To activate and configure the Shortcuts Bar:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigate to <strong>WordPress Dashboard \u2192 Blocksy \u2192 Extensions<\/strong>.<\/li>\n\n\n\n<li>Locate and activate the <strong>Shortcuts Bar<\/strong> extension.<\/li>\n\n\n\n<li>Open the WordPress <strong>Customiser<\/strong> and select the <strong>Shortcuts Bar<\/strong> panel.<\/li>\n\n\n\n<li>Add the shortcuts you want to display and configure their individual settings.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2021\/06\/Screen-Recording-2021-08-08-at-18.07.07.mov\" playsinline><\/video><figcaption class=\"wp-element-caption\">Configuring the Shortcuts Bar.<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Granular Controls<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-995f960e wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"2880\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2021\/06\/Screenshot-2026-10-08-at-12.13.46.png\" alt=\"\" class=\"wp-image-15307\"\/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<h3 class=\"wp-block-heading\">Shortcut Items<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The bar can contain multiple shortcut items, each representing a destination or action. Available items can vary depending on the functionality active on your website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Common shortcut types include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Home<\/strong> \u2013 link visitors directly to the website&#8217;s homepage.<\/li>\n\n\n\n<li><strong>Phone<\/strong> \u2013 provide a telephone link that can start a call on supported devices.<\/li>\n\n\n\n<li><strong>Email<\/strong> \u2013 provide a direct email action.<\/li>\n\n\n\n<li><strong>Shop<\/strong> \u2013 link directly to the WooCommerce shop.<\/li>\n\n\n\n<li><strong>Cart<\/strong> \u2013 provide quick access to the visitor&#8217;s WooCommerce cart.<\/li>\n\n\n\n<li><strong>Wishlist<\/strong> \u2013 provide access to the Wishlist when the corresponding Shop Extra functionality is available.<\/li>\n\n\n\n<li><strong>Back to Top<\/strong> \u2013 return the visitor to the beginning of the current page.<\/li>\n\n\n\n<li><strong>Custom<\/strong> \u2013 create your own shortcut with a custom label, icon and destination.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Additional WooCommerce-related actions can become available when their corresponding Blocksy features are enabled, such as Compare, Waitlist or the shop filters canvas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Icons &amp; Labels<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Each shortcut can combine an icon with a text label. You can use the available built-in icons or select a custom icon where supported.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Labels can be shown or hidden independently based on the layout you want to create. Shortcode output is also supported in shortcut label and link fields when a more dynamic value is required.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Item Visibility<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Individual shortcut items can be shown or hidden independently on <strong>desktop<\/strong>, <strong>tablet<\/strong> and <strong>mobile<\/strong> devices. This lets you create a different set of shortcuts depending on the available screen space and the actions that are most useful on each device.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Label visibility can also be adjusted independently, making it possible to use a more compact icon-only presentation when needed.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Item Tooltips<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Enable <strong>tooltips<\/strong> to provide additional context for shortcut items when visitors interact with them. This is particularly useful when the bar uses an icon-focused layout and the purpose of an item may not be immediately obvious.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Bar Design<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Shortcuts Bar supports two primary presentation styles. It can span across the bottom of the viewport as a traditional fixed bar or use a more compact floating presentation with space around the container.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Additional design controls let you customise areas such as the bar and item Colors, including their initial and hover states. A <strong>background blur<\/strong> effect can also be applied when you want the content behind the bar to remain subtly visible.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Scroll Interaction<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">By default, the Shortcuts Bar remains visible while visitors move through the page. The <strong>Scroll Interaction<\/strong> option can hide the bar while scrolling down, freeing additional screen space for the page content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The bar can then become visible again when the visitor changes scrolling direction, keeping the shortcuts accessible without permanently occupying part of the viewport.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Display Conditions<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Shortcuts Bar integrates with Blocksy&#8217;s <a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/extensions\/conditions-module\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Conditional Module<\/strong><\/a>, allowing you to control where the entire bar is available.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can display or exclude it from specific pages, posts, post types, taxonomies, WooCommerce areas, user states and other supported contexts. More complex combinations can be created using the Conditional Module&#8217;s <strong>Advanced Mode<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use these conditions when the whole Shortcuts Bar should be limited to particular areas of the website, and use the individual item visibility controls when only specific shortcuts need to change between devices.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Video Resources<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Shortcuts Bar Extension Showcase | Blocksy Premium\" width=\"1290\" height=\"968\" src=\"https:\/\/www.youtube.com\/embed\/TQNSiJZC06k?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The Shortcuts Bar extension adds a persistent navigation bar near the bottom of the browser window, giving visitors quick access to important destinations and actions across your website. It can contain regular navigation links, contact actions and supported WooCommerce functionality, with individual controls for icons, labels, device visibility and other presentation options. Blocksy Pro requiredThe [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_categories":[116],"class_list":["post-2444","documentation","type-documentation","status-publish","hentry","doc_categories-extensions"],"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/2444","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/types\/documentation"}],"author":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/comments?post=2444"}],"version-history":[{"count":4,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/2444\/revisions"}],"predecessor-version":[{"id":15309,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/2444\/revisions\/15309"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=2444"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=2444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}