> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Announcement bar

> Display important messages at the top or bottom of your store using the announcement bar.

The announcement bar displays site-wide messages for promotions, shipping updates, or time-sensitive information. It supports multiple display modes and countdown timers without disrupting the shopping experience.

<img src="https://mintcdn.com/digifist/Ce3MXtNy7CBr97w4/images/theme/release/announcement-bar/announcement-bar.png?fit=max&auto=format&n=Ce3MXtNy7CBr97w4&q=85&s=e8b6c11f6eb69cba33aad10c58ee7344" alt="Announcement bar section view" width="1240" height="180" data-path="images/theme/release/announcement-bar/announcement-bar.png" />

## What this section controls

This section manages the content, display behavior, and device visibility of messages shown at the top or bottom of your store.

## Getting started

<Steps>
  <Step title="Open Theme Customizer">
    From Shopify admin, access the Theme Customizer.
  </Step>

  <Step title="Locate Announcement bar">
    The section is pre-added under the Header in the left sidebar. If removed, you can re-add it using the "Add section" button.
  </Step>
</Steps>

<img src="https://mintcdn.com/digifist/Ce3MXtNy7CBr97w4/images/theme/release/announcement-bar/announcement-bar-location.png?fit=max&auto=format&n=Ce3MXtNy7CBr97w4&q=85&s=ce08b49e1458e3dcc4fd697fc551b3c6" alt="Location of announcement bar in Theme Customizer" width="560" height="340" data-path="images/theme/release/announcement-bar/announcement-bar-location.png" />

## Display behavior

Control how announcement messages appear to visitors. This setting determines whether your text stays fixed, scrolls, or rotates through multiple messages.

<AccordionGroup>
  <Accordion title="Static" icon="align-left">
    Text stays fixed. Best for single, important messages that need maximum readability.
  </Accordion>

  <Accordion title="Marquee" icon="arrows-left-right">
    Text scrolls horizontally. Useful for longer messages or creating visual movement.
  </Accordion>

  <Accordion title="Slideshow" icon="images">
    Multiple messages rotate automatically. Set the **Autoplay interval** to control timing between slides.
  </Accordion>
</AccordionGroup>

<img src="https://mintcdn.com/digifist/Ce3MXtNy7CBr97w4/images/theme/release/announcement-bar/announcement-bar-text-blocks-behavior.png?fit=max&auto=format&n=Ce3MXtNy7CBr97w4&q=85&s=9fef988f640510bab540e1595e648986" alt="Display behavior options" width="560" height="300" data-path="images/theme/release/announcement-bar/announcement-bar-text-blocks-behavior.png" />

## Key settings

<Tabs>
  <Tab title="Content">
    ### Adding messages

    Click **Add block** and choose:

    * **Text slide** - Standard announcement with optional icon
    * **Localization** - Display language and currency selectors
    * **Link** - Standalone call-to-action button
    * **Countdown timer** - Adds urgency with time-based display

    Each block includes device visibility controls to show content on desktop, mobile, or both.

    <img src="https://mintcdn.com/digifist/Ce3MXtNy7CBr97w4/images/theme/release/announcement-bar/announcement-bar-add-block.png?fit=max&auto=format&n=Ce3MXtNy7CBr97w4&q=85&s=25ee74b9d6dca025ddf7ad037b68df88" alt="Adding announcement blocks" width="610" height="360" data-path="images/theme/release/announcement-bar/announcement-bar-add-block.png" />
  </Tab>

  <Tab title="Styling">
    ### Typography

    Control visual emphasis with font weight:

    * **Normal** - Standard readability
    * **Medium** - Subtle emphasis
    * **Bold** - Maximum impact (use sparingly)

    <img src="https://mintcdn.com/digifist/Ce3MXtNy7CBr97w4/images/theme/release/announcement-bar/announcement-bar-font-weight.png?fit=max&auto=format&n=Ce3MXtNy7CBr97w4&q=85&s=e2598d99ddc741ded7d8ef41b32900f7" alt="Font weight options" width="560" height="300" data-path="images/theme/release/announcement-bar/announcement-bar-font-weight.png" />
  </Tab>
</Tabs>

## Block settings

Each block type offers unique configuration options to control how content appears and behaves across your store.

