Top bar
Top Bar section is a versatile tool for displaying essential information such as links, announcements, social media profiles, and language options. It’s the first thing visitors see, making it a key component for enhancing your store’s usability and engagement.
How to add a Top bar section to your Shopify store
Steps:
In the theme editor (Customize), navigate to the Header group and click Add section.
Select the Top bar.
Make necessary changes.
Save the settings.
How to edit a Top bar section
Section settings
These settings control the overall layout and appearance of the Top Bar.
Container width: Choose between Fixed width or Full width, depending on your store’s design.
Color scheme: Select a color scheme that aligns with your branding. A contrast with the header color works best for visibility. See how to set up Colors: Colors
Section padding: Adjust the top and bottom padding to control spacing around the Top Bar.
Block settings
The Top Bar section supports four different block types:
📱 For Tablet and Mobile Views:
Only blocks with their position set to Center will be displayed. Ensure you center-align critical blocks for optimal visibility on smaller screens.
Perfect for adding a menu for quick navigation links.
Menu: Select a menu from your Shopify to display in the Top Bar.
Position: Choose to align the menu Left, Center, or Right within the Top Bar.
Last updated
The Social links block allows you to display icons for your social media profiles.
Enable/Disable social platforms: Toggle options for platforms like Facebook, Instagram, Twitter, TikTok, and more.
Position: Align the icons to the Left, Center, or Right.
To display the social icons, make sure you have updated your social links in Theme settings > Social media.