Editing size of images in Collection List Page - Brooklyn Theme

ElleOnline
Tourist
3 0 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, 

Replies 5 (5)

Zeel-prajapatii
Shopify Partner
138 32 27

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.

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
ElleOnline
Tourist
3 0 1

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
Shopify Partner
138 32 27

@ElleOnline are you considering below images?

Zeelprajapatii_0-1707894710949.png

 

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me

Thomas-Weston
Tourist
5 0 1

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

banned
ElleOnline
Tourist
3 0 1

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