> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/triumph/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/triumph/template/sections/featured-collection-loop.md).

# Featured collection: Loop

Shows products from a specific collection as a slider.

*Shared Settings*:

* [<mark style="color:$primary;">Collection</mark>](#collection)
* [<mark style="color:$primary;">'View All' button</mark>](/triumph/template/shared-settings/view-all-button.md)
* [<mark style="color:$primary;">Layout</mark>](/triumph/template/shared-settings/section-layout.md)
* [<mark style="color:$primary;">Section mobile layout</mark>](/triumph/template/shared-settings/section-mobile-layout.md)
* [<mark style="color:$primary;">Divider line</mark>](/triumph/template/shared-settings/divider-line.md)
* [<mark style="color:$primary;">Section background</mark>](/triumph/template/shared-settings/section-background.md)
* [<mark style="color:$primary;">Colors</mark>](#colors)

*Shared Blocks:*

* [<mark style="color:$primary;">Heading</mark>](/triumph/template/shared-blocks/heading.md)
* [<mark style="color:$primary;">Product card</mark>](/triumph/template/shared-blocks/product-card.md)

***

#### **Collection**

**Collection**\
Link a collection.

**Products**\
Select several products.

**Products limit**\
Set the number of products displayed in the tab (1-18).

**Product width on desktop**\
Changes the product card size (240-340).

**Speed**\
Adjust the slider speed (10-40).

**Reverse direction**

* **Enabled** - Slides from left to right.
* **Disabled** - Slides from right to left.

***

#### Colors

**Text**\
Controls the color of the heading, description, product title, and vendor.

**Accent**\
Adjusts the color of the subheading and product price.

**Line**\
Sets the border color of product variants.

***

#### Product card

*Additional settings in the block:*

**Content alignment**\
Aligns product details to the left or center.

**Quick view**\
Enables the "Quick View" button to display when hovering over a product card.

#### Media

Use the '**Aspect ratio**' drop-down to choose the shape of images:

* **Adapt to first image** – Uses the default proportions of the first image.
* **Squared** – Displays images in a 1:1 ratio.
* **Portrait** – Taller images (3:4 ratio).
* **Landscape** – Wider images (4:3 ratio).

**Size**\
Choose how images fit inside the container:

* **Full background** – Fills the space (may crop the image).
* **Contain** – Shows the full image (may leave empty space).

**Change image on hover**\
Shows a second image when hovering over a product card.

#### Countdown

**Show**\
Displays a countdown timer on product cards.\
*Note: This feature requires configuring additional settings in the admin. Read the details* [*<mark style="color:$primary;">here</mark>*](/triumph/customizable-features/countdown.md)*.*

#### Attributes

Choose which details to show below the product image:

* SKU
* Type
* Vendor

#### Price

**Show**\
Display the product price.

#### Rating

????

#### Buy button

**Show**\
Choose when the button appears: None, Always, or Only on desktop.

***

{% tabs %}
{% tab title="Desktop" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FE4lzVOyyfuuCRQAj5hUr%2Ffeatured%20collection%20loop_desktop.png?alt=media&amp;token=fe4c7e4c-baca-46e3-8e0a-132ac99bfe3f" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2F41ctuxbMrG3U5ZkJsoef%2Ffeatured%20collection%20loop_mobile.png?alt=media&amp;token=6c994f32-fa39-4343-99e2-9082b352edf1" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}