How to Build a Custom Checkout Progress Bar in Magento 2

Why You Need a Custom Checkout Progress Bar in Magento 2

Let’s be honest—nobody likes a confusing processus de paiement. If your clients feel lost or unsure about where they are in the paiement flow, they might abandon their cart. That’s where a custom paiement progress bar comes in handy. It visually guides shoppers through each étape, reducing friction and increasing conversions.

Magento 2’s default paiement is solid, but sometimes you need a little extra flair to match your store’s branding or improve UX. Dans ce guide, nous’ll walk through comment build a custom paiement progress bar in Magento 2—étape par étape, with code exemples.

Understanding the Default Magento 2 Checkout Flow

Avant diving into personnalisation, let’s quickly recap how Magento 2’s paiement works par défaut:

  • Shipping – Customer enters shipping details.
  • Review & Payments – Customer selects méthode de paiement and avis commande.
  • Success Page – Order confirmation.

The default progress indicator is minimal, just showing the current étape. We’ll enhance this with a dynamic, visually appealing progress bar.

Step 1: Create a Custom Module

Premièrement, we need a module to house our personnalisations. Here’s comment set one up:

app/code/Magefine/CheckoutProgressBar/
├── etc/
│   └── module.xml
├── registration.php
└── view/frontend/
    └── layout/
        └── checkout_index_index.xml

registration.php:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Magefine_CheckoutProgressBar',
    __DIR__
);

etc/module.xml:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Magefine_CheckoutProgressBar" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Checkout"/>
        </sequence>
    </module>
</config>

Step 2: Override the Checkout Layout

Ensuite, we’ll modify the paiement layout to include our custom progress bar.

view/frontend/layout/paiement_index_index.xml:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="custom.checkout.progress" template="Magefine_CheckoutProgressBar::progress.phtml" before="checkout.root"/>
        </referenceContainer>
    </body>
</page>

Step 3: Create the Progress Bar Template

Maintenant, let’s build the actual progress bar HTML and styling.

view/frontend/templates/progress.phtml:

<div class="custom-progress-bar">
    <ul>
        <li class="step-shipping active"><span>Shipping</span></li>
        <li class="step-review"><span>Review & Payment</span></li>
        <li class="step-success"><span>Order Complete</span></li>
    </ul>
</div>

Step 4: Add CSS Styling

To make it look polished, we’ll add some CSS. Create a new fichier:

view/frontend/web/css/source/_module.less:

.custom-progress-bar {
    margin-bottom: 30px;
    ul {
        display: flex;
        list-style: none;
        padding: 0;
        justify-content: space-between;
        li {
            flex: 1;
            text-align: center;
            position: relative;
            padding: 10px 0;
            color: #ccc;
            font-weight: bold;
            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 4px;
                background: #eee;
            }
            &.active {
                color: #1979c3;
                &::before {
                    background: #1979c3;
                }
            }
            span {
                position: relative;
                z-index: 1;
                background: #fff;
                padding: 0 10px;
            }
        }
    }
}

Step 5: Add JavaScript to Update Progress Dynamically

Nous devons update the progress bar as the client moves through paiement.

view/frontend/web/js/progress.js:

define([
    'jquery',
    'Magento_Checkout/js/model/step-navigator'
], function ($, stepNavigator) {
    'use strict';

    return function () {
        stepNavigator.steps.subscribe(function (steps) {
            steps.forEach(function (step) {
                if (step.isVisible()) {
                    $('.custom-progress-bar li').removeClass('active');
                    $('.custom-progress-bar .step-' + step.code).addClass('active');
                }
            });
        });
    };
});

Maintenant, include this JS in your layout:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="head.additional">
            <block class="Magento\Framework\View\Element\Text" name="custom.progress.js">
                <action method="setText">
                    <argument name="text" xsi:type="string"><![CDATA[<script type="text/x-magento-init">
                        {
                            "*": {
                                "Magefine_CheckoutProgressBar/js/progress": {}
                            }
                        }
                    </script>]]></argument>
                </action>
            </block>
        </referenceBlock>
    </body>
</page>

Step 6: Test & Deploy

Après setting everything up, run these commands:

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush

Maintenant, your custom paiement progress bar devrait être live! Navigate to the paiement page to see it in action.

Advanced Customizations

Want to take it further? Voici some ideas:

  • Add Icons – Include visual indicators (like checkmarks) for completed étapes.
  • Mobile Optimization – Adjust the layout for smaller screens.
  • Progress Percentage – Show a dynamic percentage completion.

Réflexions finales

A well-designed paiement progress bar can significantly improve your store’s utilisateur experience. By following this guide, you’ve learned comment build a custom one in Magento 2 à partir de zéro. Need a ready-made solution? Check out Magefine’s extensions for optimized paiement enhancements!

Got questions? Drop them in the comments below!