As Magento enhances its features day to day, as a developer or a user, we are supposed to learn more about its new features. And because of that, we need to change our implementation technique for each version as per their standard.
Here is one such implementation issue that I have faced, and I would like to share it with someone who is looking for it.
In Magento 2, we were almost familiar with Page Builder, and most of us using that for CMS Page customization on our projects. Which makes most of our customization on theme-related works less.
When we are using “Product” content on your page, which is under Add Content. Which is used to list the set of products on the Custom page or a specific section.
Based on my need, I need to change the no of products per row. By default, it was 5.
In the Category page or search page of Magento 2, the no of products per row is controlled by CSS. Where us in Page Builder found it hard to change it. After some diagnosis, we found it can be achieved via theme.
Here we explained how we achieved it. Hope it helps you.
Create a view.xml under the mentioned below path.
app/design/frontend/<yourpackage>/<yourtheme>/etc/view.xml
<?xml version="1.0"?> <view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd"> <vars module="Magento_PageBuilder"> <var name="breakpoints"> <var name="desktop"> <var name="conditions"> <var name="min-width">1024px</var> </var> <var name="options"> <var name="products"> <var name="default"> <var name="slidesToShow">4</var> </var> </var> </var> </var> <var name="tablet"> <var name="conditions"> <var name="max-width">1024px</var> <var name="min-width">768px</var> </var> <var name="options"> <var name="products"> <var name="default"> <var name="slidesToShow">3</var> </var> <var name="continuous"> <var name="slidesToShow">3</var> </var> </var> </var> </var> <var name="mobile"> <var name="conditions"> <var name="max-width">767px</var> <var name="min-width">640px</var> </var> <var name="options"> <var name="products"> <var name="default"> <var name="slidesToShow">2</var> </var> </var> </var> </var> <var name="mobile-small"> <var name="conditions"> <var name="max-width">640px</var> </var> <var name="options"> <var name="products"> <var name="default"> <var name="slidesToShow">1</var> <var name="slidesToScroll">1</var> </var> <var name="continuous"> <var name="slidesToShow">1</var> <var name="slidesToScroll">1</var> </var> </var> </var> </var> </var> </vars> </view>
In the above example, we have shared the conditions for various devices like Desktop, Tablet, Mobile, and Smaller mobiles.
We can also change the max-width based on our theme condition. Based on each condition we can set the no of products per row.
Happy Coding!
Over 250,000 online stores rely on this powerful CMS to run their online business, and merchants using Magento have experienced growth three times faster, on average. Premier brands like Ford, Omega Watches, Bvlgari, Canon, Nike, Coca-cola, Swatch, Vizio, and many more, trusted Magento as their perfect choice for online business.
Choose the right Magento Development Service for your eCommerce store. A Magento development company with skilled Magento developers will give you endless opportunities to build the perfect store that aligns with your business requirements.
We are here for all your requirements. Get in touch with our experts for more information.
