A user seeks to modify their Shopify store’s Broadcast theme to display 3 products per row instead of 2, noting the theme customization panel lacks this option.
Three CSS-based solutions were provided:
Made4uo-Ribe’s approach: Add custom CSS before the </body> tag in the theme.liquid file (includes screenshot of result)
Dan-From-Ryviu’s method: Insert CSS targeting .brick__section .brick__block--products with --COLUMNS: 3 !important via the theme customizer’s Custom CSS section
GTLOfficial’s solution: Add a media query to theme.css targeting screens 1400px+ wide, modifying .grid.grid--mobile-slider with --columns: 3 !important
All solutions involve adding CSS code to override the default 2-column layout. The discussion remains open with no confirmed resolution from the original poster.
Hi there!
I need to change the amount of products per row from 2->3.
I am using the Broadcast theme, and there are no options to increase this amount in the theme’s customisation panel, so I’m assuming it’ll need to be done via the CSS / liquid file.
Here’s the URL: https://www.unadiamond.com/collections/
Thank you in advance!!
Hi @unadiamond
Check this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “theme. Liquid” file. Find the tag and paste the code below before the tag.
And save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Hi @unadiamond
You can do that by adding this code to Custom CSS in Online Store > Themes > Customize > Theme settings
.brick__section .brick__block--products {
--COLUMNS: 3 !important;
}
Hello @unadiamond
Go to online store ---------> themes --------------> actions ------> edit code------->theme.css
at the end of the file and save.
@media only screen and (min-width: 1400px) {
.grid.grid--mobile-slider {
--columns: 3 !important;
}
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
