# Product grid

<figure><img src="https://content.gitbook.com/content/bMGVnCsdnFPDX2dCTNWk/blobs/sZ4OruIt57HB0sNqyohb/product_grid.png" alt=""><figcaption></figcaption></figure>

## Section settings

| Settings                         | Description                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Page width**                   | <ul><li><strong>Boxed</strong>: With boxed width, page content can be displayed within the maximum width. <strong>The page width can be changed in Theme Settings > Layout.</strong></li></ul><ul><li><strong>Full width:</strong> With the "Full width" option, page content can be displayed in its entirety full-width. <strong>When you show content at full width, you can add padding to the left and right sides.</strong></li></ul> |
| **Products per page**            | You can change the "**Products per page**" limit from 8 to 100 maximum on the collection page                                                                                                                                                                                                                                                                                                                                               |
| **Number of columns on desktop** | You can change the number of columns on desktop                                                                                                                                                                                                                                                                                                                                                                                             |
| **Display one column on mobile** | You can display one column on mobile. By default, 2 columns will be displayed                                                                                                                                                                                                                                                                                                                                                               |
| **Enable layout switcher**       | <p>You can enable/disable the product column switcher -</p><p><img src="https://content.gitbook.com/content/bMGVnCsdnFPDX2dCTNWk/blobs/kM2xEDQpEzlDGGVOyfH2/switcher.png" alt="" data-size="original"></p>                                                                                                                                                                                                                                  |

## Filtering & sorting

* Enable filtering

<figure><img src="https://content.gitbook.com/content/bMGVnCsdnFPDX2dCTNWk/blobs/I40hcImYb3y6Z5uv4b1M/filtering.png" alt=""><figcaption></figcaption></figure>

### How to customize the filtering

* Go to this page and follow the instructions -

