Store Info Bar Section

The store info bar displays your contact information and social media links in a horizontal bar at the very top of your store, above the announcement bar and header.

Overview

The store info bar is perfect for showing essential contact details like phone, email, address, and business hours. It appears at the top of every page and can be configured to show or hide when scrolling.

Where to Use

The store info bar is typically added to the Header Group section, which appears at the top of all pages. It's designed to be placed above the announcement bar and header.

Settings

Contact Information

You can show or hide each piece of contact information individually:

Show Phone

  • Toggle: Enable or disable phone number display
  • Phone: Enter your phone number
  • Default: Enabled
  • Tip: Phone numbers are automatically clickable on mobile devices

Show Email

  • Toggle: Enable or disable email display
  • Email: Enter your email address
  • Default: Enabled
  • Tip: Email addresses are automatically clickable

Show Address

  • Toggle: Enable or disable address display
  • Address: Enter your physical address
  • Default: Enabled
  • Tip: Use line breaks for multi-line addresses

Show Hours

  • Toggle: Enable or disable business hours display
  • Hours: Enter your business hours
  • Default: Enabled
  • Tip: Use clear formatting (e.g., "Mon-Fri: 9am-6pm, Sat: 10am-4pm")

Social Media

Show Social Media Icons

  • Toggle: Enable or disable social media icons
  • Default: Enabled
  • Note: Social media links are configured in Theme Settings > Social Media
  • Tip: Icons appear on the right side of the bar

Layout

Full Width Section

  • Toggle: Make the bar span the full screen width
  • Default: Disabled (constrained to page width)
  • Tip: Full width gives a more prominent look

Behavior

Visibility Behavior

Controls how the store info bar behaves when scrolling:

Hide on Scroll (Default)

  • Bar is visible at the top of the page
  • Hides when scrolling down
  • Shows again when scrolling up
  • Best for: Most stores - saves space while scrolling

Fixed Top

  • Bar stays visible at the top at all times
  • Doesn't hide when scrolling
  • Best for: When contact info is critical and should always be accessible

Note: The bar is always visible at the very top of the page, regardless of setting.

Colors

Color Scheme

  • Select a color scheme for the store info bar
  • Controls background color, text color, and icon colors
  • Leave empty to use default theme colors
  • Tip: Use a subtle color that doesn't compete with your header

Styling

Border Bottom Color

  • Sets the color of the line below the store info bar
  • Leave empty to use default color from color scheme
  • Tip: Use a subtle color to separate from header

Border Bottom Width

  • Sets the thickness of the border line
  • Default: 1px
  • Examples: 1px, 2px, 0.5rem
  • Tip: Thinner borders (1px) look more subtle

How It Works

Contact Information Display

  • Phone and Email: Display with icons and are clickable
  • Address: Displays with icon (not clickable)
  • Hours: Displays with clock icon
  • All items appear in a horizontal row
  • On mobile, items may stack or wrap to fit

Social Media Icons

  • Icons appear on the right side of the bar
  • Only shows icons for social media accounts you've configured
  • Configure in Theme Settings > Social Media

Visibility Behavior Explained

Hide on Scroll:

  • Visible when page loads
  • Hides smoothly when you scroll down
  • Reappears when you scroll back up
  • Helps save screen space while browsing

Fixed Top:

  • Always visible at the top
  • Stays in place when scrolling
  • Ensures contact info is always accessible
  • Takes up more screen space

Common Configurations

Minimal Contact Info

  • Phone only
  • Email only
  • Social media icons
  • Use when: You want a clean, minimal look

Full Contact Info

  • Phone
  • Email
  • Address
  • Hours
  • Social media icons
  • Use when: You want all contact info easily accessible

Essential Info Only

  • Phone
  • Hours
  • Social media icons
  • Use when: You want key info without overwhelming the bar

Tips & Best Practices

✅ Do's

  • Keep it concise: Use short, clear text for hours and address
  • Update regularly: Keep contact info current, especially hours
  • Test clickability: Verify phone and email work on mobile
  • Use clear formatting: Make hours easy to read (e.g., "Mon-Fri: 9am-6pm")
  • Choose appropriate visibility: Hide on scroll for most stores
  • Match your brand: Use colors that complement your header

