Solved

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

Epsm
Tourist
4 0 4

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.

Accepted Solution (1)
KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@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);
}
}

 

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

View solution in original post

Replies 50 (50)

KetanKumar
Shopify Partner
36839 3635 11972

@Epsm 

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
Epsm
Tourist
4 0 4

Great, if you can help on this matter!

The URL is https://retkiruoat.fi.

 

 

KetanKumar
Shopify Partner
36839 3635 11972

@Epsm 

like this ?

KetanKumar_0-1631686277271.png

 

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
Epsm
Tourist
4 0 4

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

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@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);
}
}

 

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
Epsm
Tourist
4 0 4

It worked, it worked!

Thank you @KetanKumar !

KetanKumar
Shopify Partner
36839 3635 11972

@Epsm 

its my pleasure to help us 

if you need any customization and more help let me know 

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
Wishpools
Excursionist
20 0 4

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?

KetanKumar
Shopify Partner
36839 3635 11972

@Wishpools 

sorry for any issue can you please share issue images?

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
Wishpools
Excursionist
20 0 4

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?

Dami_mond
Shopify Partner
83 0 9

Hello,my name is Damimond,A Shopify partner.

 

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

 

Best regards.

 

 

 

 

banned
KetanKumar
Shopify Partner
36839 3635 11972

@Wishpools 

do you mean how many product show per row right?

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
lvecum
Visitor
1 0 0

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

What can I do?

Thanks!

Fashionprincess
Tourist
16 0 1

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?

Dami_mond
Shopify Partner
83 0 9

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.

banned
HeadBanger
Tourist
6 0 2

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

KetanKumar
Shopify Partner
36839 3635 11972

@HeadBanger 

can you please share more details and 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
Jovita1
Tourist
4 0 4

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

 Thank you for your time!

KetanKumar
Shopify Partner
36839 3635 11972

@Jovita1 

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

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
Jovita1
Tourist
4 0 4

oh, yes.. sorry.

Pass: bearti

KetanKumar
Shopify Partner
36839 3635 11972

@Jovita1 

thanks for ulr 

can you 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 (max-width: 749px) {
.collection-list .collection-list__item {
    width: calc(50% - 3rem) !important;}
.card--media .card__text-spacing { padding: 1rem  !important; }
.card--media .card__text-spacing h3 { font-size: 12px; height: 30px  !important; }
}

 

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
Jovita1
Tourist
4 0 4

Works great!

THANK YOU !!

KetanKumar
Shopify Partner
36839 3635 11972

@Jovita1 

its my pleasure to help us 

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
Snucotine
Visitor
1 0 0

Thank You Ketan Kumar This also worked for my Dawn theme. I now can see two collections on every row on mobile. Is it also possible to make four collection rows instead of three for the desktop version. If you could send the code for this I would really appreciate it. Thanks

 

I use the same Dawn Theme as the other individual.

BumbleBabies
Excursionist
13 0 5

Hi @KetanKumar,

 

For me that code has done well on mobile but on desktop I still have rows of 2 and the pictures are just too big, is there a way to make sure it does 4 collections per row on desktop?

 

Also on Mobile the writing of a collection is cut off underneath, is there a way to stop this?

 

Many thanks in advance,

Callum
screenshot-bumble-babies.myshopify.com-2022.01.25-20_25_10.png

bittybee
New Member
15 0 0

@KetanKumar Hello, I have a similar issue where Collection List images are too big on my page, can you please let me know what I can do? I am using Symmetry theme.

Charline1
Excursionist
14 0 5

Hi @KetanKumar 

 

Kindly need your helps here.

 

Your codes to make collection list 4 collections in a row works. However, I have 8 collections so that code kind of just doing half way in my case. So I wonder how can I make it 4 collections in the 2nd row as well?

 

If you see the screenshot below, you can see the 1st row is perfectly with 4 collections when using your code, but the 2nd row is still the old 3 collection in a row...

2nd row  still only 3 collections in a row2nd row still only 3 collections in a row

 

Many thanks in advance for your kindly help!

 

Charline

TimothyD
Tourist
3 0 4

I am dealing with the exact same issue. I am able to get 4 columns on my first row, but all subsequent rows have giant images. Did you find a solution? 

