Header, Footer, and Global Storefront Elements

Firefly uses Shopify section groups for the site-wide header and footer. These areas carry navigation, discovery, localization, policy, and commerce cues across storefront templates. Configure them in an unpublished theme so menu or localization mistakes do not interrupt the live store.

Header setup

Open the Header section in the theme editor and review these settings:

• Sticky header: None, On scroll up, Always, or Always, reduce logo size.
• Show separator line and Color scheme.
• Desktop logo position and Mobile logo position.
• Main menu, Customer account menu, and Secondary menu.
• Highlight active link and Active link color scheme.
• Mobile menu heading, Show search in mobile menu, and Mobile menu color scheme.
• Desktop and mobile padding plus bottom margin.

The mobile menu supports nested navigation, Back controls, customer account access, and social links when corresponding global URLs are present. Build navigation in Shopify Admin first, then select the menu in the section. Keep link labels concise and test every nested level with keyboard and touch.

Account links

Header account actions use Shopify’s account URLs. If the store uses classic customer accounts, Firefly renders the theme’s customer templates. If the store uses new customer accounts, Shopify serves hosted account pages whose layout is not controlled by the theme. See Password, Gift Cards, and Customer Accounts.

Predictive search

The header search uses the global Search behavior settings:

• Enable predictive search
• Show vendor
• Show price

Predictive results depend on Shopify’s search response and the store’s searchable resources. The full Search page has separate layout, filtering, and sorting controls.

Cart action

The header cart action follows the global Cart type: Drawer, Page, or Notification. Test the chosen behavior with an empty cart, an existing line item, and a product that requires option selection. Cart details are covered in Cart, Checkout, and Purchase Flow.

Announcement bar

The Announcement bar can contain up to twelve Announcement blocks. Section settings include:

• Auto-rotate announcements and, when enabled, Change announcements every.
• Desktop and mobile minimum height, text size, and vertical padding.

Each announcement controls its Text, desktop and mobile text alignment, Color scheme, and optional Link. Keep linked announcements understandable without relying on motion. Autoplay may be reduced or paused according to interaction and motion preferences.

Horizontal Ticker in the header group

A Horizontal Ticker can be added to the header group for repeated short messages. It provides speed, spacing, desktop/mobile text size, separator, italic, uppercase, bold, color scheme, and accessibility-label controls. Supply an accessibility label that describes the repeated content without forcing assistive technology to read every visual repetition.

Announcement bar and Horizontal Ticker are intentionally available in the header group. Most page-content sections belong inside templates rather than the site-wide header or footer.

Footer setup

The Footer section provides:

• Color scheme
• Enable Follow on Shop
• Show social media icons
• Enable country/region selector
• Enable language selector
• Show payment icons and optional Enabled payment types
• Show policy links and optional Branding text
• Desktop/mobile content alignment and Mobile newsletter layout
• Row spacing, column spacing, top margin, and top/bottom padding.

Footer blocks

Use blocks to compose the footer:

• App
• Custom Liquid
• Menu
• Brand information
• Text
• Image
• Email signup
• Featured product
• Featured collection

Most blocks include desktop and mobile width controls. Arrange essential navigation and contact information before promotional blocks, then inspect stacking order on a narrow screen.

Conditional footer content

• Country/region and language selectors appear only when Shopify supplies more than one available option.
• Social icons require URLs under the global Social media settings.
• Payment icons use the store’s enabled payment types unless valid comma-separated payment handles are supplied.
• Policy links come from policies configured in Shopify Admin.
• Follow on Shop appears only where Shopify supports the feature for the store.

Payment icons and trust imagery are informational presentation. They do not activate a payment method or create a guarantee; payment availability is determined by the store and Shopify Checkout.

Global floating elements

Scroll to top button

The Scroll to top button is disabled by default. Its settings include Enable button, Display after scrolling, Color scheme, desktop/mobile position, desktop/mobile size, and desktop/mobile offsets. Keep the control clear of chat widgets, cookie banners, cart controls, and mobile browser chrome.

Global music player

The Global music player is disabled by default. It provides Enable player, Audio source URL, Volume, desktop/mobile position and size, desktop/mobile offsets, Display ripple animation, and Color scheme. Use a valid audio URL and content you are authorized to play. Browsers can require a customer interaction before audio starts, and reduced-motion preferences may suppress decorative animation.

Final checks

• Open every header and footer link in the preview.
• Test keyboard focus, menu escape/close behavior, search, account, and cart.
• Check long translated labels, multiple currencies, and localization selection.
• Inspect desktop, tablet, and narrow mobile layouts, including sticky and floating controls.

Next: compose the Home page and content sections.