Video: Demo store header settings

Edited

Bold demo store settings for the header

Video Overview

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:

Topics covered

  • Header section settings

  • Toolbar block options and settings

  • Navigation image block options and settings

  • How we built the mega-menu navigation


Setting Up the Header for the Broadcast Bold Demo Store


1. Introduction to Header Setup 0:00

  • Overview of the video content

  • Focus on the header section settings in the theme customizer.


2. Main Toolbar and Header Area 0:10

  • Explanation of the main toolbar and header area.

  • Configuration options available in the header section.


3. Sticky Header Option 0:30

  • Description of the sticky header feature.

  • Current status: not enabled for the demo store.


4. Header Style Configuration 0:48

  • Selected style: logo center menu header.

  • Alternative option: logo beside the menu.


5. Border and Opacity Settings 1:14

  • Option to show a border for separation.

  • Current opacity setting: 90%.


6. Icons and Cart Display 1:21

  • Toggle between text and icons for display.

  • Option to show cart as a circle with a running number.


7. Logo Configuration 1:54

  • Primary logo details: PNG file with transparent background.

  • Options for desktop and mobile width adjustments.


8. Navigation Menu Setup 2:11

  • Selection of the main menu.

  • Option for a custom mobile menu.


9. Search and Social Icons 2:30

  • Option to show search icon.

  • Social icons moved to the toolbar for better visibility.


10. Call to Action Button 2:50

  • Description of the shop sale button.

  • Customization options for text, link, and button style.


11. Language and Currency Selector 3:19

  • Options for language and currency selectors.

  • Current status: moved to the toolbar.


12. Highlight Link Feature 3:30

  • Option to highlight a specific menu item.

  • Example: highlighting the sale option in red.


13. Transparent Header Option 3:49

  • Explanation of the transparent header feature.

  • Current status: not enabled for the demo store.


14. Mobile Menu Configuration 4:14

  • Option to add a secondary menu for mobile devices.

  • Example: adding FAQ links.


15. Header Section Padding 4:31

  • Explanation of section padding options for spacing.


16. Toolbar Block Overview 5:04

  • Description of the toolbar block and its purpose.

  • Example: using it for a coupon code instead of an announcement bar.


17. Social Media Icons Configuration 6:00

  • Explanation of how social media icons are populated.

  • Configuration done in theme settings.


18. Gift Card and Selector Options 6:27

  • Description of gift card link and selector options.


19. Image Block Configuration 7:01

  • Explanation of image blocks and their association with navigation items.


20. Image Overlay and Text Options 7:52

  • Options for image overlay and text customization.


21. Announcement Bar and Custom Code 8:55

  • Overview of the announcement bar feature.

  • Option to add custom code for app support.


22. Main Menu Structure 9:21

  • Description of the main menu and its items.

  • Explanation of nested items for dropdown menus.