Grid Control

Grid control is a powerful feature that enables merchants to customize the layout of product grids in their Shopify store, enhancing the presentation of products to customers.

Configuring One Big Product in Grid

Step 1: Add CSS Styles:

Open the findify-grid.css file in your Shopify theme editor. Copy and paste the provided CSS styles to define the grid layout.

.findify-product-list{
  display: grid !important;
  padding-left: 0 !important;
}

.big-grid .findify-components--cards--product__content {
  flex: 0;
}

.big-grid .findify-components--cards--product__image {
  flex: 1;
}

.big-grid .image-container {
  height: 100%;
}

.big-grid .image-container img {
  height: 100%;
  object-fit: cover;
}

.big_list{
  padding-left: 3px;
}

.findify-product-list[findify-data-grid="2"] { grid-template-columns: 20% 20% 20% 20% 20%; }
.findify-product-list[findify-data-grid="3"] { grid-template-columns: 25% 25% 25% 25%; }
.findify-product-list[findify-data-grid="4"] { grid-template-columns: 33.333% 33.333% 33.333%; }
.findify-product-list[findify-data-grid="6"] { grid-template-columns: 50% 50%; }
.findify-product-list[findify-data-grid="12"] { grid-template-columns: 100%; }

Step 2: Add Grid Attribute

Locate the <div id="findify-product-grid" class="findify-product-list"> element in the findify-grid-search.liquid file. Add the attribute findify-data-grid="number of products in row" and specify the number of products to display in each row.

Step3: Add Product Card Code

Add the below code to findify-product-card-connector.liquid file (on line 56).

 if id == "INSERT_PRODUCT_ID" 
   assign big_list = 'big_list' 
else 
   assign big_list = '' 
endif

Optional: To display a specific product, replace product_id with the specific product id of the desired item.

Step 4: Add Class

Add big_list class to findify-product-card div in findify-product-card.liquid

<div id={{ id }} class="findify-product-card {{ additional_class }} {{ big_list }}">

Step 5: Styling

In findify-grid.css file add this style to .big_list class.

    padding-left: 3px;
    -webkit-box-ordinal-group: 2;
    order: number, position where you want to display your product; 
    1 - will show on first place, 5- on fifth.
    grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end
/* *for exmaple    grid-area: 1 / 1 / 3 / 3; */*

Note: Read more about grid-area here: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area

Step 6: Update CSS for Mobile

Implement media queries in the CSS to adjust the number of columns displayed on mobile devices.

For example:

@media (min-width: 749px){
	.findify-product-list[findify-data-grid="2"] { grid-template-columns: 50% 50%; }
	.findify-product-list[findify-data-grid="3"] { grid-template-columns: 50% 50%; }
	.findify-product-list[findify-data-grid="4"] { grid-template-columns: 50% 50%; }
	.findify-product-list[findify-data-grid="6"] { grid-template-columns: 50% 50%; }
}

Implementing Dynamic Grid

Step 1: Update `findify-product-card-connector.liquid`:

Add the provided Liquid code to dynamically configure multiple big products within the grid layout.

assign col = 12 | divided_by: 3 // here you should set nuber froom step #2
assign isBigProduct = position | modulo: col
assign currentRow = position | divided_by: 4 // this is default number of products in row
assign rowPlus = currentRow | minus: 1
assign rowStart = currentRow | plus: rowPlus

assign rowEnd = rowStart | plus: 2
assign isRight = position |divided_by: col | modulo: 2 
 
if isRight == 0 // do this step if you want to have big product on left and right side of grid
  assign columnStart = 3
else
  assign columnStart = 1
endif

assign columnEnd = columnStart | plus: 2

 if isBigProduct == 0
  assign big_list = 'big_list'
else
  assign big_list = '' 
  endif

Step 2: Update `findify-product-card.liquid`:

Modify line 3 of the findify-product-card.liquid file to include dynamic grid area and ordering based on the provided Liquid code.

<div 
  id="{{ id }}" 
  class="findify-product-card {{ class }} {{ big_list }}" 
  style="{% if big_list == 'big_list' %}
    grid-area: {{ rowStart }}/{{ columnStart }}/{{ rowEnd }}/{{ columnEnd }};
    order: {{ position }}
  {% endif %}"
>

Step 3: Add CSS Styles:

Open the findify-grid.css file in your Shopify theme editor. Copy and paste the provided CSS styles to define the grid layout.

.findify-product-list{
  display: grid !important;
  padding-left: 0 !important;
}

.big-grid .findify-components--cards--product__content {
  flex: 0;
}

.big-grid .findify-components--cards--product__image {
  flex: 1;
}

.big-grid .image-container {
  height: 100%;
}

.big-grid .image-container img {
  height: 100%;
  object-fit: cover;
}

.big_list{
  padding-left: 3px;
}

.findify-product-list[findify-data-grid="2"] { grid-template-columns: 20% 20% 20% 20% 20%; }
.findify-product-list[findify-data-grid="3"] { grid-template-columns: 25% 25% 25% 25%; }
.findify-product-list[findify-data-grid="4"] { grid-template-columns: 33.333% 33.333% 33.333%; }
.findify-product-list[findify-data-grid="6"] { grid-template-columns: 50% 50%; }
.findify-product-list[findify-data-grid="12"] { grid-template-columns: 100%; }

Step 4: Update CSS for Mobile: