Editing size of images in Collection List Page - Brooklyn Theme

[ElleOnline]

Hi, 

I am attempting to edit the size and padding of the images in my collection list. I am using the Brooklyn theme and only want to edit the collection list page if possible. 

Thanks in advance, 

[Zeel-prajapatii]

Hey @ElleOnline share your site url here and please share some details attached to it , it will really help me to solve your issue. 

Thanks.

[ElleOnline]

Hi, 

Thank you for your reply, my site url is https://elleonline.com.au/ and the page in particular is https://elleonline.com.au/pages/designers. 

I am looking to increase the image sizes and also increase the padding between the images on https://elleonline.com.au/pages/designers (without editing the images directly). I know I cant edit via the theme template as it is an old theme. 

Please let me know if you need any further details, 

Thanks in advance

[Zeel-prajapatii]

@ElleOnline are you considering below images?

[Thomas-Weston]

Hi there,

To edit the size and padding of the images in your collection list on the Brooklyn theme, you'll need to make some adjustments to the theme code. Here's a step-by-step guide:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the Brooklyn theme and click "Actions," then choose "Edit code."

Editing Collection List Images Size:

1. Locate the collection-grid-item.liquid file in the Sections or Snippets folder.

2. Look for the code that outputs the collection list images. It might look something like:

   liquiD

   <img src="{{ collection.featured_image | img_url: 'medium' }}" alt="{{ collection.title }}">

3. Adjust the img_url filter to the desired size. Options include 'small', 'medium', 'large', or you can use custom dimensions like '300x300':

   liquid

   <img src="{{ collection.featured_image | img_url: 'large' }}" alt="{{ collection.title }}">

Editing Padding:

1. To adjust padding, you may need to edit the CSS. Find the theme.scss.liquid or a similar file in the Assets folder.

2. Look for styles related to the collection list, often containing something like:

   css

   .collection-grid-item { padding: 10px; }

3. Adjust the padding value to your liking.

Remember to test your changes on different devices to ensure they look good on various screen sizes. Additionally, it's a good practice to make a backup of your theme before making any changes.

If you encounter any issues or have specific questions about the code, feel free to ask!

Best regards,

Thomas

[ElleOnline]

Thank you, this did help. I ended up locating the Collection List Image size @ page.collections-list.liquid and adjusting the size there.