The Mobile Toolbar is an important user interface (UI) component that provides quick navigation and access
1. How to access the Toolbar mobile popup?
Step 01: From Shopify Admin, click on Online Store > Select Themes > In the Current theme section, click the Customize button.
Step 02: In the theme editor (Customize) > Click the Section button > In the Sections tab, scroll through the list or use the search bar to find and select the System Group > click Add section button > add Toolbar mobile
2. How to customize the Toolbar mobile?
2.1. Toolbar mobile blocks content
There are 12 blocks: Shop, Wishlist, Cart, Account, Search, Home, Compare, Blog, Filter, Sidebar, Menu, Link custom.
2.1.1. Shop block
To add a Shop block to the Toolbar mobile, click the Add block button (plus icon ➕) under the Toolbar mobile.
After adding the Shop block, you can adjust its settings using the sidebar—located on the right or left side of your screen, depending on your device
Title: Enter the main title for this section.
Select collection list: Select the list of product collections to display.
Add menu categories: Add menu categories to display within this section.
Link (optional): Enter the optional link (URL) for this section.
2.1.2. Wishlist block
To add a Wishlist block to the Toolbar mobile, click the Add block button (plus icon ➕) under the Toolbar mobile.
After adding the Wishlist block, you can adjust its settings using the sidebar—located on the right or left side of your screen, depending on your device
Title: Enter text you want to display
2.1.3. Cart block
To add a Cart block to the Toolbar mobile, click the Add block button (plus icon ➕) under the Toolbar mobile.
After adding the Cart block, you can adjust its settings using the sidebar—located on the right or left side of your screen, depending on your device
Title: Enter text you want to display
2.1.4. Account block
To add an Account block to the Toolbar mobile, click the Add block button (plus icon ➕) under the Toolbar mobile.
After adding the Account block, you can adjust its settings using the sidebar—located on the right or left side of your screen, depending on your device
Title: Enter text you want to display
2.1.5. Search block
To add a Search block to the Toolbar mobile, click the Add block button (plus icon ➕) under the Toolbar mobile.
After adding the Search block, you can adjust its settings using the sidebar—located on the right or left side of your screen, depending on your device
Title: Enter text you want to display
2.1.6. Home block
To add a Home block to the Toolbar mobile, click the Add block button (plus icon ➕) under the Toolbar mobile.
After adding the Home block, you can adjust its settings using the sidebar—located on the right or left side of your screen, depending on your device
Title: Enter text you want to display
2.1.7. Compare block
To add a Compare block to the Toolbar mobile, click the Add block button (plus icon ➕) under the Toolbar mobile.
After adding the Compare block, you can adjust its settings using the sidebar—located on the right or left side of your screen, depending on your device
Title: Enter text you want to display
2.1.8. Blog block
To add a Blog block to the Toolbar mobile, click the Add block button (plus icon ➕) under the Toolbar mobile.
After adding the Blog block, you can adjust its settings using the sidebar—located on the right or left side of your screen, depending on your device
Title: Enter text you want to display
Blog: select a blog you want to link to
2.1.9. Filter block
To add a Filter block to the Toolbar mobile, click the Add block button (plus icon ➕) under the Toolbar mobile.
After adding the Filter block, you can adjust its settings using the sidebar—located on the right or left side of your screen, depending on your device
Title: Enter text you want to display
Only show when page has 'Filter'
2.1.10. Sidebar block
To add a Sidebar block to the Toolbar mobile, click the Add block button (plus icon ➕) under the Toolbar mobile.
After adding the Sidebar block, you can adjust its settings using the sidebar—located on the right or left side of your screen, depending on your device
Title: Enter text you want to display
Only show when page has 'Sidebar'
2.1.11. Menu block
To add a Menu block to the Toolbar mobile, click the Add block button (plus icon ➕) under the Toolbar mobile.
After adding the Menu block, you can adjust its settings using the sidebar—located on the right or left side of your screen, depending on your device
Title: Enter text you want to display
2.1.12. Custom link block
To add a Custom link block to the Toolbar mobile, click the Add block button (plus icon ➕) under the Toolbar mobile.
After adding the Custom link block, you can adjust its settings using the sidebar—located on the right or left side of your screen, depending on your device
Title: Enter text you want to display
Icon image: Upload or select the icon image to display.
Link: Enter the link (URL) for this element.
2.2. Toolbar mobile options
Color scheme: Select the color scheme to be applied to this section or component
Show text under icon: Check to display a descriptive text label directly beneath the icon.
Theme Settings
Wishlist mode: Enables or disables the wishlist feature, providing users with a function to save favorite products.
You can Disable, Enable wishlist local, Enable wishlist account Install EcomRise free, Enable Growave wishlist
Compare mode: Enables or disables the product comparison mode, allowing customers to compare products side-by-side for informed purchasing decisions.
You can Disable, Enable compare local, Enable compare account
Max products compare: 6
Custom CSS
Allows users to customize by adding CSS rules, beyond the limitations of default settings. This allows for fine-tuning the design to every detail, to suit specific needs.
Add custom styles to this section only.
To add custom styles to your entire online store, go to theme settings.
