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
Show separator line: Delineate the top bar from other sections with a separator line.
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.
The Text block lets you add static announcements or promotional messages.
Text: Add a short message like "🚚 Free Express Shipping on Orders Over $50!" or "📞 Contact us for bulk orders!"
Position: Align the text Left, Center, or Right.
Highlight text: Include a highlighted text in button style or different color.
The Language & Country block is great for stores with international audiences.
Enable language selector: Toggle this on to display a dropdown for selecting a language.
Enable country/region selector: Toggle this on to let customers choose their country or region.
Position: Align the selectors Left, Center, or Right.
Ensure you’ve set up language and market settings in Shopify to use this feature effectively.
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.