Shopify Dawn - Collection list image size and number of blocks on a row

Store Design
1

Hi Shopify people,

I am adding my collections list (I have four collections in total) on my front page and the new Dawn template wants to break them on two rows when using desktop.
It also makes the images too large and it looks plain ugly.

So I would want to have the collection list images and blocks with a fixed size (around 200px x 200 px) and keep then fixed on one row.

A) how to have 4 collection list images on one row ?

B) how to have the collection image size fixed?

Do I need .liquid or .css in order to do this? Both are very strange to me, so help is appreciated.
Thank you for your help!

P.S. When I reduce my browser size to around 900px wide, it collapses the 4 collection images as one neat row with small images. If I stretch the browser width any wider or narrower, the images grow stupidly big again.

2

@Epsm

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Great, if you can help on this matter!

The URL is https://retkiruoat.fi.

4

@Epsm

like this ?

KetanKumar_0-1631686277271.png
KetanKumar_0-1631686277271.png1920×1080 332 KB

5

Yes, exactly like that.
It would be optimal if all four collection images could stay on one row and their size would not change.

6

@Epsm

thanks for the update, yes please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/section-collection-list.css ->paste below code at the bottom of the file.
@media screen and (min-width: 750px) {
li.collection-list__item.grid__item.slider__slide {
    width: calc(25% - 1rem * 3 / 4);
}
}
7

It worked, it worked!

Thank you @KetanKumar !

8

@Epsm

its my pleasure to help us

if you need any customization and more help let me know

9

Can we also change the collection-list size in homepage?

Slide is not good from my point of view. I hope to display 4 collection labels in one line.

Is that possible?

10

@Wishpools

sorry for any issue can you please share issue images?

11

The Collection-list can only show one collection if I choose “enable swipe on mobile”. Otherwise, if I put four collections into Collection-list, it will show four rows on the homepage.
My question is: Can I limited each collection picture size so that four collections can stay on one row？

12

Hello,my name is Damimond,A Shopify partner.

Kindly share your Shopify store URL so as to provide a solution

Best regards.

13

@Wishpools

do you mean how many product show per row right?

14

Hi, I tried the same code for the same theme, and it didn’t work.

What can I do?

Thanks!

15

Hi there,

The main collection Image on my collection pages is way too big…I was hoping to shrink it down a little to banner size, similar to what is in Debut. Can you help me with that please?

16

Hello there @Fashionprincess

I read and understood your request that you need image to shrink as that of debut.

I need more information such as your Shopify store URL so as to share a solution.

17

How i can do this, if i have more than 4 collections?

18

@HeadBanger

can you please share more details and store url

19

Hi,

I have a similar issue with dawn theme.. I have a collection list on my home page (one collection per row) and I would like to have 2 columns with smaller image banners, how can I do that?

My store : diagico.com

pass: bearit

this is an image how I would like to have my list :

Screenshot 2021-11-09 at 22.02.48.png
Screenshot 2021-11-09 at 22.02.48.png588×1038 782 KB

Thank you for your time!

20

@Jovita1

thanks for your all details but doesn’t work password can you please check and let me know