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

# Create and Manage a Progress Bar

This article explains how to design, create, and manage a Progress Bar for your web store in the Publisher Dashboard. Alternatively, you can create and update a Progress Bar using the [Progress Bar API](/../../api-reference/webstore/offers-v2/progress-bars/introduction).

## Design a Progress Bar

Before creating a Progress Bar, you need to design it:

1. Go to the **Offers Design** section and click **Add New Design**.
2. Configure the **Offer Settings**:
   * Use the dropdown in the **Type** field to select **Progress Bar**.
   * Enter a design **Name** and **External ID**.
3. Under **Progress Bar Frame**, set the **Background Opacity** and **Frame Radius**.
4. Under **Progress Bar Design**, configure the following:

   * **Bar Fill Color**
   * **Background Color**
   * **Border Color**
   * **Border Radius**
   * **Border Width**
   * Upload an image for the Progress Bar.

   <Note>
     If you provide an external image URL, Appcharge saves and uses the URL as-is. Appcharge doesn't download, copy, upload, or host the image. If you use an external image URL, host the image on your own infrastructure and keep it available at the provided URL.

     We recommend uploading image files instead of using external URLs when possible. Appcharge hosts uploaded files on its CDN.
   </Note>

   * **Points Ribbon Color**, which appears on all offers that contribute toward the Progress Bar.
5. Click **Save** in the top-right corner to finalize the design.

## Create a Progress Bar

<Note> Currently you can only have one Progress Bar per web store. </Note>

After designing a Progress Bar, you need to create it:

1. Go to the **Progress Bar** section and click **Create New Progress Bar**.
2. In the **Settings** tab, provide the **Bar External ID**, **Bar Name**, and select an existing **Bar Offer Design**.
3. Under **Segments**, you can assign specific player segments to the Progress Bar.
4. In the **Configuration** tab, create your missions:
   * In the **Bar Size** field, enter the number of points required to complete the mission.
   * Select the **Product** and **Amount** representing the reward players receive upon completing the mission.
   * Click **Add** to include additional missions.
5. In the **Schedule** tab, choose whether to keep the Progress Bar as a permanent offer in your web store or display it for a limited time:
   * Select the date range and time for the Progress Bar to be active.
   * Add any relevant notes.
   * Click **Add Appearance**.
6. Click **Save** to complete the Progress Bar creation process.

## Edit a Progress Bar

To edit an existing Progress Bar:

1. Go to the **Progress Bar** section to view your existing Progress Bars.
2. Click the ellipsis next to the Progress Bar you want to edit, and then click **Edit**.
3. Modify the Progress Bar as needed.
4. Click **Save** to apply the changes.

<Note>
  If you update the **Bar Size** field after players have already earned points, Appcharge doesn't recalculate or redistribute player progress. Completed missions remain completed, and players keep any rewards they already received.

  Changes apply only to missions the player hasn’t yet reached, and rewards aren’t granted retroactively.

  Learn more about [how configuration changes affect player progress](./about-progress-bars#update-mission-configuration).
</Note>

## Duplicate a Progress Bar

To duplicate a Progress Bar:

1. Go to the **Progress Bar** section to view your existing Progress Bars.
2. Click the ellipsis next to the Progress Bar you want to duplicate, and then click **Duplicate**.
3. Edit the duplicated Progress Bar as desired.
4. Click **Save** to apply the changes.

## Deactivate a Progress Bar

To deactivate a Progress Bar:

1. Go to the **Progress Bar** section to view your existing Progress Bars.
2. Click the ellipsis next to the Progress Bar you want to deactivate, and then click **Deactivate**.
3. The Progress Bar is now marked as **Inactive** and hidden from the web store.

## Activate a Progress Bar

A new Progress Bar is active by default. You can also activate a previously deactivated one:

1. Go to the **Progress Bar** section to view your existing Progress Bars.
2. Click the ellipsis next to the Progress Bar you want to activate, and then click **Activate**.
3. The Progress Bar now appears in the web store.

## Delete a Progress Bar

To delete a Progress Bar:

1. Go to the **Progress Bar** section to view your existing Progress Bars.
2. Click the ellipsis next to the Progress Bar you want to delete, and then click **Delete**.
3. The Progress Bar is permanently removed from the web store.