> 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/lookbook.md).

# Lookbook

Presents one image with numbered hotspots placed over it and the matching products next to it, so customers can shop the whole look from a single section.

{% hint style="info" %}
Available since v3.0.0
{% endhint %}

*Shared Settings*:

* [<mark style="color:$primary;">Section 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;">Background</mark>](/triumph/template/shared-settings/section-background.md)
* [<mark style="color:$primary;">Colors</mark>](/triumph/template/shared-settings/colors.md)
* [<mark style="color:$primary;">Button 'Add to cart' colors</mark>](/triumph/template/shared-blocks/slide/button.md#colors)

*Blocks:*

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

***

**Button text**

* **Button text**\
  The label of the button that adds every product of the look to the cart at once.

The button is hidden when the look contains a single product: that product gets its own buy button inside its card instead.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2Feiz6YwSZiFPJX8C4eLLV%2Flb_buttontext.png?alt=media&amp;token=570b2ea5-e979-4b96-a1d5-71c73f65eb86" alt=""><figcaption></figcaption></figure>

Products that are sold out are skipped, and the remaining ones are still added. If a product cannot be added — for example, its maximum quantity is already in the cart — the section lists it below the button together with the reason, and opens the cart with everything that was added.

***

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

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FwhpJyv01tCyzPZPofccu%2Flb1.png?alt=media&amp;token=41c5416e-b217-447f-8637-db3ef75415df" 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%2FNQEe8jzZOlbVHebaII5A%2Flb2.png?alt=media&amp;token=e007e480-0f07-4199-a709-f28b6e59004b" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}