How do you set the collection image size in Dawn?

Store Design
1

Hello,

Where is the collection image size set in Dawn? I found height and width in collection-list.liquid but am not sure where those variables are pulling from.

loading="lazy"
width="{{ block.settings.image.width }}"
height="{{ block.settings.image.height }}"

Thanks,

1 Like
2

@greenflamingo

sorry for that issue can you please check your customization theme

3

Thanks! However I’m not quite sure where to find that.

4

Define collection image more specifically.

collection-list.liquid is for the collections page at /collections on your website

Which is different that the collection image show on a collections individual page or the product images on a collections page.

For the collection image , aka the featured image,

https://help.shopify.com/en/manual/products/collections/collection-layout#add-or-change-the-featured-image-for-a-collection

That image is in the collection banner section which is from the file sections/main-collection-banner.liquid around line 18 with the sizes part of a srcset attribute;

with styles in assets/base.css and assets/component-collection-hero.css

5

Hi @greenflamingo ,

It will take the default from the image size you upload in Customize.

For example you upload an image with a size of 1000x500px => width=“{{ block.settings.image.width }}” is 1000px, height=“{{ block.settings.image.height }}” is 500px.

Refer: https://shopify.dev/api/liquid/objects/image#image-width

So you can’t set it, it’s generated automatically, or you can change the number directly at img tag.

Hope it helps

If you find my answer helpful for you, please mark it as a solution. Thank you so much

6

Thanks for your answers. I’m pretty much trying to change the size of the images as shown here:

Capture.PNG
Capture.PNG1891Ă—832 277 KB

https://piggybankbargains.com/collections/fiction

Thanks!

7

I tried uploading a 150x150px image and it didn’t change the size.

8

Is the image size in the css?

Thanks!

9

see my previous response

10

Hi @greenflamingo ,

The image size changes but because it shows 3 items per row => the image is still showing the full size. So you don’t have to resize the image, you need to change the width of the item, how many items do you want to display per row.

You want to reduce the width of the item? Please check at: https://i.imgur.com/eyMeyri.png

Thank you and good luck.

1 Like
11

That looks far better! Where is the width found?

12

Hi @greenflamingo ,

Please follow the steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code.
  • Step 2: Go to Assets > section-collection-list.css and paste this at the bottom of the file:
@media screen and (min-width: 750px){
	.collection-list-section .collection-list-wrapper slider-component{
		max-width: 80%;
		margin-left: auto;
		margin-right: auto;
	}
}

Hope it helps!

4 Likes
13

Hi @greenflamingo ,

I saw you liked my answer. If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

1 Like
14

Just did! What about the home page collection width? https://piggybankbargains.com/

15

Hi @greenflamingo ,

Do you want to increase the width of the homepage? https://i.imgur.com/G0FyNfx.png

Please change the code:

@media screen and (min-width: 750px){
	#shopify-section-template--14154022781005__1630691821ab253703 .collection-list-wrapper slider-component{
		max-width: 80%;
		margin-left: auto;
		margin-right: auto;
	}
}
1 Like
16

I actually just want to decrease the collection list image size.

17

Hi @greenflamingo ,

Would you like to display something like this? https://i.imgur.com/zln2D7M.png

1 Like
18

Yes!

19

Hi @greenflamingo ,

Please add code:

@media screen and (min-width: 750px){
  #shopify-section-template--14154005282893__1630691481a5f52dd1 .collection-list__item.grid__item{
        width: calc(25% - 1rem * 3 / 4) !important;
  }
}

Hope it helps!

1 Like
20

Yes!

1 Like