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

reelfishy
Tourist
12 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 12 (12)
KetanKumar
Shopify Partner
25040 2506 9064

@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
ChoosiZon
Navigator
386 64 100

@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
reelfishy
Tourist
12 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
2313 415 544

@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

 

◦ Slideshow images cutting off or looking bad? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets & save money. Examples here.
reelfishy
Tourist
12 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
2313 415 544

@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

◦ Slideshow images cutting off or looking bad? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets & save money. Examples here.
reelfishy
Tourist
12 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

 

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

reelfishy
Tourist
12 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