# Shipping step title

By default, the shipping step title is used in two places: In the progressbar in the top of the checkout, visible during all steps. And in the top of the *content* area when the shipping step is actually active.

### The title within the shipping step
The title of the shipping step, within the actual shipping step, is the easiest to explain. It is a block `loki-checkout.steps.shipping.title` that is moved to the shipping step container using the XML layout. Its `title` argument can be set within the XML layout.

```xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:View/Layout:etc/page_configuration.xsd">
    <body>
        <referenceBlock name="loki-checkout.steps.shipping.title">
            <arguments>
                <argument name="title" xsi:type="string">Delivery</argument>
            </arguments>
        </referenceBlock>
    </body>
</page>
```

Or alternatively, you could create a template override, similar to `LokiCheckout_Core::checkout/shipping/address-form-title.phtml` (which is not the title of the shipping step, but the title of the shipping address within the shipping step):

```php
use Loki\Components\Util\Block\TemplateRenderer;

/** @var TemplateRenderer $templateRenderer */

$title = 'Deliveries';

echo /* @noEscape */ $templateRenderer->html(
    $block,
    'LokiCheckout_Core::generic/title.phtml',
    ['title' => $title]
);
```

### The title within the progress bar
The title of the shipping step, in the progress bar, is actually derived from the `LokiCheckout\Core\Component\Checkout\Step\ShippingStep\ShippingStepViewModel` class its `getLabel()` method. By default, it derives its value from the `title` argument of the `loki-checkout.steps.shipping.title`. However, in theory, this block could also be removed:

```xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:View/Layout:etc/page_configuration.xsd">
    <body>
        <referenceBlock name="loki-checkout.steps.shipping.title" remove="true"/>
    </body>
</page>
```

At this moment, the ViewModel class allows for using a `title` argument on the block of the shipping step itself:

```xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:View/Layout:etc/page_configuration.xsd">
    <body>
        <referenceBlock name="loki-checkout.steps.shipping">
            <arguments>
                <argument name="title" xsi:type="string">Delivery</argument>
            </arguments>
        </referenceBlock>
    </body>
</page>
```

Yet, if this argument is not ready, a simple word *Shipping* is returned.

If you want to dynamically change this, use a DI plugin.
