2 -> 3 products per row in collection

[unadiamond]

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!!

[gutenplayer]

@unadiamond hi,

hope you are well,

check the list,

1, from admin, go to Online Store > Themes.

2, Actions > Edit code for your active theme.

3, Find and open the theme.liquid file, maybe in the Layout folder.

4, Look for the </head> tag and paste the code in the end

@media only screen and (min-width: 1400px) {
    .grid {
        --columns: var(--COLUMNS-WIDESCREEN, 3);
    }
}​

Result:

I hope it works for you, let me know, and If you'd like to discuss this more, don't hesitate to send me a PM

Thank you

[Made4uo-Ribe]

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 </body> tag and paste the code below before the tag. 

<style>
.grid.grid--mobile-slider {
    --COLUMNS: 3;
}
</style>

And save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Dan-From-Ryviu]

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;
}

[GTLOfficial · Accepted solution]

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