❌ Don'ts

  • Don't overcrowd: Too much info makes it hard to read
  • Don't use tiny text: Ensure all text is readable
  • Don't forget mobile: Test how it looks on phones
  • Don't use outdated info: Keep hours and contact details current
  • Don't ignore spacing: Too many items can look cluttered

Setting Up Contact Information

Phone Number

  1. Enable "Show Phone"
  2. Enter your phone number
  3. Format: (555) 123-4567 or 555-123-4567
  4. Tip: Phone is automatically clickable on mobile devices

Email Address

  1. Enable "Show Email"
  2. Enter your email address
  3. Format: info@yourstore.com
  4. Tip: Email is automatically clickable

Address

  1. Enable "Show Address"
  2. Enter your physical address
  3. Use line breaks for multi-line addresses:
    123 Main Street
City, State 12345
  4. Tip: Keep it concise but complete

Business Hours

  1. Enable "Show Hours"
  2. Enter your hours in a clear format
  3. Examples:
    • "Mon-Fri: 9am-6pm, Sat: 10am-4pm"
    • "Monday - Friday: 9:00 AM - 6:00 PM"
    • "Open 7 days: 9am-8pm"
  4. Tip: Use consistent formatting

Setting Up Social Media

  1. Go to Online Store > Themes > Customize
  2. Click Theme settings (bottom left)
  3. Go to Social Media section
  4. Add your social media URLs:
    • Facebook
    • Instagram
    • Twitter/X
    • Pinterest
    • YouTube
    • TikTok
    • etc.
  5. Save settings
  6. Icons will appear in store info bar if enabled

Visibility Behavior Guide

When to Use "Hide on Scroll"

✅ Best for:

  • Most stores
  • When you want to save screen space
  • When contact info is nice-to-have but not critical
  • When you have a sticky header

✅ Benefits:

  • More screen space for content
  • Cleaner look while browsing
  • Still accessible at top of page

When to Use "Fixed Top"

✅ Best for:

  • Stores where contact info is critical
  • Customer service-focused businesses
  • When you want info always visible
  • Stores with phone support

✅ Benefits:

  • Always accessible
  • No need to scroll to top
  • Better for customer service

Color Scheme Tips

Subtle and Professional

  • Use a light gray or subtle color
  • Doesn't compete with header
  • Professional appearance

Brand Matching

  • Match your brand colors
  • Coordinate with header colors
  • Maintains brand consistency

High Contrast

  • Ensure text is readable
  • Good contrast between text and background
  • Test on different devices

Examples

Example 1: Minimal Setup

  • Phone: (555) 123-4567
  • Email: info@store.com
  • Social Media: Enabled
  • Visibility: Hide on scroll
  • Result: Clean, minimal contact bar

Example 2: Full Contact Info

  • Phone: (555) 123-4567
  • Email: info@store.com
  • Address: 123 Main St, City, State
  • Hours: Mon-Fri: 9am-6pm
  • Social Media: Enabled
  • Visibility: Fixed top
  • Result: Comprehensive contact information always visible

Example 3: Essential Only

  • Phone: (555) 123-4567
  • Hours: Mon-Fri: 9am-6pm
  • Social Media: Enabled
  • Visibility: Hide on scroll
  • Result: Key info without clutter

Troubleshooting

Store Info Bar Not Showing

  • Check: Make sure at least one contact field is enabled and filled in
  • Check: Or enable social media icons
  • Check: Verify the section is added to Header Group

Phone/Email Not Clickable

  • Phone and Email: Should be automatically clickable
  • Check: Verify the phone/email fields are filled in correctly
  • Test: Try on a mobile device (clickability works best on mobile)

Social Icons Not Showing

  • Check: Enable "Show Social Media Icons" in settings
  • Check: Add social media URLs in Theme Settings > Social Media
  • Check: Save theme settings after adding URLs

Bar Not Hiding on Scroll

  • Check: Verify "Visibility Behavior" is set to "Hide on Scroll"
  • Check: Try scrolling down the page
  • Note: Bar always shows at the very top of the page

Too Much Information

  • Solution: Disable some contact fields
  • Solution: Use shorter text for hours and address
  • Solution: Consider moving some info to footer

Mobile Layout Issues

  • Check: Test on actual mobile devices
  • Note: Items may stack or wrap on small screens
  • Tip: Keep text short for better mobile display

Related Sections

  • Announcement Bar - Appears below the store info bar
  • Header - Main navigation below both bars
  • Footer - Contact info can also go in footer

Next Steps: