> 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-free-shipping-bar-extension/bar-manager.md).

# Bar Manager

From the left menu, navigate to MageComp > Free Shipping Bar Manager and click on the Add New Shipping Bar button.

#### General Settings

<figure><img src="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2FKkwVL0x8zGATxzLh4K0c%2FBar%20General%20Settings.png?alt=media&amp;token=5a149e85-724f-4bd4-9f81-4f961fdd8802" alt=""><figcaption></figcaption></figure>

* **Status -** You can enable or disable the Free Shipping Bar or Announcement Bar from here.
* **Title -** You can set the title of the free shipping bar or announcement bar from here.
* **Store View -** From this field, you can select the store view to show the free shipping bar or announcement bar.
* **Date From -** In this field, set the starting date to display the free shipping bar or announcement bar.
* **Date To -** In this field, set the ending date to display the free shipping bar or announcement bar.
* **Priority -** In this field, set the priority of the free shipping bar or announcement bar.
* **Add Link to the Bar -** Enable it to set the redirection link in the free shipping bar or announcement bar.
* **Link Address -** Enter the URL for redirection.

#### Free Shipping Bar Settings

<figure><img src="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2FTzg4onksLgpS1BnzF4M7%2FFree%20Shipping%20Bar%20Settings.png?alt=media&amp;token=cc9c4507-480d-4f30-91e3-94df89ca573a" alt=""><figcaption></figcaption></figure>

* **Bar Type -** Select the Free Shipping Bar option to display it in the frontend.
* **Background Color -** Set the background color of the free shipping bar according to your store theme.
* **Font Color -** Set the font color of the free shipping bar according to your store theme.
* **Amount Color -** Set the amount color of the free shipping bar according to your store theme.
* **Font Size -** Set the font size of the free shipping bar according to your store theme.

<figure><img src="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2Fz1SBgUM3GMDxR2TSB9eM%2FInitial%20Message.png?alt=media&amp;token=78a92404-6f27-48a4-b584-3e79dc468891" alt=""><figcaption></figcaption></figure>

* **Initial Message -** In this field, you can set the initial message to show on the free shipping bar with {{minvalue}}.

<figure><img src="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2FMTX8T3yP9kfayIlbwhiN%2FIn%20Progress%20Message.png?alt=media&amp;token=a87c595c-b429-46f8-be8f-7c12d46087ef" alt=""><figcaption></figcaption></figure>

* **In Progress Message -** In this field, you can set the in-progress message to show on the free shipping bar with {{subtotal}}.

<figure><img src="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2F8JJtUS1MiiHeq9scw4ss%2FAchieved%20Message.png?alt=media&amp;token=361d404b-1d6e-4008-9c81-0226a0028537" alt=""><figcaption></figcaption></figure>

* **Achieved Message** In this field, you can set the achieved message to show on the free shipping bar when the free shipping is achieved.

<figure><img src="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2FAkkob66mZsWlj6bJBjlC%2FProgress%20Bar.png?alt=media&amp;token=c1ce76d7-7f5b-4469-9e96-8cc1e5b6ff9f" alt=""><figcaption></figcaption></figure>

* **Enable Progress Bar -** Set it to Yes to display a progress bar on the free shipping bar.
* **Progress Bar Initial Color -** Set the initial color of the progress bar when it is less than 50%.
* **Progress Bar Middle Color -** Set the middle color of the progress bar when it is more than 50%.
* **Progress Bar Complete Color -** Set the complete color of the progress bar when the free shipping is achieved.
* **Progress Bar Template -** Select the template for the progress bar.

#### Announcement Bar Settings

<figure><img src="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2FtOLYUkKwXS8wJWq4pEUv%2FAnnouncement%20Bar%20Settings.png?alt=media&amp;token=f2346587-7f36-45c6-8638-b3c163d4855a" alt=""><figcaption></figcaption></figure>

* **Bar Type -** Select the Announcement Bar option to display it in the frontend.
* **Announcement Message -** Set the announcement message to show on the announcement bar.
* **Announcement Font Color -** Set the font color of the announcement bar according to your store theme.
* **Font Size -** Set the font size of the announcement bar according to your store theme.
* **Announcement Background Color -** Set the background color of the announcement bar according to your store theme.

<figure><img src="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2FAkFSfRtx1jOTrSyL8zn7%2FCountdown%20Timer.png?alt=media&amp;token=f2cc1cb0-5964-432e-b900-e061890a2633" alt=""><figcaption></figcaption></figure>

* **Countdown Timer -** Set it to Yes to display a countdown timer as a clock on the announcement bar.
* **Clock Background Color -** Set the background color of the clock.
* **Clock Number Color -** Set the number color of the clock.
* **Announcement Template -** Select the template for the announcement bar.

#### Admin Grid

The admin view to manage the Free Shipping and Announcement Bars

<figure><img src="https://807210804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8wMgNeFnYjVGQmgdxMv4%2Fuploads%2FumC7Px2UFgrP45rbtTuS%2FAdmin%20view.png?alt=media&amp;token=ff71d643-2f93-465f-967d-7b8713dac44b" alt=""><figcaption></figcaption></figure>