# Customizing the progress bar

**The block `loki-checkout.progressbar` allows customers to navigate in between steps. This page describes a couple of modifications that could be made to its PHTML template.**

## Customizing the separator
Each step in the progress bar is separated with a block `loki-checkout.progressbar.separator` that calls upon a more generic block `loki-checkout.utils.separator` that displays a `chevron-right.svg`. First of all, the icon could simply be overridden by your theme by copying this file to your theme under the file `LokiCheckout_Core/web/images/chevron-right.svg`. Second, you could override the PHTML template of either file as well.

The separators could also be skipped altogether by setting the `skip_separator` argument to `true`:

```xml
<referenceBlock name="loki-checkout.progressbar">
    <arguments>
        <argument name="skip_separator" xsi:type="boolean">true</argument>
    </arguments>
</referenceBlock>
```

## Using icons instead of labels
By default, labels are displayed for each step. However, instead of using labels, you might also want to use icons. There is ready-made `icon.phtml` template to facilitate this:

```xml
<referenceBlock name="loki-checkout.progressbar.step.inner" template="LokiCheckout_Core::checkout/progressbar/step/icon.phtml">
    <arguments>
        <argument name="inactive_class" xsi:type="string">opacity-40</argument>
    </arguments>
</referenceBlock>
```

Each icon could be configured with an `active_class` and `inactive_class`.

> Note that this template might cause an error if a custom step is added for which an icon could not be found.

## Adding something before or after the steps
The PHTML template `LokiCheckout_Core::checkout/progressbar.phtml` reveals two containers to be used for adding more content: `loki-checkout.progressbar.before` and `loki-checkout.progressbar.after`. One example here is to add a **Home** icon to the progress bar:

```xml
<referenceContainer name="loki-checkout.progressbar.before">
    <block
        name="loki-checkout.progressbar.home" as="home"
        template="LokiCheckout_Core::checkout/progressbar/home.phtml"/>
</referenceContainer>
```