---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/en/artikel/use-product-tiles-and-product-sliders"
locale: en
meta:
"og:title": "Academy Article"
---
[Go to home](https://academy.laioutr.com/en)
- [Storefront features](https://academy.laioutr.com/en/bereiche/storefront-features)
- [Products and categories](https://academy.laioutr.com/en/leitfaeden/products-and-categories)
- [Use product tiles and product sliders](https://academy.laioutr.com/en/artikel/use-product-tiles-and-product-sliders)
# Use product tiles and product sliders
Product tiles show a product with image, brand, title, price, flags, colour variants and an optional add-to-cart button; the Product Slider lines such tiles up horizontally, for example for new arrivals or matching products. Which products appear comes from a query to the connected commerce app.
## Before you start
- Plan
- Laioutr Commerce plan
- Role
- Editor or Admin in the project
- Duration
- 5 min
### Prerequisites
- Commerce app installed and connected
Last reviewed on October 15, 2026
The product tile (**Product Tile**) is the basic building block of every product display in Laioutr UI. It appears in category listings, search results and sliders and shows the same information everywhere: image, optional brand, title, price with strike-through price, product flags such as sale, colour variants as swatches and, if wanted, a button to add the product to the cart. Tiles keep a consistent height so rows stay aligned, and they format prices for the market.
The **Product Slider** presents a selection of products as a horizontally scrollable strip with a heading, a subline and a button. Navigation sits at the top or bottom, and a scrollbar is optional. For campaigns, the **Product Slider Showcase** adds a banner image next to the products.
The products in the slider come from a query to the commerce app through Orchestr, for example a category. Which queries are available depends on the installed app.
## Step by step
1. 1 ### Step 1: Open the page
In **Studio**, select the page where the slider should appear, for example the home page.
2. 2 ### Step 2: Add the slider
Insert a **Product Slider** section at the desired position from the left sidebar. For a campaign with an image, choose **Product Slider Showcase** instead.
3. 3 ### Step 3: Assign products
In the properties panel on the right, choose the query for the products, for example a category of the commerce app. The preview shows the matching products right away.
4. 4 ### Step 4: Set up header and navigation
Enter the heading, subline and button text, set the navigation position and switch the scrollbar on or off.
5. 5 ### Step 5: Adjust the tiles
Set the available tile options in the properties, such as image ratio, flags, colour swatches or the add-to-cart button.
6. 6 ### Step 6: Save and publish
Save with **Save** and publish with **Publish**.
## Check the result
Open the page in the storefront: the slider shows the products of the selected query, can be swiped or moved with the arrows, and clicking the image or title of a tile opens the product detail page.
## Frequently asked questions
Can specific products be placed in the slider?
Products are selected through the queries the commerce app offers. If the app offers a query for individual products or collections, it can be used for curation; otherwise a dedicated category or collection in the backend helps.
How does a tile switch the colour variant?
Clicking a colour swatch shows the image and data of that variant. If there are more colours than space, a hint shows how many further variants exist. This requires the backend to deliver variants with colour information.
When does the Product Slider Showcase make sense?
When a slider should carry a campaign or brand with an image. It combines the same product strip with a banner at the side.
## Related
- [Fill sections with shop data](https://academy.laioutr.com/en/artikel/fill-sections-with-shop-data)7 min
Sections with a data field show products, categories or posts from connected systems. The team picks a data query in Studio, sets input, limit and sorting, and Orchestr delivers the data at render time.
- [Set up product listings with filters and sorting](https://academy.laioutr.com/en/artikel/set-up-product-listings-with-filters-and-sorting)6 min
A product listing is built in Studio from the Product Listing Grid, the Filter Bar and the sort selector; products, filters and sort options come from the connected commerce app through Orchestr. Which filters appear depends on what the backend provides.
- [Design the product detail page and spec sheet](https://academy.laioutr.com/en/artikel/design-the-product-detail-page-and-spec-sheet)7 min
In Studio, the product detail page is one template for all products: the image gallery on the left, the buy box made of blocks such as title, price, variant selection and add to cart on the right, and an optional spec sheet below. Images, variants, prices and specifications come from the commerce app through Orchestr.
- [Build a landing page from existing sections](https://academy.laioutr.com/en/artikel/build-a-landing-page-from-existing-sections)10 min
A landing page is created in Studio as a Landing Page type page with its own path and is assembled from installed sections: hero, content, a product slider with shop data, and header and footer as global sections.
## [Products and categories](https://academy.laioutr.com/en/leitfaeden/products-and-categories)
Search this guide
1. [Set up product listings with filters and sorting](https://academy.laioutr.com/en/artikel/set-up-product-listings-with-filters-and-sorting)6 min
2. [Design the product detail page and spec sheet](https://academy.laioutr.com/en/artikel/design-the-product-detail-page-and-spec-sheet)7 min
3. [Use product tiles and product sliders](https://academy.laioutr.com/en/artikel/use-product-tiles-and-product-sliders)5 min
4. [Build brand pages and a brand overview](https://academy.laioutr.com/en/artikel/build-brand-pages-and-a-brand-overview)6 min
5. [Set up search and the search results page](https://academy.laioutr.com/en/artikel/set-up-search-and-the-search-results-page)6 min
## Structured Data
```json
{
"@context": "https://schema.org",
"@graph": [
{
"@id": "https://academy.laioutr.com/#website",
"@type": "WebSite",
"inLanguage": "en",
"name": "Default",
"url": "https://academy.laioutr.com/",
"translationOfWork": {
"@id": "https://academy.laioutr.com/#website"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/use-product-tiles-and-product-sliders#webpage",
"name": "Academy Article",
"url": "https://academy.laioutr.com/en/artikel/use-product-tiles-and-product-sliders",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/en/artikel/use-product-tiles-and-product-sliders#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/en/artikel/use-product-tiles-and-product-sliders#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/en/artikel/use-product-tiles-and-product-sliders#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/en/artikel/use-product-tiles-and-product-sliders#/schema/question/3"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/en/artikel/use-product-tiles-and-product-sliders"
]
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/use-product-tiles-and-product-sliders#breadcrumb",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"name": "Home",
"item": "https://academy.laioutr.com/en",
"position": 1
},
{
"@type": "ListItem",
"name": "Storefront features",
"item": "https://academy.laioutr.com/en/bereiche/storefront-features",
"position": 2
},
{
"@type": "ListItem",
"name": "Products and categories",
"item": "https://academy.laioutr.com/en/leitfaeden/products-and-categories",
"position": 3
},
{
"@type": "ListItem",
"name": "Use product tiles and product sliders",
"item": "https://academy.laioutr.com/en/artikel/use-product-tiles-and-product-sliders",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/use-product-tiles-and-product-sliders#/schema/question/1",
"@type": "Question",
"inLanguage": "en",
"name": "Can specific products be placed in the slider?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Products are selected through the queries the commerce app offers. If the app offers a query for individual products or collections, it can be used for curation; otherwise a dedicated category or collection in the backend helps.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/use-product-tiles-and-product-sliders#/schema/question/2",
"@type": "Question",
"inLanguage": "en",
"name": "How does a tile switch the colour variant?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Clicking a colour swatch shows the image and data of that variant. If there are more colours than space, a hint shows how many further variants exist. This requires the backend to deliver variants with colour information.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/use-product-tiles-and-product-sliders#/schema/question/3",
"@type": "Question",
"inLanguage": "en",
"name": "When does the Product Slider Showcase make sense?",
"acceptedAnswer": {
"@type": "Answer",
"text": "When a slider should carry a campaign or brand with an image. It combines the same product strip with a banner at the side.
"
}
}
]
}
```