Re: 2 -> 3 products per row in collection

Solved

2 -> 3 products per row in collection

unadiamond
Tourist
7 0 3

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
624 135 123

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
264 37 30

@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
8813 2109 2586

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 is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

Dan-From-Ryviu
Shopify Partner
10094 2006 2058

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 Buy me coffee ❤️
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- 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
624 135 123

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