> For the complete documentation index, see [llms.txt](https://docs.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.themeware.design/additional-features/extensions/checkout-steps.md).

# Checkout steps

With ThemeWare®, you can use the sales-promoting "Checkout steps" of our Shopware 5 themes in your Shopware 6 shop as well.

<figure><img src="/files/786fqbI3wdL6Z3r1uiQI" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Note**: The checkout steps are shown in the checkout if the "Show checkout steps" configuration is enabled. You can additionally display them in the shopping cart via "Show checkout steps in shopping cart".
{% endhint %}

***

## Configuration

### **Theme configuration**

1. Go to the tab "**Extensions**"
2. Expand the block "**Checkout steps**"
3. Enable the configuration "**Show checkout steps**" (display in the checkout)
4. Optional: Enable "**Show checkout steps in shopping cart**" to additionally display them in the shopping cart
5. Save your changes after editing

### **Content**

* Edit the checkout step texts using the following snippets:
  * `twt.extension.checkoutSteps.step1`
  * `twt.extension.checkoutSteps.step2`
  * `twt.extension.checkoutSteps.step3`

{% hint style="info" %}
**Note**: For information on how to edit snippets, see the following instructions: [Texts: Editing and translation](https://knowledge.themeware.design/knowledge-base/tutorials/texts-editing-and-translation)
{% endhint %}

{% hint style="success" %}
**Tip**: If a change does not affect the storefront, just clear the Shopware cache: [Clearing / warming up the Shopware cache](https://knowledge.themeware.design/knowledge-base/tutorials/miscellaneous/clearing-the-shopware-cache)
{% endhint %}

***

## Options

* **Layout type**
  * "Continuous lines", "Lines between steps", "Continuous bars between steps" or "Bars between steps".
* **Icon style (Steps)**
  * "Steps with numbers", "Steps with icons" or "Small steps".
* **Show text from...**
  * Defines from which breakpoint the text below the steps appears (or "don't show").

***

## Summary

#### Theme configuration

* Tab "Extensions" => Block "Checkout steps" => Show checkout steps / Show checkout steps in shopping cart
* Tab "Extensions" => Block "Checkout steps" => Section "Basic configuration" => Layout type / Icon style (Steps) / Show text from...

#### Snippets

* **Text**
  * `twt.extension.checkoutSteps.step1`
  * `twt.extension.checkoutSteps.step2`
  * `twt.extension.checkoutSteps.step3`