{% content-ref url="../../../general-topics-faq/add-shopify-2.0-storefront-product-filtering" %}
[add-shopify-2.0-storefront-product-filtering](https://themihub.gitbook.io/vector-test-theme/general-topics-faq/add-shopify-2.0-storefront-product-filtering)
{% endcontent-ref %}

### Desktop filter layout

{% tabs %}
{% tab title="Vertical" %}

<figure><img src="https://content.gitbook.com/content/bMGVnCsdnFPDX2dCTNWk/blobs/U1z9qgkjGJqUM9a27zVJ/vertical_filter.png" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Horizontal" %}

<figure><img src="https://content.gitbook.com/content/bMGVnCsdnFPDX2dCTNWk/blobs/1AsaJiu5tp39HiwlUgYV/horizontal_filter.png" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Drawer" %}

<figure><img src="https://content.gitbook.com/content/bMGVnCsdnFPDX2dCTNWk/blobs/c1BIi7YpIKVqTub6cpCA/drawer_filtrer.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/bMGVnCsdnFPDX2dCTNWk/blobs/TGczGQwX15d9GZLUE82j/drawer_filter_2.png" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Enable sorting

<figure><img src="https://content.gitbook.com/content/bMGVnCsdnFPDX2dCTNWk/blobs/dDzWExhmYxhXPjLLZGQE/sorting.png" alt=""><figcaption></figcaption></figure>

### Price filter layout

{% tabs %}
{% tab title="Range slider" %}

<figure><img src="https://content.gitbook.com/content/bMGVnCsdnFPDX2dCTNWk/blobs/ygX4U7IOHTUErWAEePw5/range_slider.png" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Input field" %}

<figure><img src="https://content.gitbook.com/content/bMGVnCsdnFPDX2dCTNWk/blobs/EMKXYUM7faNo377wobwV/input_field.png" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Product card

<figure><img src="https://content.gitbook.com/content/bMGVnCsdnFPDX2dCTNWk/blobs/yUDNLeGPnC2e3Nnw75xO/product_card.png" alt=""><figcaption></figcaption></figure>

### Product card settings <a href="#product-card-settings" id="product-card-settings"></a>

| Settings                                       | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| ---------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Image ratio**                                | <ul><li><strong>Adapt to image:</strong> Uses the aspect ratio of the collection images is cropped.</li><li><strong>Portrait</strong>: uses a 2:3 cropping ratio to the images.</li><li><strong>Square:</strong> uses a 1:1 cropping ratio to the images.</li><li><strong>Landscape:</strong> uses a 3:2 cropping ratio to the images.</li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| **Show second image on hover**                 | Shows the second product image when a customer moves their mouse over the first image.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| **Show badges**                                | For particular sections, you can show or hide product badges.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| **Show title**                                 | For particular sections, you can show or hide the **title.**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| **Show price**                                 | For particular sections, you can show or hide the **wishlist price.**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| **Show vendor**                                | For particular sections, you can show or hide the **wishlist vendor.**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| **Show product rating**                        | You can display show/hide product ratings for specific sections.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| **Enable quick add button**                    | For particular sections, you can show or hide the **cart button**.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| **Quick add button display**                   | <ul><li>Static</li><li>Hover</li></ul><p><em><strong>Always static on mobile</strong></em></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| **Quick add button style**                     | <ul><li>Icon button</li><li>Text button</li><li>Text with icon button</li></ul><p><em><strong>Except for the "Icon button", all buttons are always displayed below the product card on mobile</strong></em> <a href="https://themihub.gitbook.io/vector-shopify-theme/header-group/menu/how-to-add-a-mega-menu-products#quick-add-button-style-on-the-product-card"><strong>See more of the display</strong></a></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| **Make button full width**                     | <p><strong>You can display the "Cart button" in full width.</strong></p><p><img src="https://themihub.gitbook.io/~gitbook/image?url=https%3A%2F%2F3066755919-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FbMGVnCsdnFPDX2dCTNWk%252Fuploads%252F8MArVZtYYbVOZpHcw3dk%252Fcart-full-width.png%3Falt%3Dmedia%26token%3Dc3a569b1-f66f-4393-b11e-efa48f4f9e8a&#x26;width=300&#x26;dpr=4&#x26;quality=100&#x26;sign=d84bae42444f8b33a0b869b2d9bba2649ec503188a62f7ebcff60ea1545cd02f" alt=""></p>                                                                                                                                                                                                                                                                                                                                                                                                   |
| **Show "quick add button" below product card** | <p>Enabling this option will make the "quick add button" always static and occupy full width.</p><p><img src="https://themihub.gitbook.io/~gitbook/image?url=https%3A%2F%2F3066755919-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FbMGVnCsdnFPDX2dCTNWk%252Fuploads%252F9Ag3qw178VACrSgj5yqh%252Fbelow-cart.png%3Falt%3Dmedia%26token%3D07971126-85cb-48a0-80a0-0dafdba82670&#x26;width=300&#x26;dpr=4&#x26;quality=100&#x26;sign=165bf03ded5fdf18e3fb757d24080f94c7ff433cea13f24794c2744b044346e2" alt=""></p>                                                                                                                                                                                                                                                                                                                                                                               |
| **"Quick add button" position on desktop**     | <p>You can change the "Quick add button" position on the "Product card" -</p><ul><li>Top left</li><li>Top center</li><li>Top right</li><li>Middle left</li><li>Middle center</li><li>Middle right</li><li>Bottom left</li><li>Bottom center</li><li>Bottom right</li></ul><p><em><strong>It works, unless you enable the option "Show quick add button below product card"</strong></em></p><p><img src="https://themihub.gitbook.io/~gitbook/image?url=https%3A%2F%2F3066755919-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FbMGVnCsdnFPDX2dCTNWk%252Fuploads%252FCpRWzRAlKoHAcDvX21JJ%252Fbutton-position.png%3Falt%3Dmedia%26token%3D9fb7e22f-a461-481c-babd-68e4042f09ff&#x26;width=300&#x26;dpr=4&#x26;quality=100&#x26;sign=c5ef11f21442fc8396d92f9f6bb2cc69924cfb6ea31f0dcc9cacafe52fce129d" alt=""></p>                                                                               |
| **Show pre-order button**                      | You may want to allow customers to purchase out-of-stock items. [**Learn more**](https://themihub.gitbook.io/vector-shopify-theme/general-topics-faq/how-to-enable-the-pre-order-product-to-your-store)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| **Show countdown**                             | To display the countdown timer, you need to enable it. [**Learn more**](https://themihub.gitbook.io/vector-shopify-theme/collections-and-products/products/add-a-countdown-timer-to-the-product)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| **Enable color swatches**                      | To display color swatches, you need to enable it. [**Learn more**](https://themihub.gitbook.io/vector-shopify-theme/theme-settings/color-swatches)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| **Show marquee**                               | To display the marquee, you need to enable it. [**Learn more**](https://themihub.gitbook.io/vector-shopify-theme/collections-and-products/products/show-a-marquee-badge-to-your-product)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| **Marquee display**                            | <ul><li>Always static</li><li>Hide on hover</li></ul><p><em><strong>Always static on mobile</strong></em> You must follow the instructions to display the marquee on the product card. <a href="https://themihub.gitbook.io/vector-shopify-theme/collections-and-products/products/show-a-marquee-badge-to-your-product"><strong>Learn more</strong></a></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
|                                                |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| **Round corner**                               | You can enable/disable the round corner of the product card                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| **Card spacing**                               | You can add padding inside of the product card by enabling this setting.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| **Product card color scheme**                  | <p>You can add a color scheme to the product card.</p><p><img src="https://themihub.gitbook.io/~gitbook/image?url=https%3A%2F%2F3066755919-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FbMGVnCsdnFPDX2dCTNWk%252Fuploads%252FWiLtLvPkrp8FlFQi3MF6%252Fcard-color-scheme.png%3Falt%3Dmedia%26token%3Dc723dd9d-a170-4df8-8ec5-55636ee6e8d3&#x26;width=300&#x26;dpr=4&#x26;quality=100&#x26;sign=131b97d68c1bdbe88560624bdf300d2e034099aa3d16714467543b244961d385" alt=""></p>                                                                                                                                                                                                                                                                                                                                                                                                                   |
| **Inventory status**                           | You can enable or disable it. ![](https://themihub.gitbook.io/~gitbook/image?url=https%3A%2F%2F3066755919-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FbMGVnCsdnFPDX2dCTNWk%252Fuploads%252F8MZscf3k7DCbEBbFQT1i%252Fineventory.png%3Falt%3Dmedia%26token%3Dab636969-f743-40b7-a850-9e262fb1f9a3\&width=300\&dpr=4\&quality=100\&sign=30596d0bf509d7141074c1725ffe7200cb375c7b7c5120174f46d9a20344243f)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| **Low inventory threshold**                    | You can show a " low inventory stock" message for your customer. **Just add a low inventory threshold** ![](https://themihub.gitbook.io/~gitbook/image?url=https%3A%2F%2F3066755919-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FbMGVnCsdnFPDX2dCTNWk%252Fuploads%252FLJNfdj9Ie5CWpNO4F5PH%252Flow-stock-message.png%3Falt%3Dmedia%26token%3Da37ff923-4b28-4326-8a57-c43d74dd328a\&width=300\&dpr=4\&quality=100\&sign=52e2609a46330c0f7b03e85590919eef5d7533a3baf278ab95feff66d8d5c297)                                                                                                                                                                                                                                                                                                                                                                                                      |
| **Show inventory count**                       | <p>You can show/hide inventory stock count numbers.</p><p><img src="https://themihub.gitbook.io/~gitbook/image?url=https%3A%2F%2F3066755919-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FbMGVnCsdnFPDX2dCTNWk%252Fuploads%252FHIm4rgo3oDHnImpnWKjc%252Fno-count.png%3Falt%3Dmedia%26token%3D4c77b454-19a3-4ef7-a421-bca49bd997cb&#x26;width=300&#x26;dpr=4&#x26;quality=100&#x26;sign=d5bf47b937fec101e2814bcc4478bb103a38f6e1abe0ededef1e647c2ac30f04" alt=""></p>                                                                                                                                                                                                                                                                                                                                                                                                                           |
| **Show always status**                         | <ul><li>You can always show the inventory status for all the product cards.</li><li>If you disable the option, the inventory status will be displayed based on the quantity of the specific product inventory.</li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| **Minimum number of quantity**                 | <p>You can set "<strong>Minimum number of quantity</strong>" to show inventory status.</p><p><strong>It works until you enable "Show always "</strong></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| **Color settings**                             | <p>You can add color to different statuses of inventory stock.</p><ul><li><strong>In stock</strong></li><li><strong>Out of stock</strong></li><li><strong>Low stock</strong></li><li><strong>Continue selling</strong> (<em>You may want to allow customers to purchase out-of-stock items.</em> <a href="https://themihub.gitbook.io/vector-shopify-theme/general-topics-faq/how-to-enable-the-pre-order-product-to-your-store"><strong>Learn more</strong></a> ) <img src="https://themihub.gitbook.io/~gitbook/image?url=https%3A%2F%2F3066755919-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FbMGVnCsdnFPDX2dCTNWk%252Fuploads%252Fj2gkslwxCDvEr8zzXQ59%252Fcolors_stock_status.png%3Falt%3Dmedia%26token%3De8c3b08c-5b77-4ef6-afcb-64f7b530c14f&#x26;width=300&#x26;dpr=4&#x26;quality=100&#x26;sign=a29eef49e2ca3b52a37fc23c7b5ed152746a4f5094eafd5c8e73f858485f9f48" alt=""></li></ul> |

### **Quick add button style on the product card**

{% tabs %}
{% tab title="Text with icon button" %}

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FsSQk3pjUr5HP8lL0pWfo%2Ftext-with-cart-icon-button.png?alt=media&#x26;token=0db67826-b9fb-4dc1-a57b-3226af4a6232" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Icon button" %}

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FuENepTzf8qtK4XQoKVV4%2Ficon-cart-burtton.png?alt=media&#x26;token=a9d618b5-5dbf-4051-94e0-8844d5475538" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Text button" %}

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FuJWOxGojX8g3AaYAsXAl%2Ftext-button.png?alt=media&#x26;token=c4660ae8-2e08-49b8-a480-8cbda51f78ff" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Section padding

| Settings                    | Description                                                                                                                          |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| **Desktop**: Padding top    | The section’s top inner space height is determined. From 0 to 150 px, will be incremented by 5px. **It will affect the desktop.**    |
| **Desktop**: Padding bottom | The section’s bottom inner space height is determined. From 0 to 150 px, will be incremented by 5px. **It will affect the desktop.** |
| **Mobile**: Padding top     | The section’s top inner space height is determined. From 0 to 150 px, will be incremented by 5px. **It will affect the mobile.**     |
| **Mobile**: Padding bottom  | The section’s top inner space height is determined. From 0 to 150 px, will be incremented by 5px. **It will affect the mobile.**     |
