Related products slider/grid

This service page is needed for the Product slider/grid paragraph to function properly. The way it works is that the Related products slider/grid-service page retrieves data from the query defined within the app on the service page. If any configuration has been applied in the Product slider/grid paragraph that uses the service page, the service page will retrieve products based on this configuration. For example, if the Product slider/grid paragraph is set to display the 8 most sold items, the service page will fetch these specific items from the query within the app.

While Swift typically provides this functionality as a standard built-in feature, should you find yourself needing to set it up manually, you can follow the guide below.

Manual setup

First, we need to create a new page, which will be our Related products slider/grid-service page:

1. Navigate to the services folder: Content > Swift Tools > Services
2. Right click the folder and select New page
3. Right click the new page and select Page settings
4. Give the page the title, e.g. Related products slider/grid
5. Enter the Publication tab and select Hidden in menu
6. Save and close

Now we'll add the app paragraph to the service page:

1. Add a new row to the page
2. Add an app paragraph to the row
3. Go to the App tab and select Product catalog for ViewModel in the dropdown menu
4. In the Query dropdown menu, select the query you want to use. for instance SwiftProducts - Products.query
5. Set the List template to ProductSlider.cshtml
6. Save and close

The service page is now essentially done. To make the product slider work, you’ll either have to link the column with the service page or set a ProductSliderService tag on the service page. If you want to use more than one product slider you probably want to go with the tag, but we’ll show both ways.

To link a column with the service page, you have to:

1. Navigate to the Product slider column you wish to link your service page to and select Edit paragraph
2. In the Content tab, scroll down to the Advanced section
3. In the Product slider service page field, link to the service page
4. Save and close

if you use a ProductSliderService tag on your service page, this field will by default be linked to your service page. To create the tag:

1. Navigate to the Product slider service page
2. Enter the Page settings
3. Head to the Advanced tab
4. In the Navigation section, under Navigation Tag, write ProductSliderService
5. Save and close