---
description: >-
  In this section, you can configure the content that should be displayed on the
  collection page, manage the sidebar and decide what it should display: various
  filters, promo boxes, pages, subscription.
---

# Product grid

{% hint style="info" %}
**Collections -> Product grid**
{% endhint %}

{% hint style="warning" %}
**IMPORTANT!** This section required saving changes by pressing the “Save” button to view customizations on a collection page.
{% endhint %}

{% embed url="https://www.youtube.com/watch?index=15&list=PLj-506KaR_vcQjwcpC6yII-1JY0bSj7df&v=DAAqU5rHx1Q" %}

&#x20;The Sidebar positioning and the visibility settings can be viewed in the _Theme settings -> Collection and Search page._ How to configure these settings you can read [<mark style="color:blue;">**here**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/theme-settings/collection-page-1#sidebar-visibility)**.**&#x20;

&#x20;In this section, you can manage your content for the sidebar by adding the content blocks. There are 9 content blocks available for the sidebar. Three of them can be added only once:\
&#xNAN;**“Current filters”, “Parameters”**, and **“Filters”**. The other six can be added several times: **“Filter settings”, “Tag”, “Products”, “Custom HTML”, “Promo Box (Banner)”**, and **“Subscription”**.

## Product grid

&#x20;In this section, you can decide the **“Content width”** that should be used on collection pages and can be set as s “Boxed” or “Fullwidth”:

{% tabs %}
{% tab title="Boxed" %}
![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FLMe5qyOKavGcLZPV5tvY%2Fcollection_boxed.png?alt=media\&token=3b8c2f86-93d3-4a29-bd39-bd149c023fd1)
{% endtab %}

{% tab title="Fullwidth" %}
![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2Fudn1swxs28R57uym0Wlq%2Fcollection_full%20width.png?alt=media\&token=2a716e30-e214-40eb-9156-3975872c2236)
{% endtab %}
{% endtabs %}

&#x20;The **“Products per page”** scale from 4 to 24, enables one to set the number of products that will be displayed on a collection page:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FVNqQ3PuwrbOL2J9O5xgX%2Fcollection_products%20per%20page.png?alt=media\&token=54cd7568-81f3-4f7b-a347-fcaa20e74409)

## Filtering

&#x20;Here you can decide which filter option to use: **“Filters”** or **“Tags”**.  By default, the theme shows filters configured in _Shopify Admin -> Apps -> **Search & Discovery** app_. If you want to show filters by tags (**“Tags”** block) configured in the theme editor - untick the **“Enable default filtering”** option.

{% hint style="warning" %}
**Please note**, that only one option can be used in the Sidebar: **“Filters”** or **“Tags”,** the other method will be disabled.
{% endhint %}

&#x20;In this subsection, one can configure the general settings regarding the **“Filters”** block that will be applied for the filters. How to configure the **“Filters”** block, you can read [<mark style="color:blue;">**here**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/collections/content/filters).

&#x20;If you enable the option **“Show selected filters counter & button "Reset”**, the filter counter and the button “Reset” will be shown for each filter block:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FFHlOOPlsmxY3N5ZRLgMa%2Fcollections_counter%26reset.png?alt=media\&token=310c3237-f4e7-47a0-b5c5-d01adcff817a)

&#x20;In order to show the number of products available for each product variant in the Sidebar, enable the option **“Show the count of products on the filter”**:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FQaCIMawrNgSBNtEoxYkC%2Fcollections_product%20count.png?alt=media\&token=2c20a060-00c2-4f5a-aa30-f1f62cf63611)

&#x20;The option **“Hide disabled filters”**, enables one to hide out-of-stock product variants or to show them as unavailable:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2Fe3GP3FYd7ZdUBOFybU9e%2Fcollection_disabled%20filters.png?alt=media\&token=1e4c63df-38e9-4424-89e9-d13f19fb311f)

&#x20;Once you enable the option **“Make availability filter as rounded checkbox”,** the **“Availability”** filters design will be changed from the list to a rounded checkbox:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FrqcL0JYfzW9pYjnmfXal%2Fcollections_availability.png?alt=media\&token=95725c0a-4dc0-4742-8bde-130b8a0f4154)

&#x20;In the **“Price filter type”** dropdown, you can apply settings for the price filter visibility whether to show it as **“Slider & Inputs”**, **“Slider”**, or **“Inputs”**.

{% hint style="warning" %}
**Please note**, that if the option **“Enable legacy method of the currency conversion”** is enabled in _Theme settings -> Currency_, the only option **“Slider”** can be applied for the price filter.&#x20;
{% endhint %}

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2F5LKdw3SkjZ0hrx2JwVr7%2Fcollections_price%20filter.png?alt=media\&token=0c23328f-cea4-4258-a3ec-3ee7deb1bdba)

