Shopify themes, liquid, logos, and UX
Hello,
I am currently using Supply Theme, but I'm customizing Dawn Theme to switch to soon. My question is how do I go from 4 products to 5 products per row? I currently have 5 on my Supply but Dawn either offers 4 or 6...and if you choose 6, it puts 4 on 1 line and 2 on a line underneath the top line.
Thanks for any help!
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Thank you for getting back to me, but my url is for my current website. I am in the custom stage of switching over to Dawn theme. My website is www.reelfishyapparel.com
You'll be able to see my current Home Page with the 5 images in 1 row, but see the screen shots I provided for what I want to change in the Dawn Theme.. I want 5 photo images across 1 row. Currently Dawn theme only gives me the option of 4 images per row.
Thanks,
Holly
@reelfishy,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:
<style>
@media (min-width: 990px){
.collection .grid--quarter-max.grid--4-col-desktop .grid__item {
max-width: 20% !important;
}
}
</style>
Kind regards,
Diego
Hi Diego, that does help by putting 5 images on a row, but my maximum products to show only allows me to select 4, 6, 8, 10, etc. It doesn't allow me to choose only 5. Therefore if I choose max 6, the 5 images are on 1 row, but the 6th is on the 2nd row. I only want 5 images on 1 row. See screen shots. Thanks!
@reelfishy
I see.
1. From the "edit code" page, find the "featured-collection" section.
2. Search for exactly this (with quotes included):
step": 2
3. Replace the number 2 with the number 1 and save. So, instead of "step": 2, it should read "step": 1.
That is how it will look like:
Kind regards,
Diego
Ok, so that gets me to be able to select 5 as the maximum products to show, but it now shows 3 on 1 line and the other 2 on another line. And the 2 on the second line are huge!
See screenshot.
Anyone else out there that can help with my issue of changing from 4 products to 5 products per line?
Ok, so that gets me to be able to select 5 as the maximum products to show, but it now shows 3 on 1 line and the other 2 on another line. And the 2 on the second line are huge!
I’m trying to have this to work as well, except i want to always have 3 products displayed in a row, both horizontally and vertically on mobile and ipad.
just like OP i managed to change the number of items in the list, thanks to your code, but now items are displayed onto two lines
@diego_ezfyI had the same issue and found your answer on this thread, and it's working great! (I set the percentage to 16% to display 6 products per row.)
The only problem I'm running into is how to get it to adjust on tablet and mobile. I'd like it to change to 2 or 3 products per row on mobile, and I can't figure out how to do that. Any advice would be appreciated!
@LaDolce - any resolution on mobile products shown? I also changed mine on desktop like you suggested and put 6 images vs 5 images and it works fine. Currently on my mobile view, I have 2 pictures per row. I think 3 would be good. Please let me know if you find the solution! Thanks!
@reelfishyI can't even get 2 images per row on mobile. My mobile view was squishing all six of the products together so that text was overlapping and unreadable. I replaced all the Shopify code with the Searchanize plugin and it's working better and giving me more options.
@diego_ezfy I tried making both changes you outlined in your response, but am still unable to get five images to show up in one line for the featured collection on the home page - It is still three smaller images and two large images below. Any suggestions on how to correct this?
can you please share store url
@KetanKumar my store is not yet live yet, and is password protected at the moment.
I have included screen shots of the code that was added to the respective files based on the answers provided. Hope that helps, and thanks in advance!
can you please share store preview url
@KetanKumar here is the preview link: https://wfm7byg3fzw5elxk-60145041655.shopifypreview.com
Thanks!
yes, please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.
@media screen and (min-width: 990px){
#product-grid .grid--quarter-max.grid--4-col-desktop .grid__item {
max-width: 20%;
}
}
@KetanKumar unfortunately I wasnt able to get that code to work... The images in the featured collection still show up with three on one line, and the remaining two below.
Preview link: https://6oi50lea8gvzua6l-60145041655.shopifypreview.com
@reelfishy wrote:Hello,
I am currently using Supply Theme, but I'm customizing Dawn Theme to switch to soon. My question is how do I go from 4 products to 5 products per row? I currently have 5 on my Supply but Dawn either offers 4 or 6...and if you choose 6, it puts 4 on 1 line and 2 on a line underneath the top line.
Thanks for any help!
You need modifications on html,schema and add some css.
But my snipping tool from MS is not working so not able to show you. So let someone else do the job.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024