System Group - Toolbar mobile

Written by Eira

Last updated 2 days ago

12 views

On this page

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.