<Tabs>
  <Tab title="Text slide">
    The most versatile block for displaying announcement messages with optional styling and links.

    ### Available settings

    <AccordionGroup>
      <Accordion title="Message content" icon="message">
        Enter your announcement text. Keep it concise for better mobile display.
      </Accordion>

      <Accordion title="Icon" icon="icons">
        Add a visual icon before your text to draw attention. Leave blank for text-only display.

        <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/release/announcement-bar/text-slide-icon.png" alt="Text slide icon option" />
      </Accordion>

      <Accordion title="Link" icon="link">
        Add an optional destination URL to make the entire announcement clickable.
      </Accordion>

      <Accordion title="Link label" icon="tag">
        Display a button with custom text like "Shop now" or "Learn more" next to your message.

        <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/release/announcement-bar/text-slide-link-label.png" alt="Text slide link label option" />
      </Accordion>
    </AccordionGroup>

    <Tip>
      Use text slides for promotional messages, shipping updates, or any store-wide announcements.
    </Tip>
  </Tab>

  <Tab title="Localization">
    Display language and currency selectors for international stores.

    ### Available settings

    <AccordionGroup>
      <Accordion title="Device visibility" icon="eye">
        Control where this selector appears:

        * **Desktop** - Large screens only
        * **Mobile** - Small screens only
        * **Both** - All devices (recommended)

        <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/release/announcement-bar/device-visibility.png" alt="Device visibility options" />
      </Accordion>
    </AccordionGroup>

    <Note>
      Localization blocks only appear when multiple languages or currencies are enabled in your store settings.
    </Note>
  </Tab>

  <Tab title="Link block">
    Standalone call-to-action button without announcement text.

    ### Available settings

    <AccordionGroup>
      <Accordion title="Link label" icon="tag">
        The button text displayed to visitors. Use action-oriented phrases.

        <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/release/announcement-bar/link-label.png" alt="Link block label setting" />
      </Accordion>

      <Accordion title="Link" icon="link">
        The destination URL when the button is clicked.
      </Accordion>

      <Accordion title="Icon" icon="icons">
        Optional icon to display before the button text for visual emphasis.
      </Accordion>

      <Accordion title="Device visibility" icon="eye">
        Choose where this button appears: Desktop, Mobile, or Both.
      </Accordion>
    </AccordionGroup>

    <Tip>
      Use link blocks for prominent calls-to-action like "Free Shipping" or "Sale Ends Today".
    </Tip>
  </Tab>

  <Tab title="Countdown timer">
    Create urgency with time-based displays that count down to a specific deadline.

    ### Available settings

    <AccordionGroup>
      <Accordion title="End date and time" icon="calendar">
        Set when the countdown reaches zero. The timer will no longer display after this time.

        <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/release/announcement-bar/countdown-timer-date.png" alt="Countdown timer end date setting" />
      </Accordion>

      <Accordion title="Timer text" icon="message">
        Message displayed before the countdown. Example: "Sale ends in"
      </Accordion>

      <Accordion title="Expired text" icon="clock">
        Optional message shown after the countdown ends. Leave blank to hide the block entirely.
      </Accordion>

      <Accordion title="Device visibility" icon="eye">
        Control timer visibility across Desktop, Mobile, or Both devices.
      </Accordion>
    </AccordionGroup>

    <Warning>
      Only use countdown timers for genuine deadlines. Fake urgency damages customer trust.
    </Warning>
  </Tab>
</Tabs>

## Best practices

<CardGroup cols={2}>
  <Card title="Keep it brief" icon="text-size">
    Aim for 2-5 words. Long messages get truncated on mobile.
  </Card>

  <Card title="Limit rotation" icon="clock">
    If using slideshow, keep it to 2-3 messages maximum. Too many reduces effectiveness.
  </Card>

  <Card title="Time urgency wisely" icon="hourglass">
    Only use countdown timers for genuine deadlines to maintain trust.
  </Card>

  <Card title="Test responsively" icon="mobile">
    Always preview on mobile before publishing.
  </Card>
</CardGroup>

<Warning>
  Autoplay interval under 5 seconds can be distracting and reduce message comprehension.
</Warning>

## Related guides

<Card title="Header section" icon="window-maximize" href="/themes/release/header">
  Configure header settings and navigation options
</Card>