Editing size of images in Collection List Page - Brooklyn Theme

Store Design
1

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,

1 Like
2

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.

3

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

4

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.

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

    liquiD
    {{ collection.title }}

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

    liquid
    {{ 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.

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

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

  2. 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

1 Like
5

@ElleOnline are you considering below images?

Zeelprajapatii_0-1707894710949.png
Zeelprajapatii_0-1707894710949.png1803×542 45.8 KB

1 Like
6

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