Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
This is an accepted solution.
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);
}
}
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.
like this ?
Yes, exactly like that.
It would be optimal if all four collection images could stay on one row and their size would not change.
This is an accepted solution.
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);
}
}
its my pleasure to help us
if you need any customization and more help let me know
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?
sorry for any issue can you please share issue images?
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?
Hello,my name is Damimond,A Shopify partner.
Kindly share your Shopify store URL so as to provide a solution
Best regards.
do you mean how many product show per row right?
Hi, I tried the same code for the same theme, and it didn't work.
What can I do?
Thanks!
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?
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.
How i can do this, if i have more than 4 collections?
can you please share more details and store url
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 :
Thank you for your time!
thanks for your all details but doesn't work password can you please check and let me know
oh, yes.. sorry.
Pass: bearti
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; }
}
Works great!
THANK YOU !!
its my pleasure to help us
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.
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
@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.
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...
Many thanks in advance for your kindly help!
Charline
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?
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
@Charline1 you are a life saver. As far as I can tell, this did exactly what I needed it to. Thank you so much!
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"
>
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.
Highdesertsci.com
thanks for url bt i can't see any collection list section on home page
I found the solution through inspecting the page
can you pleases share store url so i will check and guide
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
oh sorry,
can you please share store url
thanks please confirm page and look
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
Hi
I would like to show something like this and mine is too big at the moment
thank you
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%;
}
}
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
Thank you
yes, please try this code
@media screen and (max-width: 749px) {
.collection-list .collection-list__item {
width: calc(43% - 3rem);
}
}
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
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.
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.
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