# 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](https://help.fluorescent.co/stiletto/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/stiletto/general/adapting-your-theme/dynamic-content-with-metafields)
{% 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](https://help.fluorescent.co/stiletto/sections/using-sections#section-padding) | [Top divider](https://help.fluorescent.co/stiletto/sections/using-sections#section-top-divider) | [Animation](https://help.fluorescent.co/stiletto/sections/using-sections#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).

   ![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-b07c1c046c9b84e54c0a68287dde69a8fec07224%2Fshopify-files.jpeg?alt=media)
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.

   ![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-6f3a83051762c666a182acfecdd53269ed7141af%2Fshopify-files-link.jpeg?alt=media)

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.

   ![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-274126cc29126e394eb8011f10c018251e71a559%2Fvideo-link.jpeg?alt=media)
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](https://help.fluorescent.co/stiletto/sections/theme-sections/shoppable-image)\
> [Shoppable image editorial](https://help.fluorescent.co/stiletto/sections/theme-sections/shoppable-image-editorial)