> For the complete documentation index, see [llms.txt](https://docs.northcommerce.com/north-commerce/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.northcommerce.com/north-commerce/blocks/collection-slider.md).

# Collection Slider

The Collection Slider block is a row of products you can swipe or click through. Think of it as a shelf, not a full shop page.

{% hint style="info" %}
If you want a **full shop grid** with filters and Load More, use [Product Query](/north-commerce/blocks/product-query.md). If you want a “You may also like” strip on a product page, use [Product Recommendations](/north-commerce/blocks/product-recommendations.md).
{% endhint %}

## Before you start

1. North Commerce and North Commerce Blocks are installed and turned on
2. You have at least one product. See Create a product if you still need one

## Add it to a page

This is nice on the home page, or under a story.

1. In WordPress go to **Pages** and open the page
2. Click the **+** button
3. Search for **Collection Slider**
4. Click it once

![Search for Collection Slider in the block inserter](https://3754649969-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD2GW0FgHldEZwt1FAF7r%2Fuploads%2F2NGWEZ1Xc42YDLK0SyJa%2Feditor-add-collection-slider.jpg?alt=media)

A heading and the slider of product cards come with it.

5. Click the Collection Slider block so it is selected
6. In the right-hand sidebar, pick which products show (same idea as [Product Query](/north-commerce/blocks/product-query.md))
7. Click **Update** / **Publish**

## Pick which products show

Click the Collection Slider block.

* **Query Source → Manual** — pick categories under **Filters**
* **Query Source → Automatic** — on a category or tag page it follows that page; on a regular page it shows all products

You can also set **Items to show** and **Sort**.

## Collection Slider Template

This is one card in the slider. Click it to set how the row behaves:

* **Slides Per View** — how many cards show at once on **Desktop**, **Tablet**, and **Mobile**
* **Space Between Slides** — the gap
* **Peek Amount** — a sliver of the next card at the edge, so people can tell they can swipe
* **Show Navigation** — the arrows. **Arrow Position** can be **Top Right**, **Bottom Center**, or **Sides (overlay)**

You can change what is on the card (photo, title, price, badge). Those pieces are the same ones on the Product page.

## What your customer will do

1. See a row of products
2. Click the arrows or swipe to see more
3. Click a product to open it (or add it, if you left a button on the card)

## Make sure it works

Open the page in a new browser tab.

1. You should see a row of product cards
2. Click an arrow (or swipe on a phone). The next products should slide in.
3. Click a card. It should open that product.

## If something looks wrong

* **No products.** You have no products yet, or **Manual** is on and the category you picked has none.
* **It looks like a tall grid, not a row.** You added [Product Query](/north-commerce/blocks/product-query.md) instead. Delete it and add **Collection Slider**.
* **No arrows.** Click **Collection Slider Template** and turn **Show Navigation** on.

SEE ALSO: [Product Query](/north-commerce/blocks/product-query.md) · [Product Recommendations](/north-commerce/blocks/product-recommendations.md) · Product