> For the complete documentation index, see [llms.txt](https://docs.magecomp.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.magecomp.com/magento-2-notification-bar-extension-pro/create-notification-bar.md).

# Create Notification Bar

From the admin panel, go to **MageComp > Notification Bar Pro Manager** and click on the **Add New Notification** button.

<figure><img src="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2FctXezDEIlbaaPWiFywzL%2FGeneral%20settings.png?alt=media&amp;token=0a295f58-8929-4429-938f-8f5d788ce7ac" alt=""><figcaption></figcaption></figure>

* **Status -** Enable to display of the notification bar on the website
* **Title -** Add the title as per your requirement.
* **Store View -** Select the store view as per your requirement to display the notification bar.
* **Date From -** Select the date to schedule the notification bar for your website.
* **Date To -** Select the date to end the display of the notification bar for your website.

<figure><img src="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2F416o4DbzyhsU3szIev1d%2FArrow%20Style.png?alt=media&amp;token=a39c566b-bf1f-4613-9dbe-1abafea06acd" alt=""><figcaption></figcaption></figure>

* **Arrow Style -** Select the arrow style for multiple notification bars.

#### Custom

<figure><img src="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2FPPRiEGK0LzcBUzrtnDeT%2FCustom.png?alt=media&amp;token=bc90ce3a-f0e3-4f5d-8017-309b81954890" alt=""><figcaption></figcaption></figure>

* **Notification Type -** Select the custom option to design the notification bar as per your requirement.

**Text Settings**

<figure><img src="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2FK6CAUrB1i2oIQWa1KR3T%2FText.png?alt=media&amp;token=c20057d5-2062-4986-aaaa-49ad82567a21" alt=""><figcaption></figcaption></figure>

* **Text -** Admin can write the content for the notification bar as per their requirement.
* **Font Color -** Select the text color for the content of the notification bar from here.
* **Font Size -** Select the text size for the content of the notification bar from here.
* **Font Style -** Select the text style for the content of the notification bar from here.

**Icon settings**

<figure><img src="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2FmTyipyRbwnamdHFvsA0b%2FIcon.png?alt=media&amp;token=5d06c775-3092-4bb6-bcb6-bf0ea90f4176" alt=""><figcaption></figcaption></figure>

* **Show Icon -** Select YES to add an icon to the notification bar.
* **Icon -** Upload an icon image for the notification bar.

**Background Type - Color**

<figure><img src="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2FRkI4TuUVHmW0ua4v4ivz%2FBackground%20color.png?alt=media&amp;token=0beb93af-ca43-4939-9775-b645db2eff3d" alt=""><figcaption></figcaption></figure>

* **Background Type -** Select Color option to set the background color for the notification bar.
* **Background Color -** Select the background color for the notification bar from here.

**Background Type - Image**

<figure><img src="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2FnS8MNylej1PgPTu6iWNv%2FBackground%20image.png?alt=media&amp;token=fb4d2c6d-cfa1-4198-bc82-3d0a32c70afe" alt=""><figcaption></figcaption></figure>

* **Background Type -** Select Image option to set the background image for the notification bar.
* **Background Image -** Upload the background image for the notification bar from here.

**Button Settings**

<figure><img src="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2FY7TT4OM9HYYJq5GfBudS%2FButton.png?alt=media&amp;token=1c333390-c796-4afe-ac52-c4afdd691552" alt=""><figcaption></figcaption></figure>

* **Button -** Select YES to add a CTA button to the notification bar.
* **Button Title -** Set the button text for the notification bar from here.
* **Button Font Color -** Set the button text color for the notification bar from here.
* **Button Animation Effect -** Set the animation effect for the CTA button from here.
* **Button Background Color -** Set the button background color for the notification bar from here.
* **Redirection Link (URL) -** Add the redirection link for the button from here.

**Countdown Timer Settings**

<figure><img src="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2F3x4oI1hSaDtp6rlPEoTw%2FCountdown%20timer.png?alt=media&amp;token=777e632c-80bb-43c5-ab29-cadd68b9b872" alt=""><figcaption></figcaption></figure>

* **Countdown Timer -** Select YES to add a timer clock in the notification bar.
* **Clock Background Color -** Set the background color for the timer clock from here.
* **Clock Number Color -** Set the timer clock number color from here.

#### Image

<figure><img src="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2FsoyXXke3WbyVx2v0QjjQ%2FImage.png?alt=media&amp;token=e42fa0cb-9c10-48ea-b1bc-d2bb21ae6267" alt=""><figcaption></figcaption></figure>

* **Notification Type -** Select the Image option to upload an already designed image for the notification bar.

**Banner Image Settings**

<figure><img src="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2FecpitZm9g6iHddMHpXAj%2FBanner%20image.png?alt=media&amp;token=1a1b3679-a42d-4bbd-8b05-30a0fc0572fd" alt=""><figcaption></figcaption></figure>

* **Banner Image -** Upload a banner image as a notification bar.
* **Redirection Link (URL) -** Add a redirection link for the banner image.