Shopify themes, liquid, logos, and UX
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!!
Solved! Go to the solution
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
If this was helpful, hit the like button and accept the solution.
Thanks
@unadiamond hi,
@media only screen and (min-width: 1400px) {
.grid {
--columns: var(--COLUMNS-WIDESCREEN, 3);
}
}
Result:
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!
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.
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
If this was helpful, hit the like button and accept the solution.
Thanks
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024