Dawn Theme - Featured Collection - Change from 4 products to 5 products per line

reelfishy
Excursionist
26 0 2

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.This is the Dawn Theme layoutThis is the Dawn Theme layoutThis is my current Supply theme layoutThis is my current Supply theme layout

Thanks for any help!

Replies 20 (20)

KetanKumar
Shopify Partner
36839 3635 11972

@reelfishy 

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
reelfishy
Excursionist
26 0 2

 @KetanKumar 

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

This is my current Supply theme layoutThis is my current Supply theme layout

 

diego_ezfy
Shopify Partner
2935 562 883

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

 

diego_ezfy_0-1636084741878.png

 



Kind regards,
Diego

 

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

reelfishy
Excursionist
26 0 2

@diego_ezfy 

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!

Screen Shot 2021-11-05 at 7.20.00 AM.pngScreen Shot 2021-11-05 at 7.21.11 AM.png

diego_ezfy
Shopify Partner
2935 562 883

@reelfishy 

I see.

1. From the "edit code" page, find the "featured-collection" section.
2. Search for exactly this (with quotes included):

step": 2

diego_ezfy_0-1636138730781.png

 

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:
 

diego_ezfy_1-1636138764431.png


Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

reelfishy
Excursionist
26 0 2

@diego_ezfy 

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.

Screen Shot 2021-11-05 at 7.28.13 PM.png

 

reelfishy
Excursionist
26 0 2

Anyone else out there that can help with my issue of changing from 4 products to 5 products per line?

@diego_ezfy 

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!

Screen Shot 2021-11-05 at 7.28.13 PM.png

Casperh
Excursionist
28 0 8

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

Smeelah
Navigator
333 1 91

@diego_ezfy  That worked perfectly. Thank you!

LaDolce
Tourist
5 0 2

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

reelfishy
Excursionist
26 0 2

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

LaDolce
Tourist
5 0 2

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

bikerboi
Excursionist
24 1 9

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

KetanKumar
Shopify Partner
36839 3635 11972

@bikerboi 

can you please share store url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
bikerboi
Excursionist
24 1 9

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

KetanKumar
Shopify Partner
36839 3635 11972

@bikerboi 

can you please share store preview url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
bikerboi
Excursionist
24 1 9
KetanKumar
Shopify Partner
36839 3635 11972

@bikerboi 

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

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
bikerboi
Excursionist
24 1 9

@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

ChoosiZon
Shopify Partner
416 66 111

@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.This is the Dawn Theme layoutThis is the Dawn Theme layoutThis is my current Supply theme layoutThis is my current Supply theme layout

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.

Donate
For faster response with a fee pls email to : choositech@outlook.com