Brooklyn theme product/inventory grid problem

James_Wilson
New Member
8 0 0

Hi guys,

I need help!

I'm having a hard time modifying the Brooklyn theme to display my products in a 3-to-a-row grid format. I am code literate so I have been playing with the product-grid-collage.liquid to achive this look but can't seem to get it to work.

You can see demo page here: https://d83kd89dc.myshopify.com/collections/products

Here is the contents of my product-grid-collage.liquid:

{% comment %}
  This snippet controls the collage product grid.  Depending on the number of products in
  a collection we want to display them in rows of 1, 2, 3, or a reversed row of 3.

  A '3 row' has the large product left align with two smaller product on the right.

  The 'reversed 3 row' has the large product right aligned with two smaller products on
  the left.

  If we're near the end of the loop and there are not enough products to make
  complete rows of 3, we switch to a 2 item row.

  Depending on where we are in the group of three products and if it's reversed,
  we want to set the grid_item_width for each item in the collection.

  The collage grid is only used for the desktop breakpoint.

  For example:
  1  = 1
  2  = 2
  3  = 3
  4  = 2 + 2
  5  = 3 + 2
  6  = 3 + reverse 3
  7  = 3 + 2 + 2
  8  = 3 + reverse 3 + 2
  9  = 3 + reverse 3 + 3
  10 = 3 + reverse 3 + 2 + 2
  11 = 3 + reverse 3 + 3 + 2
  etc.

  Change the grid item width by using classes from the grid in
  the grid_item_width variable.

  Example:
    - {% assign grid_item_width = 'large--one-third medium--one-half' %}
{% endcomment %}

{% assign collection_index__product = forloop.index %}
{% assign remaining_length__product = collection_product_count__product | minus: collection_index__product %}

{% comment %}
  If there are more than three items left we want to put them in a 3
  or reverse 3 row

  3 row = 1 large product on the left, 2 small on the right
  reverse 3 row = 2 small products on the left, 1 large on the right
{% endcomment %}
{% if remaining_length__product > 3 %}
  {% assign is_three_row__product = true %}
{% endif %}

{% comment %}
  Put remaining items in a 2 row if necessary.
{% endcomment %}
{% if remaining_length__product < 4 and three_row_index__product > 2 %}
  {% assign is_three_row__product = false %}
{% endif %}

{% comment %}
  If the total number of products is divisible by 3, we will just use
  3 and reversed 3 item rows
{% endcomment %}
{% if divisible_by_three__product == 0 %}
  {% assign is_three_row__product = true %}
{% endif %}

{% comment %}
  If we set is_three_row__product to true based on the conditionals above.
{% endcomment %}
{% if is_three_row__product == true %}

  {% if three_row_index__product > 2 %}
    {% if is_reverse_row__product %}
      {% assign is_reverse_row__product = false %}
    {% else %}
      {% assign is_reverse_row__product = true %}
    {% endif %}
    {% assign three_row_index__product = 0 %}
  {% endif %}

  {% comment %}
    Assign grid classes for 3 rows and reverse 3 rows
  {% endcomment %}
  {% case three_row_index__product %}
    {% when 0 %}
      {% if is_reverse_row__product %}
        {% assign grid_item_width = 'grid__item--small one-whole reverse' %}
      {% else %}
        {% assign grid_item_width = 'grid__item--large one-whole medium--two-thirds large--two-thirds' %}
      {% endif %}
    {% when 1 %}
      {% if is_reverse_row__product %}
        {% assign grid_item_width = 'grid__item--small one-whole reverse' %}
      {% else %}
        {% assign grid_item_width = 'grid__item--small one-whole medium--one-third large--one-third' %}
      {% endif %}
    {% when 2 %}
      {% if is_reverse_row__product %}
        {% assign grid_item_width = 'grid__item--large one-whole medium--two-thirds large--two-thirds reverse clearfix' %}
      {% else %}
        {% assign grid_item_width = 'grid__item--small one-whole medium--one-third large--one-third clearfix' %}
      {% endif %}
  {% endcase %}

  {% if three_row_index__product == 0 %}
    <div class="grid__item collage-grid__row">
      <div class="grid">
  {% endif %}

  {% comment %}
    Wrap one-third items in reversed groups, so they can be floated properly without changing the order of products in the grid.
  {% endcomment %}
  {% if is_reverse_row__product and three_row_index__product == 0 %}
    <div class="grid__item collage-grid__reverse--wrapper one-whole medium--one-third large--one-third">
      <div class="grid">
  {% endif %}

  {% comment %}Product Grid Item{% endcomment %}
  {% include 'product-grid-item' %}

  {% comment %}
    Close out wrapper div for one-third reverse items
  {% endcomment %}
  {% if is_reverse_row__product and three_row_index__product == 1 %}
      </div>
    </div>
  {% endif %}

  {% if three_row_index__product == 2 %}
        </div>
      </div>
    <div class="grid__row-separator"></div>
  {% endif %}

  {% comment %}
    Increment the group of three counter
  {% endcomment %}
  {% if three_row_index__product <= 2 %}
    {% assign three_row_index__product = three_row_index__product | plus: 1 %}
  {% endif %}

  {% continue %}
{% endif %}

{% if collection_product_count__product == 1 %}
  {% comment %} Set full width when there is 1 product in a collection by making
  `grid_item_width` an empty string {% endcomment %}
  {% assign grid_item_width = '' %}
  {% include 'product-grid-item' %}
  {% break %}
{% else %}
  {% comment %} Set item with to half if it isn't in a 3 row. {% endcomment %}
  {% assign grid_item_width = 'one-whole medium--one-half large--one-half' %}
  {% include 'product-grid-item' %}

  {% comment %}add grid row separator between the last two rows{% endcomment %}
  {% if remaining_length__product == 2 %}
    <div class="grid__row-separator"></div>
  {% endif %}

  {% comment %} We still need to increment the three_row_index_product {% endcomment %}
  {% if three_row_index__product <= 2 %}
    {% assign three_row_index__product = three_row_index__product | plus: 1 %}
  {% endif %}
{% endif %}

 

0 Likes
tim
Shopify Expert
2926 143 1021

Hi James, 

do you want to modify an uniform grid (in this case you should look at the product-grid-item.liquid  Snippet) or a collage (which you are modifying by changing the product-grid-collage.liquid Snippet)?

You can switch between the two representations in Theme Editor (Customize Theme) -- navigate to any collection in the right pane and click Collection Pages in the left pane.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
James_Wilson
New Member
8 0 0

Hi Tim,

Here's my collection >> https://prencify.com/collections/limited-edition-t-shirts (two photos line up in a row and then there's a big third photo in a row by itself)

And I want to look like these >> https://sugarandcotton.com/collections/the-unicorn-collection (3 photos per row)

Can you help me?

Thank you very much!

0 Likes
tim
Shopify Expert
2926 143 1021

Then you have to switch from collage to grid layout as I wrote in the last paragraph above!

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
James_Wilson
New Member
8 0 0

Yayyy... Thank you very much, Tim :D
All done.

0 Likes
InfinityK
New Member
2 0 1

I'm not super familiar with code, but my product collection pages are currently in collage format and I would like them to be in the grid format. What exactly do I need to change in the code? I found where you were saying, but I'm not sure what to change. Thanks!

0 Likes