## Sort By

&#x20;This subsection enables you to show the **“Sort”** option “Only on desktop” or “Desktop and mobile”. Customers will be able to sort products in the collection by featured, best-selling, price ascending, price descending, etc. You may choose the “Hide” option if you do not want to show the “Sort” on your store.

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FCBFgHf2hs0IuoVGgafZP%2Fcollections_sort%20by.png?alt=media\&token=5c23fc5a-a12b-493e-b4f3-48f573b4cceb)

## Information

&#x20;Here you can decide if to display the number of the results “Only on desktop” or “Desktop and mobile”. Or set the option “Hide” to disable showing information on the collection page.

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FS3PwmCYu5AXDVJBiKuqi%2Fcollections_information.png?alt=media\&token=c0435071-435c-4231-a085-daa2fb9dd6b4)

## Grid

&#x20;In this subsection, you can decide on the visibility of the grid buttons on desktop and mobile by enabling or disabling the **“Show grid buttons”** option.

&#x20;The grid view button options will be shown on the collection page: 1 product per row, 2 products per row, 3 products per row, 4 products per row, 6 products per row, and a list. You can decide whether all of them, some, or one should be displayed, simply by enabling the “Show button 1-6 items per row” or “Show button “List”:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FYCvPTkbLU5a5uRSrm0xC%2Fcollections_grid.png?alt=media\&token=99e8ba01-1076-4198-9cc8-52cd132d3c42)

**Product 'List' design**

&#x20;The theme includes two list designs:

{% tabs %}
{% tab title="Design #1" %}
![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Meism_HdVzwzgKD1Nb_%2F-MeiubP-sC0dq6O8Dgvs%2F04-03-list-v1.jpg?alt=media\&token=a75306a8-9790-4a5c-91c9-b88a57eec488)
{% endtab %}

{% tab title="Design #2" %}
![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Meism_HdVzwzgKD1Nb_%2F-MeiueSaRtVZXDVaO0ag%2F04-03-list-v2.jpg?alt=media\&token=631d675c-9cb5-42fa-9ad4-4f991be4d961)
{% endtab %}
{% endtabs %}

{% hint style="success" %}
**VIEW DEMO**

[<mark style="color:blue;">**List products V1**</mark>](https://shella-demo10.myshopify.com/collections/womens)

[<mark style="color:blue;">**List products V2**</mark>](https://shella-demo11.myshopify.com/collections/womens)
{% endhint %}

#### Enable tooltip

&#x20;If you enable this option, the tooltips will be displayed for the grid buttons on the collection page.

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FgYgrOIL1HpARKkRzy150%2Fcollections_tultips.png?alt=media\&token=67715cfd-9580-425c-a3c6-4a6f33ab2876)

**Default products per row (Extra large)**

&#x20;Here you can choose how many products should be displayed on the extra large screen by choosing the proper option from the dropdown list.

**Default products per row (Large)**

&#x20;Here you can choose how many products should be displayed on the desktop by choosing the proper option from the dropdown list.

**Default products per row (Medium)**

&#x20;Here you can choose how many products should be displayed on the laptop by choosing the proper option from the dropdown list.

**Default products per row (Small)**

&#x20;Here you can choose how many products should be displayed on the tablet by choosing the proper option from the dropdown list.

**Default view grid (Extra small)**

&#x20;Here you can choose how many products should be displayed on the mobile by choosing the proper option from the dropdown list.

## Current filters over the products grid

&#x20;In case you need to show selected filters on desktop, mobile, or both, you may choose one of the options from the dropdown list: “Only mobile”, “Only desktop”, or “Desktop and mobile”. Or disable the option by choosing “Hide”.

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2F9FPpm5hVCE7E579VL2Ie%2Fcollections_current%20filters.png?alt=media\&token=03c4a0fc-9edd-472f-a3a4-aae2eb111152)

{% hint style="success" %}
[<mark style="color:blue;">**VIEW DEMO**</mark>](https://shella-demo12.myshopify.com/collections/womens)
{% endhint %}

## Filters section

&#x20;In this subsection, decide if to display the filter titles in uppercase by enabling the **“Uppercase filters section title”** option. In order to separate each filter block with the border, tick the **“Show filters section border”** option.

&#x20;This is how a collection page may look like when one enables both of these options:&#x20;

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FinnC84mVQiRJ0h7jDIVA%2Fcollections_filter%20set.png?alt=media\&token=08275ba7-f09a-43e5-8898-78951f99ee80)
