How to Set Up the Mobile Dock in Concept

Add dock items

Open the Mobile dock section in the theme editor.

Click Add block.

Choose the dock item you want to display.

Available blocks include:

Block	Purpose
Home	Links customers to the homepage.
Menu	Opens the mobile menu drawer.
Search	Opens the search drawer.
Cart	Opens the cart drawer or cart page and displays the cart item count.
Account	Opens the customer account menu or customer login flow.
Link	Adds a custom link to any page, collection, product, or external URL.

You can reorder the blocks in the theme editor to control the order of the dock items.

Configure each dock item

Each dock item includes a Title setting.

The title appears below the icon in the mobile dock.

For example, you can use short labels such as:

• Home
• Menu
• Search
• Cart
• Account

Keep the title short so it fits well on smaller mobile screens.

And you can add Custom SVG icon. Each dock item includes a Custom icon setting.

You can use this setting to replace the default icon with your own SVG icon code.

If the Custom icon field is empty, Concept will use the default icon for that dock item.

Configure the custom Link block

Use the Link block when you want to add a custom dock item.

Open the Link block.

Set the Title.

Select the destination in the Link setting.

Enable Open this link in a new window if the link should open in a new browser tab.

This is useful for linking to a contact page, store locator, wishlist page, sale collection, or external support page.

Configure colors and layout

Open the Mobile dock section settings.

Use the color settings to adjust the appearance of the dock.

Setting	Purpose
Text color	Controls the dock item text and icon color.
Background color	Controls the dock background color.
Background gradient	Adds a gradient background to the dock.

Use the section layout settings to adjust spacing and shape.

Setting	Purpose
Padding top	Adds space above the dock items.
Padding bottom	Adds space below the dock items.
Show divider	Adds a divider line above the mobile dock.
Make section rounded	Applies rounded styling to the section.

How the Mobile Dock behaves

The Mobile Dock is fixed at the bottom of the screen on mobile devices.

It is hidden on desktop automatically.

If the header is sticky, the dock can appear when the header is hidden while scrolling.

If the header is not sticky, the dock appears after the customer scrolls past the header area.

The cart block displays a small count badge when the cart contains items.

The section also adjusts page spacing so footer content is not covered by the mobile dock.

Notes and limitations

• The section only appears on mobile devices.
• The section supports a maximum of 6 blocks.
• The section can be added only once.
• If no blocks are added, the Mobile Dock will not render.
• The Cart block works best when the Cart drawer is enabled.
• The Menu block opens the mobile menu drawer.
• The Search block opens the search drawer.
• The Account block depends on the store customer account setup.
• Custom icons should be added as clean SVG/HTML icon code.

Troubleshooting

If the Mobile Dock does not appear, make sure at least one block has been added to the section.

If you cannot find the section, check the Overlay group in the theme editor.

If the Mobile Dock does not show on desktop, this is expected behavior. The section is designed for mobile only.

If a custom link does not work, make sure the Link setting is not empty.

If a custom icon does not display correctly, check that the SVG/HTML code is valid.

If the cart count does not appear, add a product to the cart and refresh the storefront.

If the menu, search, or cart drawer does not open, make sure the corresponding drawer sections are enabled in the theme.

Need Further Assistance

If you encounter any issues or need additional help with your Concept theme, please reach out to our support team via our Ticket System for assistance within 8 hours.