> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Shine Collection Products Sections

**Theme:** Shine · **Section type:** Collection page section

The Collection products section shows the products of a collection in a grid, with filters, sorting, and a column switcher. Use it to help customers narrow down a collection and add products to the cart straight from the grid.

> **Note:** This section is part of the collection template. You can't add it with **Add section**, but you can hide it. It shows the products of the collection that customers open.
![Collection products grid with sidebar filters, column buttons, and Sort by](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/shine-collection-products-1_5nc2jh.jpg)

**What you can do**
- Set how many products load and how
- Set up filters and sorting
- Let customers add products from the cards
- Choose the grid layout on large screens and phones
- See what customers see
- Look up every setting in "Settings reference"
- Fix common problems

---

## Set how many products load and how
1. In the theme editor, open the collection template (**Collections** > **Default collection**).
2. In the left sidebar, click **Collection products**.
3. Under **General**, choose **Items per load**: 20, 30, 40, or 50 products.
4. Choose a **Load products method**:
   - **Pagination** shows page numbers below the grid.
   - **Button** shows a load more button that adds the next products to the grid.
   - **Infinity scroll** loads the next products when customers scroll to the end of the grid.
5. Click **Save**.

## Set up filters and sorting
Filters come from Shopify's **Search & Discovery** app. You choose which filters appear (price, availability, product type, options, and more) in that app.

1. In your Shopify admin, open the **Search & Discovery** app and set up your filters.
2. In the theme editor, click **Collection products**.
3. Under **Filter and sort**, check **Enable product filter** and **Enable sort**.
4. Optional: check **Expand all filter options by default** to open every filter group when the page loads.
5. Under **Large screen**, choose a **Filter and sort layout**: Sidebar, Topbar, or Drawer.
6. Click **Save**.

> **Note:** There is no default sort setting in the theme. The sort order that a collection opens with is set for each collection in the Shopify admin: go to **Products** > **Collections**, open the collection, and change **Sort** in the **Products** list. Customers can still change the order with **Sort by**.

## Let customers add products from the cards
1. Click **Collection products**.
2. Under **Product card**, choose a **Quick shop action**: Quick add, Quick view, Both, or Not use.
3. If you chose Quick add or Both, choose a **Quick buy mode**:
   - **Standard (variant picker)** opens a small window where customers pick a variant and add it to the cart.
   - **Bulk order (all variants)** opens a table where customers enter a quantity for each variant at once.
4. Click **Save**.

> **Note:** You change how the quick shop window looks in **Theme settings** > **Quick shop**, and how the card looks (image ratio, quick buy button style) in **Theme settings** > **Product card**.

> **Tip:** Use **Bulk order (all variants)** for products that customers often buy in several sizes or colors at once, such as wholesale or team orders.

## Choose the grid layout on large screens and phones
1. Click **Collection products**.
2. Under **Large screen**, choose the **Default columns per row**: 3, 4, or 6.
3. Under **Mobile screen**, choose the **Default columns per row**: 1 or 2.
4. Optional: under **General**, check **Allow user to switch number of columns** to show grid buttons that customers can use to change the number of columns.
5. Click **Save**.

## What customers see
- **Header row:** the collection title (if **Show collection title** is on), the number of products, the column buttons, and **Sort by**.
- **Filters:** with Sidebar, the filters sit to the left of the grid; with Topbar, they sit in a row above it; with Drawer, customers click **Filter** to open them in a panel. Active filters appear as tags above the grid, and customers can remove them one by one.
- **Hide filter:** on large screens, customers can hide the filters to give the grid more room.
- **Product cards:** each card shows the image, title, and price, plus the vendor and variant swatches if you turned them on. Customers click a card to open the product.
- **Quick add and Quick view:** customers pick a variant (Standard) or enter quantities for each variant (Bulk order) and add the product to the cart without leaving the page. A product with only one variant is added straight from the card. The eye button opens the product details in a window.
- **Phones:** the filters always open in a drawer from the **Filter** button, and the grid uses the **Mobile screen** columns.
![Quick add window with the variant picker, opened from a product card](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/shine-collection-products-2_t8lexx.jpg)

## Settings reference

### General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the background and text colors of the section. You edit color schemes in Theme settings > Colors. |
| Items per load | Sets how many products load at a time: 20, 30, 40, or 50. |
| Load products method | Loads more products with Pagination, a Button, or Infinity scroll. See "Set how many products load and how" above. |
| Show collection title | Shows the collection title before the product count. |
| Allow user to switch number of columns | Shows grid buttons that customers use to change the number of columns. |

### Filter and sort
| Setting | What it does |
| ---- | ---- |
| Enable product filter | Shows the filters. You set up filters in the Search & Discovery app. |
| Expand all filter options by default | Opens every filter group when the page loads. Applies to the Sidebar and Drawer layouts. |
| Enable sort | Shows the Sort by menu. |

### Product card
| Setting | What it does |
| ---- | ---- |
| Show vendor | Shows the vendor on each card. |
| Show variant swatches | Shows variant swatches on each card. You set up swatches in Theme settings > Product information. |
| Quick shop action | Adds a Quick add button, a Quick view button, Both, or none (Not use) to each card. You style the quick shop window in Theme settings > Quick shop. |
| Quick buy mode | Opens a variant picker (Standard) or a table with every variant (Bulk order) when customers use quick add. Appears with Quick add or Both. |

### Large screen
| Setting | What it does |
| ---- | ---- |
| Default columns per row | Shows 3, 4, or 6 products per row. |
| Filter and sort layout | Places the filters in a Sidebar, a Topbar above the grid, or a Drawer that opens from the Filter button. |

### Mobile screen
| Setting | What it does |
| ---- | ---- |
| Default columns per row | Shows 1 or 2 products per row. |

## Troubleshooting
**The filters don't show.**
Check that **Enable product filter** is on and that filters are set up in the **Search & Discovery** app. A filter only appears if products in the collection have values for it.

**I can't set the default sort order.**
The theme has no default sort setting. Set the sort order for each collection in **Products** > **Collections** in the Shopify admin.

**The Quick buy mode setting is missing.**
**Quick buy mode** appears only when **Quick shop action** is Quick add or Both.

**The grid has a different number of columns than I set.**
If **Allow user to switch number of columns** is on, customers may have changed the columns with the grid buttons. Your setting is only the starting layout.

## Related articles
- [Shine Collection Header](https://doc.ecomx.co/en/article/shine-collection-header-19enuf2/)
- [Shine Quick Shop](https://doc.ecomx.co/en/article/shine-quick-shop-18cw684/)
- [Shine Search Page](https://doc.ecomx.co/en/article/shine-search-page-1xgwndo/)
- [Shine Featured Collection](https://doc.ecomx.co/en/article/shine-featured-collection-kqvywq/)
- [Shine Theme Settings](https://doc.ecomx.co/en/article/shine-theme-settings-1876q8v/)