Magento 2 Process Steps Widget for CMS Pages and Guides
SKU: PROCESSSTEPSWIDGET1
- numbered steps with icon, title and text
- horizontal, vertical or timeline layout
- optional HowTo schema for search engines
- single column on mobile, translatable per store view
Einmaliger Kauf · inkl. 12 Monate Updates · zzgl. MwSt.
Magento 2 Process Steps Widget: show workflows as a clear sequence
With the Mironsoft Magento 2 Process Steps Widget you present workflows such as ordering, delivery, assembly or consulting as numbered steps. You maintain the steps in the admin, drop the widget into a CMS page, a CMS block or a category, and choose the layout. The Magento 2 Process Steps Widget runs on Alpine.js and Tailwind, with no jQuery and no extra library, and every store view can carry its own wording.
Step lists in the admin
Create as many step lists as you need, name them and reuse them.
Three layouts
Horizontal row, vertical list or timeline, selectable per widget.
Icon or image
Every step gets a number, an icon or its own image.
Linkable steps
Title, text and an optional link per step, for example to shipping info.
HowTo schema
Optionally output HowTo JSON-LD with duration and tools.
Single column on mobile
On small screens the steps stack automatically.
Why visitors understand workflows better as steps than as running text
Anyone explaining a workflow tends to write one long paragraph: order first, then pay, then book a date, then assembly. Visitors skim such text and miss details. Merchants therefore look for a Magento 2 Process Steps Widget that numbers the steps and separates them visually. Out of the box, the Page Builder offers no ready-made element for that.
Without a widget, editors build columns and lists by hand, every page looks different, and the layout breaks on mobile. With the Magento 2 Process Steps Widget you maintain the steps once, centrally, and place them wherever a workflow needs explaining.
Create step lists in the admin and maintain them in every language
In the admin you create a step list and add steps with title, description, icon or image and an optional link. You change the order with a position field. Each list holds its own texts per store view, so English and German shops share one structure with their own wording. One list can be used in any number of widgets, and a text change takes effect everywhere at once.
- Title, text, icon or image and link per step
- Sorting by position field
- Own texts per store view
Magento 2 Process Steps Widget as a row, a list or a timeline
In the widget you choose between a horizontal row, a vertical list and a timeline with a line. Numbers, icons or images sit in circles, and connector lines guide the eye from step to step. Colours and spacing are controlled through admin options, and the classes come from Tailwind. On a smartphone all variants stack so that nothing gets cut off.
- Three variants, set per widget
- Accent colour and spacing via admin options
- Automatic single column on mobile
Optional HowTo markup for guides and tutorials
When the sequence is a real how-to, such as assembling a shelf, the module can output HowTo JSON-LD with name, steps, estimated duration and tools. The markup only appears in the source when you switch it on per widget. Whether a rich result shows up is the search engine decision and cannot be guaranteed. For pure sales workflows you leave the schema switched off.
- HowTo JSON-LD switchable per widget
- Duration and tools as optional fields
- No markup when the option is off
Use the widget in CMS pages, categories and product pages
The widget can be inserted through the Page Builder, the widget editor and layout XML. That puts the delivery workflow on the shipping page, the assembly steps on the product page and the consulting process in a category description. An optional highlight marks the step currently in view via Alpine.js. When visitors have reduced motion enabled, the animation is skipped.
- Page Builder, widget editor and layout XML
- Current step highlighted via Alpine.js
- Reduced motion is respected
Where a Magento 2 Process Steps Widget helps in everyday shop work
Typical places where a workflow is understood faster as a sequence of steps.
Order and delivery flow
On the shipping page, four steps show what happens after the order, from payment received to delivery.
Assembly and setup
On the product page a timeline walks through the assembly. With HowTo markup it becomes a structured guide.
Consulting and quotes
A B2B shop explains enquiry, consultation, quote and order, which reduces questions to the sales team.
Returns and complaints
The returns page shows in a few steps how customers register a return and when the refund arrives.
Magento 2 Process Steps Widget: text block or widget compared
What the Magento 2 Process Steps Widget changes compared with hand-built lists in the Page Builder.
| Topic | Without the module | With Mironsoft Process Steps Widget |
|---|---|---|
| Maintenance | Every page by hand, layout by hand | One list centrally, usable anywhere |
| Appearance | Inconsistent, often broken on mobile | Three layouts, single column on mobile |
| Multilingual | Maintain pages twice | Own texts per store view in one list |
| Search engines | No structured markup | Optional HowTo schema |
| Accessibility | Depends on the build | Ordered list with a clear sequence |
How we set up the Magento 2 Process Steps Widget for you
The process after you place your order.
Briefing
You name the workflows that should appear as steps, for example ordering, assembly or returns.
Installation
We install the module and set up the Magento 2 Process Steps Widget in your theme, including Tailwind classes for your brand colours.
Content
Together with you we create the first step lists in all store views and place them on the pages you want.
Schema check
Where you use it, we verify the HowTo markup with common testing tools.
Handover
Your team gets an introduction to step lists, layouts and widget placement.
Scope compared with USP bar, pricing table and FAQ
The Mironsoft USP bar shows short benefits in one line, the pricing table compares packages, and the FAQ answers single questions. The Magento 2 Process Steps Widget explains an order of events in which each step builds on the previous one.
The modules can be combined, for example a step sequence above an FAQ on the same page. Everything runs on Alpine.js in the Hyvä theme, with no additional library.
No download, personal setup
The Process Steps Widget is not listed here as a ready-made download file to install yourself. The purchase is a service order: after the purchase we get in touch, install the module in your shop and create the first step lists together with you.
Frequently asked questions
Everything important about steps, layout, HowTo schema and how the purchase works.
How can I show process steps as a widget in Magento 2?
How can I create a step-by-step guide in Magento 2?
Do I need Page Builder skills?
Can I maintain steps in several languages?
How does the HowTo schema work?
Does the widget look good on mobile?
Can I use the same step list several times?
Does the Magento 2 Process Steps Widget work with Hyvä?
How does it differ from a USP bar and a pricing table?
Can I download and install the module myself?
Recently Viewed Products
Magento 2 Process Steps Widget – Mironsoft