Using Announcement Bar Extension

Introduction

The Announcement Bar extension on the Fynd platform lets you add a customizable bar to the top or bottom of your website. You can use this bar to display upcoming sales and promotional offers or highlight important information like shipping deadlines.

---

Steps to use Announcement Bar Extension

1. Go to Extensions on the Fynd Platform.
2. Click on the Announcement Bar Extension.

Figure 1: Opening Announcement Bar

note

Once you install the extension, it will be available in the extension list.

3. Select the desired sales channel. Here, we have selected “shubham“.

Figure 2: Selecting Sales Channel

4. Click Manage Bar. This is where you will see all the announcement bars that you have configured and saved.

Figure 3: Clicking Manage Bar

Manage Bars

You can create and customise a new announcement bar, or update an existing one.

1. Click Manage Bar. A list of announcement bars will be displayed.

Figure 4: Clicking Manage Bar

2. Click Create New.

Figure 5: Clicking Create New

note

The list will be empty if you haven't configured and saved any announcement bar for your sales channel already.

3. Select from the various options available for the Announcement Bar.

Figure 6: Different Announcement Bars

• Announcement Bar enables users to display important announcements or promotions to their website visitors.
• Countdown Timer Bar enables users to display an attention-grabbing timer bar to their website to increase urgency and encourage customers to take action.
• Free Shipping Bar enables users to display notification bar to their website, informing customers of a free shipping promotion or offer.
• Contact Form Bar enables users to add a contact form to their website's announcement bar.
• Social Share Bar enables users to add social media sharing buttons to their website's announcement bar.
• Rotating Announcement enables users to add multiple announcements in a single announcement bar.

4. To configure your announcement bar, first, enter a name for it in the text field labelled Enter Campaign name (e.g., Christmas Countdown).
5. Click Configure.

While each type of announcement bar has different configurations for you to modify, most configurations are common for all types of bars, this includes:

• Display Configuration
• Content
• Call to Action
• Delay Timer
• Target Page and Platform

Learn more about Common Configurations. Learn more about the configurations that are specific and unique for each bar here, Unique Configurations

Common Configurations

Display Configuration

Figure 7: Display Configuration Options

1. Bar Position: Choose where to display your announcement bar - Top or Bottom of the screen.
2. Bar Background: Select the type of background - Solid or Pattern, for the bar background.
   1. Solid: Click on it to keep your bar background a solid colour.
   2. Pattern: Click on it to select the pattern from the drop-down menu for your bar background.
3. Background Color: Select the solid colour background for your announcement bar.
4. Close Icon: Turn on to display a close icon for users to dismiss the announcement bar.
5. Icon Color: Choose a colour for the close icon.
6. Make the bar sticky: Enable this option to keep the bar in a fixed position on the page even when the user scrolls.

Content

Figure 8: Content Configuration Options

To showcase your message in the announcement bar of your website, enter the desired content in the provided space.

Call to Action

Figure 9: CTA Configuration Options

1. Call To Action: You can turn on or off by toggling this button - to add or remove CTA.
2. Type: Select the suitable type of call to action from the options - Button and Link.
3. Category: Select the desired category for your CTA.
   1. Link: When someone clicks on the link, it will redirect the user to that web page.
   2. Email: When someone clicks on the Email, it will redirect the user to the compose email screen.
   3. Mobile Number: When someone clicks on the Phone number, it will redirect the user to the call screen.
4. Button Text: Enter the desired text for your button or link, which will appear as a button text or link text, respectively.
5. Link: Enter the relevant input based on the category you have selected.
6. Button Color: Choose the colour of the button.
7. Text Color: Choose the colour of the text on the button.
8. Wiggle Button: By enabling this feature, your Button Text will be accompanied by a three-second shake animation. This animation can help draw attention to the button and add a dynamic element to your announcement bar.

Delay Timer

Figure 10: Delay Timer Configuration Options

1. Delay Timer: Enabling this feature allows you to control the delay time for displaying the announcement bar on your website.
2. Show Bar: Select the delay duration for when the announcement bar should appear on the page when it is loaded for the first time.
3. Timer: Please input the desired time in seconds for the announcement bar to reappear after the user has closed it.

Target Page and Platform

Figure 11: Target Page and Platform Configuration Options

1. Page: Select the web pages where you would like your announcement bar to appear on your website.
2. Platform: Select the platforms where you want to display your announcement bar.

Unique Configurations

For Announcement Bar

The Announcement Bar does not contain any unique configurations. Only refer to Common Configurations.

For Countdown Timer Bar

Figure 12: Countdown Timer Bar Configuration Options

