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.
💡 Tip: Use concise labels for links to keep your navigation clean and easy to use.
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.