Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: 2 -> 3 products per row in collection

Solved

2 -> 3 products per row in collection

unadiamond
Excursionist
17 0 4

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

Accepted Solution (1)

GTLOfficial
Shopify Partner
665 140 133

This is an 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
8.png

If this was helpful, hit the like button and accept the solution.
Thanks

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh

View solution in original post

Replies 4 (4)

comercioservice
Shopify Partner
272 37 34

@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:

gutenplayer_0-1727730481442.png

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
Was my reply helpful? Click Like to let me know! Was your question answered? Mark it as an Accepted Solution.
Need store customizations, bug fixing or development ? Contact with us -- Support form for quick quote!
BFCM Big Deals: Big savings 25% off -on our Shopify FAQs apps!

Made4uo-Ribe
Shopify Partner
9076 2168 2677

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:

Made4uoRibe_0-1727731223100.png

 

 

 

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

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

Dan-From-Ryviu
Shopify Partner
10261 2039 2110

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

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

GTLOfficial
Shopify Partner
665 140 133

This is an 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
8.png

If this was helpful, hit the like button and accept the solution.
Thanks

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh