Change collections thumbnail size on collection list page - Brooklyn

Solved
adamhartnell1
Excursionist
13 0 6

Hi guys,

 

Can anyone help, i'm looking to change the size of my collection thumbnails on the collection list. As you can see below the thumbnails arent a uniform size when im looking to get 4 square thumbnails per row for desktop (8 collections on the screen at once) and 2 square thumbnails per row on mobile (4 collections on a screen at once). Can anyone help?

 

adamhartnell1_0-1637839692728.png

 

Accepted Solutions (2)

Accepted Solutions
timkuts
Shopify Partner
28 6 13

This is an accepted solution.

Hello!

 

You can easily make both rows 3 in a row, so that the goods will be 6 total. But 4 in a row would be a little more difficult because the template does not provide markup for 4 products in a row and will need to add styles. So here's how to make for both rows 3 product in a row. Go to Online Store -> Themes -> Actions: Edit code. Then open snippets/onboarding-featured-collections.liquid and replace the code of this file to:

 

<!-- snippets/onboarding-featured-collections.liquid -->
{% for i in (1..6) %}
  {% capture width %}
    {% cycle 'one-half medium--one-third large--one-third', 'one-half medium--one-third large--one-third', 'one-half medium--one-third large--one-third', 'one-half medium--one-third large--one-third', 'one-half medium--one-third large--one-third', 'one-half medium--one-third large--one-third' %}
  {% endcapture %}
  <div class="grid__item {{ width }} collection-collage__item text-center">
    <a href="/admin/collections" class="collection-grid__item-link collection-collage__item-wrapper">
      <div class="collection-grid__item-overlay grid__image">
        {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
        {{ 'collection-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
      </div>
      <div class="collection-grid__item-title--wrapper">
        <span class="collection-grid__item-title">
          {{ 'home_page.onboarding.collection_title' | t }}
        </span>
      </div>
    </a>
  </div>
{% endfor %}

 

 

 

timkuts_0-1637842143087.png

 

KAD::Systems - Developing apps and customizing stores 
https://apps.shopify.com/partners/kadsystem
  support@kad.systems

View solution in original post

timkuts
Shopify Partner
28 6 13

This is an accepted solution.

 

Try replacing in snippets/collection-grid-collage.liquid all the words "half" with "third". This is a bad solution, but it's easy to implement and it works.

 

timkuts_0-1637847198437.png

 

KAD::Systems - Developing apps and customizing stores 
https://apps.shopify.com/partners/kadsystem
  support@kad.systems

View solution in original post

Replies 6 (6)
Sanjay-HA
New Member
1 0 0

@adamhartnell1 You will need to update the grid classes in the collections section. For editing the size of the thumbnail, you will need to add custom CSS.

timkuts
Shopify Partner
28 6 13

This is an accepted solution.

Hello!

 

You can easily make both rows 3 in a row, so that the goods will be 6 total. But 4 in a row would be a little more difficult because the template does not provide markup for 4 products in a row and will need to add styles. So here's how to make for both rows 3 product in a row. Go to Online Store -> Themes -> Actions: Edit code. Then open snippets/onboarding-featured-collections.liquid and replace the code of this file to:

 

<!-- snippets/onboarding-featured-collections.liquid -->
{% for i in (1..6) %}
  {% capture width %}
    {% cycle 'one-half medium--one-third large--one-third', 'one-half medium--one-third large--one-third', 'one-half medium--one-third large--one-third', 'one-half medium--one-third large--one-third', 'one-half medium--one-third large--one-third', 'one-half medium--one-third large--one-third' %}
  {% endcapture %}
  <div class="grid__item {{ width }} collection-collage__item text-center">
    <a href="/admin/collections" class="collection-grid__item-link collection-collage__item-wrapper">
      <div class="collection-grid__item-overlay grid__image">
        {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
        {{ 'collection-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
      </div>
      <div class="collection-grid__item-title--wrapper">
        <span class="collection-grid__item-title">
          {{ 'home_page.onboarding.collection_title' | t }}
        </span>
      </div>
    </a>
  </div>
{% endfor %}

 

 

 

timkuts_0-1637842143087.png

 

KAD::Systems - Developing apps and customizing stores 
https://apps.shopify.com/partners/kadsystem
  support@kad.systems

View solution in original post

adamhartnell1
Excursionist
13 0 6

Hi, it still appears like this: two massive thumbnails followed by rows of 3 underneath:

 

adamhartnell1_0-1637843516988.png

 

timkuts
Shopify Partner
28 6 13

You probably edited the wrong file. Here's what I got: 

timkuts_0-1637843772097.png

 

timkuts_1-1637843811642.png

 

Also, you may already have a modified list-collections-template.liquid section that use a non-standard snippet. I can finalize it all on your site, I wrote you in a personal message. 

 

 

 
KAD::Systems - Developing apps and customizing stores 
https://apps.shopify.com/partners/kadsystem
  support@kad.systems
adamhartnell1
Excursionist
13 0 6

Hi, does it still keep the collections 3 in a row when there are an odd number of total collections? I think the issue for me is that when there are an odd number of total collections (e.g. 3 in the image below), shopify automatically blows one (or two on desktop) of the thumbnails up to fit the whole width of the page. Do you know how i can stop this? I'd like them all to be the same size

 

adamhartnell1_0-1637845227284.png

 

 

timkuts
Shopify Partner
28 6 13

This is an accepted solution.

 

Try replacing in snippets/collection-grid-collage.liquid all the words "half" with "third". This is a bad solution, but it's easy to implement and it works.

 

timkuts_0-1637847198437.png

 

KAD::Systems - Developing apps and customizing stores 
https://apps.shopify.com/partners/kadsystem
  support@kad.systems

View solution in original post