# Complete the look

Use the **Complete the look** section to promote multiple products that go well together. Display a large image or video that features your products together and let customers add them directly to their cart.

## Set up section

***

{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](/stiletto/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [insert dynamic content with metafields](/stiletto/general/adapting-your-theme/dynamic-content-with-metafields.md)
{% endhint %}

In the editor side panel, click **(+) Add section** and select **Complete the look**. Click and hold the drag handles **`⋮⋮`** to re-order sections.

Click the section to edit the general **section styles:** [Padding](/stiletto/sections/theme-sections/using-sections.md#section-padding) | [Top divider](/stiletto/sections/theme-sections/using-sections.md#section-top-divider) | [Animation](/stiletto/sections/theme-sections/using-sections.md#section-animations)

## Add large media

***

Display either an **image** or **autoplay** video next to the product cards.

`Click Complete the look section to find settings`

<table><thead><tr><th width="209">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image</mark></td><td>Select or upload a feature image that shows selection of your products together.</td></tr><tr><td><mark style="color:blue;">Media position</mark></td><td>Display the feature image on the <strong>Left</strong> or <strong>Right</strong> side of the section.</td></tr><tr><td><mark style="color:blue;">Image aspect ratio</mark></td><td>Crop the shape of the image or video to <strong>Square, Landscape</strong>, or <strong>Portrait</strong>. Choose <strong>Natural</strong> to display the original image shape.</td></tr></tbody></table>

### Add autoplay video

***

Instead of a large feature image, you can add an **autoplay video (without sound)** that loops continuously. You can also choose whether to **Loop video** and **Show video controls**.

{% hint style="warning" %}
For theme versions 3.0.0 and later, you can upload a `.mp4` video directly in the section settings. For earlier versions, you must upload your video to *Content > Files* in your Shopify admin, then copy the file link into the section settings.
{% endhint %}

<details>

<summary><mark style="color:blue;"><strong>STEPS (v3.0.0 or later)</strong></mark></summary>

In your theme editor (**Customize**):

1. Click the **Video hero** section.
2. Under **Shopify video**, click **Select video**.

   > Select a .mp4 video, or click Add videos to upload a .mp4 video file.
3. (*Optional*) Under **Mobile Shopify video**, click **Select video** for a background video that appears only on mobile devices.

   > You may want to upload a video file that has been cropped to a different shape (aspect ratio) to better fit a vertical screen.
4. Under **Media height**, choose to display the video with a **Custom** or the **Original** height (without cropping).
5. If **Custom** height is selected: adjust the **Height** and **Mobile Height** of your video between 50% to 100% of the maximum height.

   > The **Height** is the percentage of the window height on your customer's device. When **Custom height** is set to 50%, the video will always display at half the height of the customer's screen.
6. Use **Media focal points** to specify the main focus of your images. The focal point of your image will remain centered and within frame when your site adapts to different screen sizes.
7. Click **Save**.

</details>

<details>

<summary><mark style="color:blue;"><strong>STEPS (v2.4.0 or earlier)</strong></mark></summary>

In your **Shopify admin**:

1. Go to **Content > Files** to open your [Shopify files](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/file-uploads).

   ![](/files/8PEu0RWDKkct1XEBnsx9)
2. Click the **Upload files** button to add your **`.mp4`** file from your computer.
3. Once your file has been processed, click the **Link icon** next to the file to copy the *URL*.

   > You may need to refresh the page for your file to appear.

   ![](/files/szX4jIGzhGxzQc0aMAvu)

In the theme editor (**Customize**):

1. Click the **Complete the look** section to open the settings.
2. Paste the link into the **Video link** field. Click on the the link that appears in the results above.

   ![](/files/aGE8Z9vAzzRFUPEPpKhF)
3. Click **Save**.

</details>

{% tabs %}
{% tab title="Video requirements" %}
For **autoplay videos**, make sure your video files meet the following requirements:

<table data-header-hidden><thead><tr><th width="210"></th><th></th></tr></thead><tbody><tr><td><strong>Video file type</strong></td><td><code>.mp4</code> or <code>.mov</code><br><br><em>Embedded YouTube or Vimeo videos are not supported</em>.</td></tr><tr><td><strong>Video length</strong></td><td>&#x3C; 20 seconds (Recommended)</td></tr><tr><td><strong>Video size</strong></td><td>&#x3C; 10MB (Recommended)</td></tr></tbody></table>
{% endtab %}
{% endtabs %}

`Click Complete the look section to find settings`

<table><thead><tr><th width="209">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Shopify video</mark></td><td>Select or upload a video that autoplays (without sound).</td></tr><tr><td><mark style="color:blue;">Loop video</mark></td><td>Choose to play your short video continuously.</td></tr><tr><td><mark style="color:blue;">Show video controls</mark></td><td>Choose to show buttons to let the customers pause, enlarge, or adjust the volume.</td></tr></tbody></table>

## Add product card blocks

***

Display individual product cards for each product in your 'Complete the look' set, and customize their **image** and **size**.

* Add up to **4** **products**. Click and hold the drag handles **`⋮⋮`** to rearrange the blocks
* Upload a **custom image** for each product
* Change the **image size**

`Click Complete the look section to find settings`

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Select product</mark></td><td>Choose a product to display with its title, price, and a quick view button.<br><br>Add multiple products that are shown in your feature image.</td></tr><tr><td><mark style="color:blue;">Custom product image</mark></td><td>Select or upload an image to replace the default product image.</td></tr><tr><td><mark style="color:blue;">Image size</mark></td><td>In the section settings, set the size of the product images to Small, Medium, or Large.</td></tr></tbody></table>

## Section header

***

The **Section header** appears above the section. Add a **Heading**, **Subheading**, and optional **Button**.

`Click Complete the look section to find settings`

<table><thead><tr><th width="186">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Heading</mark></td><td>Change or remove the title of the section.</td></tr><tr><td><mark style="color:blue;">Heading tag</mark></td><td>Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics.<br><br>This option doesn't change the heading's appearance.</td></tr><tr><td><mark style="color:blue;">Heading size</mark></td><td>Set the heading text to <strong>Small</strong>, <strong>Medium</strong>, or <strong>Large</strong>.</td></tr><tr><td><mark style="color:blue;">Subheading</mark></td><td>Add multiple lines of rich text below the heading.</td></tr><tr><td><mark style="color:blue;">Button link</mark></td><td>Select or paste a URL for the button.</td></tr><tr><td><mark style="color:blue;">Button label</mark></td><td>Enter text to display as the button label. Leave this field blank to remove the button.</td></tr><tr><td><mark style="color:blue;">Button style</mark></td><td>Select a button style: either <strong>Solid</strong>, <strong>Outline</strong>, or <strong>Text</strong>.</td></tr></tbody></table>

***

> **Related links**
>
> [Shoppable image](/stiletto/sections/theme-sections/shoppable-image.md)\
> [Shoppable image editorial](/stiletto/sections/theme-sections/shoppable-image-editorial.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/stiletto/sections/theme-sections/complete-the-look.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.