Charline1
Excursionist
14 0 5

@TimothyD 

 

I think I did! But it's long time ago! I can only vaguely remember none of the solutions suggested in the community actually worked at the time. So I end up edited the code in section-collection-list.css myself with a little bit lucky guess. 

 

BUT, just mind you, I don't come from tech or coding background and it's long time ago, I don't actually remember what exactly I did. So I went back checked the code, it seemed I edited the code in section-collection-list.css as shown in the screenshot, width=>25%. So now that when use the section-collection-list, I can get 4 blocks in every row, and even only have 1,2,3 blocks in one row they are all 25% width. I would suggest you backup the code first before making any change and Good luck 🙂 Charline

Screenshot 2022-02-17 at 19.00.06.png

 

TimothyD
Tourist
3 0 4

@Charline1 you are a life saver. As far as I can tell, this did exactly what I needed it to. Thank you so much!

highdesertsci
Excursionist
15 1 6

I dont have this code in my collection-list file, I am using the dawn theme. I adjusted some code based on guessing, which made it 4 items per row, but my last row with one item is still huge. any advice?

 

this is what i edited to get 4 on a row

<slider-component class="slider-mobile-gutter">
      <ul class="collection-list grid grid--4-col{% if section.blocks.size < 5 %} grid--{{ section.blocks.size }}-col-tablet{% else %} grid--4-col-tablet{% endif %}{% if section.settings.swipe_on_mobile %} slider slider--tablet grid--peek{% endif %} collection-list--{{ section.blocks.size }}-items"
        id="Slider-{{ section.id }}"
        role="list"
      >

  

KetanKumar
Shopify Partner
36839 3635 11972

@highdesertsci 

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
highdesertsci
Excursionist
15 1 6

Highdesertsci.com

KetanKumar
Shopify Partner
36839 3635 11972

@highdesertsci 

thanks for url bt i can't see any collection list section on home page

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
highdesertsci
Excursionist
15 1 6
highdesertsci
Excursionist
15 1 6

I found the solution through inspecting the page

KetanKumar
Shopify Partner
36839 3635 11972

@TimothyD 

can you pleases share store url so i will check and guide 

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
Faiz1
Tourist
7 0 3

Hi

I need Help , I wanted To show 8 Rows In Collection page in oasis theme can you help how i can do it at the moment its only allowing me to show 3 collection on main page in a row by default 

thank you

KetanKumar
Shopify Partner
36839 3635 11972

@Faiz1 

oh sorry,

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
Faiz1
Tourist
7 0 3

https://www.mamasbedding.co.uk/

Thank you for the reply

KetanKumar
Shopify Partner
36839 3635 11972

@Faiz1 

thanks please confirm page and look

KetanKumar_0-1665082993888.png

 

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
Faiz1
Tourist
7 0 3

Hi

Thank you for the reply but i would like to Show 12 categories on main page , shop by category on the main page 

thank you

Faiz1
Tourist
7 0 3

 

 

Hi

I would like to show something like this and mine is too big at the moment 

thank you

 

sample.PNG

KetanKumar
Shopify Partner
36839 3635 11972

@Faiz1 

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) {
.collection-list.grid--3-col-tablet .grid__item {
    max-width: 16.1%;
    width: 16.1%;
}
}

 

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
Faiz1
Tourist
7 0 3

Hi

Thank you For the help it worked great on desktop but on phone its again showing too big , can you please tell me how to optimize it on phone As shown in below image 

WhatsApp Image 2022-10-07 at 12.49.01 AM.jpeg

 

Thank you

KetanKumar
Shopify Partner
36839 3635 11972

@Faiz1 

yes, please try this code

@media screen and (max-width: 749px) {
.collection-list .collection-list__item {
    width: calc(43% - 3rem);
}
}
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
Faiz1
Tourist
7 0 3

Hi

Thank you for the reply but its showing only 2 each in a row in mobile and last one is too big 

thank you

KetanKumar
Shopify Partner
36839 3635 11972

@Charline1 

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
zollo
Tourist
7 0 2

How do create what you said above, but I want the carousel to rotate. So lets say I have 8 categories, but I want them to rotate or scroll.