Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Bold demo store settings for the header
Explore the settings we've used on our Bold demo store. This video overview includes all the settings we've used to build the Header in the demo store:
Header section settings
Toolbar block options and settings
Navigation image block options and settings
How we built the mega-menu navigation
For a full breakdown of how we've set up the sections and footer on the Modern demo store:
Learn how we set up our About page on the Modern demo store:
Change the opacity to blend the header with the background image
Broadcast can display a transparent header on almost all pages:
When using a transparent header, you may include a second logo to provide contrast with your main homepage asset.
If a sticky header is also used, a darker logo will provide the needed contrast upon scroll.
An Alternate logo option is available to help provide better contrast when transparency is used. This is an optional but helpful feature.
If a Sticky header is enabled, the first primary logo is used while scrolling. This overrides the Alternate logo choice during scroll.
Broadcast includes multiple header styles to easily customize the look of your main header
Place the brand logo in the middle and navigation below.
The design allows for longer navigation. Stores with many menu items can place the navigation below the brand logo and position items like language selector, currency picker, account, search, and cart icons on the top right:
This style places the brand logo to the left with the navigation in the center. The design is a more compressed header area. Ideal for smaller/shorter navigation menus:
This minimal style adopts the mobile design pattern used on all mobile devices.
This style is the cleanest option, hiding the navigation into a mobile-style drawer and keeping consistency between mobile and desktop:
When the menu text or icon is clicked, the slide-out mobile drawer is displayed on both desktop and mobile:
The search icon is placed next to the mobile-style hamburger icon for balance. Account and cart icons are on the far right.
This common design presents the brand logo centered with navigation menu items on the left. Ideal for compact headers with a shorter top-level menu structure:
Broadcast can replace icons with text for text-forward designs:
Broadcast supports Shopify's Localization feature. A currency selector can be placed in the header:
Localization is configured in your main Shopify Admin settings.
Broadcast also supports Shopify's Language selector and can be placed in the header:
Languages are configured in your main Shopify Admin settings.
Broadcast includes a powerful redesigned search tool for finding products and resources within your site. Predictive search can be engaged right from the header. Addition menu options can be added to customize the shopping experience:
Configure and customize the search features under Theme Settings:
Each of these features can be individually toggled on or off to show in the main header area:
When using a transparent header, you can experiment with different icon styles to help the icons stand out with your background image.
A large icon size sometimes helps to bring attention to the icons:
Find the transparent header options lower in the Header section settings:
Professionally designed and crafted for modern header styles
Broadcast includes a clean set of modern icons for the header. Multiple cart options are available to match your brand style.
In the theme editor under Header, choose Show icons and select a cart icon style:
To override the cart icon style with a circle option, use the checkbox for Show cart icon as a circle:
Display how many products are within a collection
Flexible announcement message bar with targeting options
Add single or multiple text announcement bars with links to promote your offers:
Display a free shipping message to your customers only when the customer is browsing a certain page, product, collection, or blog post on your site.
Target your message based on where customers are browsing your site:
Create a different announcement bar with custom messages for various pages of your site.
Target a specific audience by using Target Referrer. Your announcement bar will only appear when the customer arrives at your site from a certain path or location.
Enable when running a promotion on another site.
Use to provide a custom message related to the source promotion.
Target only certain devices or create a custom announcement bar message for mobile devices and another for desktop browsers.
Enable custom announcement messages for mobile and desktop.
How to add images into your navigation
Broadcast can bring your navigation to life with images. Promote your product lines and sales events by easily adding image promotions to any of your top-level menu items:
You can even build an entire dropdown with images alone:
How to build an all-image dropdown in Broadcast:
How to use image blocks to add images to existing top-level menu items:
Begin by adding an image block to the Header section:
Next, map the image to a menu position. If you'd like your image to appear on the first menu item, choose "Item 1". In our example, the image block is mapped to "Item 1", which would be the "NEW ARRIVALS" menu:
You can add multiple images to the same menu item. Each one will occupy a column. In this example, we have two images mapped to "Item 2":
Finetune your image with individual block settings to perfect each individual image and call-to-action link:
Image scaling ratio - Adjust for wide to tall images.
Wide image checkbox - Use to adjust for smaller to larger images.
Overlay opacity - Darken the image to help highlight text.
Overlay color - Add an overlay tint to match your brand or enhance the look of the image.
Heading - Add heading text over the image.
Text - Smaller text displayed over the image.
Link - The promotional call-to-action link.
Color - Adjust the heading and text color.
Header options for displaying social media icons
When using this header style, the social media icons are displayed at the bottom:
Most mobile devices will automatically switch to a Mobile drawer style for navigation.
For mobile devices, the social media icons are displayed at the bottom of the drawer regardless of the Header style used.
There is an option to turn off social icons for both desktop and mobile:
Use the Theme Settings -> Social Media tab to add and remove links to your social networks.
When a link is added, Broadcast will automatically generate a social icon for that network in the header.