1. Start Date: Select the start date for your announcement bar.
2. Start Time: Select the start time for your announcement bar.
3. End Date: Select the end date for your announcement bar.
4. End Time: Select the end time for your announcement bar.
5. Font Color: Select the colour for the countdown timer.
6. Background Color: Select the colour for the background colour of the countdown timer.

note

The announcement bar will become visible on your storefront after the start date and time you set are reached. Similarly, the bar will disappear from your storefront once the end date and time set by you are reached.

For Free Shipping Bar

Figure 13: Free Shipping Bar Configuration Options 1

1. Min. Cart Value: Enter the minimum cart value required to avail the free shipping offer.
2. Test Cart Value: You can track your free shipping bar behaviour using this (testing-only).

info

This field is simply for you to try and simulate the addition of products to the cart. It will not have any impact on your actual website.

info

You need to create a free shipping promotion under your desired sales channel under Marketing followed by Promotion in the platform too.

Figure 14: Free Shipping Bar Configuration Options 2

1. Start Message: Enter the message that will be displayed when the announcement bar commences and the cart value is zero. Once the customer adds an item to their cart, the start message will be replaced by the progress message.
2. Progress Message: Enter the message that will appear when a user adds an item to their cart.
3. Success Message: Enter the message that will appear when a user has added enough items to meet the free shipping threshold.

For Contact Form Bar

Figure 15: Contact Form Bar Configuration Options

1. Name: Enter the placeholder text here. For eg. Enter Your Name or Enter Your First name.
2. Email address: Enter the placeholder text here. For eg. Enter your email address.
3. Success Note: Enter the success message here. This message will display when the user has submitted the contact details on the contact form bar.

info

Any data collected from the Contact Form Bar will be stored in the Analytics section.

For Social Share Bar

Figure 16: Social Share Bar Configuration Options

Social Media:

1. Social Media: Select the social media icons you want to add to your announcement bar.
2. Icon Color: Choose the colour of your social media icons.

Social Media Links:

1. LinkedIn: Enter URL of the LinkedIn account where you want to redirect your users.
2. Facebook: Enter URL of the Facebook account where you want to redirect your users.
3. WhatsApp: Enter URL of the WhatsApp account where you want to redirect your users.
4. Twitter: Enter URL of the Twitter account where you want to redirect your users.
5. Instagram: Enter URL of your Instagram account where you want to redirect your users.

For Rotating Announcement

Figure 17: Rotating Announcement Bar Configuration Options

1. Transition Style: Select the suitable transition style from the option - Fade, Slide, Push.
2. Transition Speed: Select the suitable transition speed from the option - Slow, Med, Fast.

Figure 17: Rotating Announcement Bar Configuration Options

note

By default, one announcement bar is already added. You can make modifications to the default bar.

To add more announcement bars, follow the steps given below:

• Click on the three dots in the Add Bar button.
• Select the type of bar you want to add from the menu.
• Click on the selected bar and configure it.
• Click Save.

Adjust the priority of the bars by sliding them up or down, which determines the order in which they will appear on the storefront.

Activating/Deactivating Announcement Bar

Figure 18: Activate/Deactivate Announcement Bar Icon

• To Activate the announcement bar, open the extension and turn ON the toggle button (present on the features page) after selecting the sales channel.
• To Deactivate the announcement bar, open the extension, select the sales channel, and turn OFF the toggle button.

Analytics

Figure 19a: Clicking Analytics

Figure 19b: Analytics Data

Analytics is a feature that collects and presents all the data that is collected from Contact Form Bar.

To search for a person, simply enter their name in the designated field. You can also narrow your search by selecting a start and end date range to view those who joined on specific dates. You can export the data to your system by clicking on the Export button.

Adding Announcement Bar Extension in Theme

To attach the Announcement Bar extension to your storefront, follow these steps:

1. Click Themes in the Appearance section of your sales channel on Fynd Platform.

2. Click Edit to open the theme editor.

3. In the theme editor, click Settings and then select General.

4. Scroll down to Extension Position and choose where you want to add to display your Announcement Bar. You can choose from the following positions:

   1. Header Bottom: Displays the Announcement Bar below the header.
   2. Footer Bottom: Displays the Announcement Bar below the footer.
   3. To add the extension, click on the Add icon and select the Announcement Bar extension from the drop-down menu.
   4. Select the wrapper placement for your announcement bar, as shown below from the second dropdown;
      1. Select Announcement Bar Header in Header Bottom
      2. Select Announcement Bar Footer in Footer Bottom

   

   Figure 21: Extension Position
   
   5. Once you have made the necessary adjustments, click Save.

Final Output

Figure 22a: Announcement Bar

Figure 22b: Social Media bar