Hyper Theme
Hyper Theme
Pages Global Sections

Top bar

3 min read

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.

image

How to add a Top bar section to your Shopify store

Steps:

  1. In the theme editor (Customize), navigate to the Header group and click Add section.
  2. Select the Top bar.
  3. Make necessary changes.
  4. 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

image

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.
image

💡 Tip: Use concise labels for links to keep your navigation clean and easy to use.

image

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.

💡 Best practice: Include emojis to make your message more engaging and visually appealing!

  • Highlight text: Include a highlighted text in button style or different color.
image

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.
image

To display the social icons, make sure you have updated your social links in Theme settings > Social media.

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.
Use Language selector
  • Enable country/region selector: Toggle this on to let customers choose their country or region.
Use Country/ Region selector
  • Position: Align the selectors Left, Center, or Right.
image

Ensure you’ve set up language and market settings in Shopify to use this feature effectively.

Last updated

Announcement bar

Previous Page

Header

Next Page

ON THIS PAGE

How to add a Top bar section to your Shopify storeHow to edit a Top bar sectionSection settingsBlock settings

Was this helpful?