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.

If you want a full shop grid with filters and Load More, use Product Query. If you want a “You may also like” strip on a product page, use Product Recommendations.

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

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

1. Click the Collection Slider block so it is selected

2. In the right-hand sidebar, pick which products show (same idea as Product Query)

3. 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 instead. Delete it and add Collection Slider.

• No arrows. Click Collection Slider Template and turn Show Navigation on.

SEE ALSO: Product Query · Product Recommendations · Product