Magento 2 Grid Columns: 2, 3 or 4 Products per Row
SKU: PRODUCTGRIDCOLUMNS1
- switch between 2, 3 or 4 products per row in the toolbar
- the choice is remembered in the browser
- default column count per category and device
- switching without reloading the page
Einmaliger Kauf · inkl. 12 Monate Updates · zzgl. MwSt.
Magento 2 Grid Columns: the product list as dense as the customer likes it
With the Magento 2 grid columns switch from Mironsoft the toolbar of every category gets a small control for two, three or four products per row. The customer picks whether to see many items at a glance or larger pictures. The choice applies instantly without a reload and is kept for the next visit. You define defaults per category and device. The module runs on Alpine.js in the Hyvä theme and needs no extra library.
Three levels
Two, three or four columns can be chosen as buttons in the toolbar.
Choice remembered
The selected column count stays in the browser and also applies to other categories.
No reload
Switching only changes the grid, the page does not reload and filters stay active.
Default per category
Fashion categories start with four columns, furniture with two. You set the starting value.
Own values on mobile
On smartphones one or two columns are offered, on tablets up to three.
Matching images
The image size follows the column count so nothing looks blurry.
Why customers want to choose the column count in a category themselves
A customer with a large monitor wants four columns and many products at once. Another person wants bigger pictures for furniture, jewellery or fashion. The default grid is a compromise, and anyone searching for Magento 2 products per row or Magento 2 category page columns wants to resolve exactly that compromise.
With Magento 2 grid columns the visitor decides. That shortens scrolling in large ranges, eases comparison and shows categories with few, high-quality products more prominently. The effort on your side stays small because the module only changes the presentation and leaves sorting and filters untouched.
Magento 2 grid columns: a button group in the toolbar
Next to sorting and the number per page, three small buttons with grid symbols appear. One click changes the number of columns immediately. The active level is highlighted and marked for screen readers via aria-pressed. You choose in the admin which levels are shown, for example only two and three if your images are portrait format.
- Buttons with SVG icons, no icon font
- Active level visible and marked accessibly
- Allowed levels selectable in the admin
Remember the column count: the choice stays for the next visit
The customer decision is stored in the local storage of the browser and applied immediately on the next page load, before the grid becomes visible. That avoids flicker from three to four columns. The choice applies across categories, or separately per category if you prefer. No login is needed. Whether a note in your cookie statement is required is for you to review as the shop owner.
- Stored in the browser, no account needed
- No flicker while the page loads
- Choice global or per category
Set the column count per device and category
On a smartphone more than one or two columns rarely fit, while a desktop can show up to five. For every breakpoint you define the allowed levels and the starting value. Single categories receive different defaults, for example two columns for large furniture pictures and four for accessories. The settings override each other in a clear order: category before store view before global value.
- Starting value and levels per breakpoint
- Different defaults per category
- Clear inheritance: category, store view, global
Layered navigation, pagination and images working together
The switch works together with filters, sorting and page numbers without changing them. Whoever filters keeps the column count. To keep the page fast, the image size follows the chosen column count and lazy loading is used for images below the fold. The grid changes with Tailwind classes and Alpine.js, without a layout jump and without extra scripts.
- Filters, sorting and page number stay unchanged
- Image size matches the column count
- Built with Tailwind classes and Alpine.js
Where Magento 2 grid columns help in everyday shop work
Typical situations in which Magento 2 grid columns adjust the density of the list.
Large ranges
Customers with many results pick four columns, see more products and scroll less.
Fashion and jewellery
Whoever wants to see details switches to two columns with larger images.
Smartphone visitors
On mobile, customers toggle between a compact and a generous view.
Retailers with mixed ranges
Furniture starts with two columns, accessories with four. Each category gets a suitable starting value.
Magento 2 grid columns: comparison without and with the module
The difference to a fixed grid per category.
| Topic | Without module | With Mironsoft Grid Column Switch |
|---|---|---|
| Column count | Fixed by the theme | Customer chooses between 2, 3 and 4 |
| Remembering the choice | Not possible | Applied immediately on the next visit |
| Reloading | Every change needs a page request | Switching without reloading |
| Categories | One grid for everything | Own starting value per category |
| Mobile | Same logic as desktop | Own levels for smartphone and tablet |
How we set up Magento 2 grid columns for you
The process after you place your order.
Briefing
You tell us the allowed levels, the starting values and categories with special wishes.
Installation
We install the module, set up Magento 2 grid columns for your store views and place the switch in the toolbar. Afterwards we test Magento 2 grid columns with your filters and images.
Design
We adapt icons, spacing and image sizes to your theme.
Test
We check desktop, tablet and smartphone, layered navigation, pagination and search results.
Handover
Your team receives an introduction to defaults, levels and inheritance.
Differences to sorting and merchandising
Improved sorting and merchandising rules from Mironsoft determine the order of products. Magento 2 grid columns only affects the presentation, namely how many products appear per row. Both modules complement each other without getting in the way.
A fixed column count in the theme remains as the default. Magento 2 grid columns only override it for the individual visitor. Everything runs with Alpine.js in the Hyvä theme, without jQuery and without an extra library.
No download — personal setup instead
The column switch is not listed here as a ready-made download file for self-installation. The purchase is a service commission: we get in touch after the purchase, install the module in your shop and agree on levels, starting values and design together with you.
Frequently asked questions
Everything important about Magento 2 grid columns: the switch, defaults, storage and how the purchase works.
How can I change the number of products per row in Magento 2?
Is the chosen column count remembered?
Can I set a different default column count per category?
How do I set the columns for smartphones?
Does the page reload when switching?
Does the switch work with layered navigation?
Do I have to mention the storage in the cookie notice?
Do Magento 2 grid columns work with Hyvä?
How does it differ from sorting and merchandising?
Can I download and install the module myself?
Recently Viewed Products
Magento 2 Grid Columns – Mironsoft Grid Column Switch