How to set up the Digi: Announcement Bar?

✅ Step 1: Open the Digi: Announcement App 

Go to Shopify Admin → Apps → Digi: Announcement Bar. 

You will see the default theme and content

✅ Step 3: Configure General Settings

• In the Name field, you can set a custom name for the announcement bar. By default, it is set to "My Announcement."




• In the Style preset section, choose a preset style from the available list.

• In the Position section, select your preferred position for the announcement bar: Top, Bottom, or Sticky.

✅ Step 4: Configure Container Settings

Under Content Alignment, you will have several options to choose from:

• Under Background, you can customize the background color. Enter a HEX color code manually or select a color using the color palette.
• Under Padding, you can adjust the padding value. By default, it is set to 18px.

• Under Content, enter the text you want to display on the announcement bar.
• We support your store’s theme font by default—no need to upload fonts manually.
• If you'd like to use a different font, a variety of options are available in the Font dropdown.

1. Arial
2. Helvetica
3. Verdana
4. Tahoma
5. Trebuchet MS
6. Georgia
7. Times New Roman
8. Courier New
9. Lucida Sans Unicode
10. Impact
11. Open Sans
12. Roboto

• You can also select the Font Weight from the following options:

1. Regular
2. Medium
3. Semi-Bold
4. Bold

• Text Color: Choose a text color using the color picker or by entering a HEX code.

You can also add a Subtitle to the announcement bar.

Simply turn on the Subtitle toggle to enable it. The subtitle will offer the same configuration options as the title, including:

• Font selection

• Font weight

• Text color

• Content field to enter your subtitle text

In Call to Action Type, you have two available options:

• Button




• Entire Bar Clickable

For Button:

• Enter the CTA text (button label).

• Enter the Link (URL) the button should open.

• Optionally, choose whether to open the link in a new tab.

You can also customize the following styles:

• Font

• Button Color

• Button Hover Color

• Text Color

• Text Hover Color

For Entire Bar Clickable:

• Enter the Link (URL) that will be applied to the entire announcement bar.

• Optionally, choose whether to open the URL in a new tab.

You have full control over how the Dismiss button behaves.

• By default, the Dismiss button is enabled. You can choose to turn it off if you prefer.

Dismiss Button Settings include the following options:

• Button Color

• Button Hover Color

• Remember Dismissed (checkbox) — If enabled, the announcement bar will remember when a user closes it and will not reappear for that user.

You can add an icon to the announcement bar.

You have two options for adding an icon:

• Select an icon from the Digi: Announcement Bar icon library




• Upload your own icon (JPG, PNG, or SVG file)

The icon will be displayed on the left side of the announcement bar.

Pro Tip:
If you upload an SVG icon or select an icon from the Digi: Announcement Bar icon library, you will have full control over the icon color — allowing you to easily customize its appearance.

You can set the start and end schedule for the announcement bar.

Start Date Options:

• Immediately — The announcement bar will be published on the site right away.




• Specific Date and Time — Choose a future date and time to schedule when the announcement bar should be published.

End Date Options:

• No End Date — The announcement bar will remain published until you manually unpublish it.

• Specific Date and Time — Choose a future date and time to schedule when the announcement bar should be unpublished.

You can choose where the announcement bar appears on your site. Options include:

• Every page

• Homepage




• Specific Collection Pages

• Specific Product Pages

Select the desired locations to control where the announcement bar will be visible.

✅ Step 11: Configure Custom CSS Styles Settings

For advanced users and developers, Digi: Announcement Bar allows full control over CSS customization.

You can add your own CSS code to customize the appearance and behavior of the announcement bar beyond the standard settings.

Click Save in the top-right corner of the announcement bar screen.

Once saved, click Publish to make the announcement bar live on your website.