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

Editing a template changes all pages that use that template. To edit specific pages, you can create new templates or insert dynamic content with metafields

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 | Top divider | Animation

Add large media

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

Click Complete the look section to find settings

Setting
Description

Image

Select or upload a feature image that shows selection of your products together.

Media position

Display the feature image on the Left or Right side of the section.

Image aspect ratio

Crop the shape of the image or video to Square, Landscape, or Portrait. Choose Natural to display the original image shape.

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.

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.

STEPS (v3.0.0 or later)

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.

STEPS (v2.4.0 or earlier)

In your Shopify admin:

  1. Go to Content > Files to open your Shopify files ↗.

  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.

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.

  3. Click Save.

For autoplay videos, make sure your video files meet the following requirements:

Video file type

.mp4 or .mov Embedded YouTube or Vimeo videos are not supported.

Video length

< 20 seconds (Recommended)

Video size

< 10MB (Recommended)

Click Complete the look section to find settings

Setting
Description

Shopify video

Select or upload a video that autoplays (without sound).

Loop video

Choose to play your short video continuously.

Show video controls

Choose to show buttons to let the customers pause, enlarge, or adjust the volume.

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

Setting
Description

Select product

Choose a product to display with its title, price, and a quick view button. Add multiple products that are shown in your feature image.

Custom product image

Select or upload an image to replace the default product image.

Image size

In the section settings, set the size of the product images to Small, Medium, or Large.

Section header

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

Click Complete the look section to find settings

Setting
Description

Heading

Change or remove the title of the section.

Heading tag

Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. This option doesn't change the heading's appearance.

Heading size

Set the heading text to Small, Medium, or Large.

Subheading

Add multiple lines of rich text below the heading.

Button link

Select or paste a URL for the button.

Button label

Enter text to display as the button label. Leave this field blank to remove the button.

Button style

Select a button style: either Solid, Outline, or Text.

Section style

Adjust the overall section style by changing the Padding around the section content, and add an optional Top divider to clearly separate sections.

STEPS

In your theme editor (Customize):

  1. Click on the Collapsible row list section to open the settings.

  2. Choose to Enable animation to show visual effects when scrolling, hovering, or interacting with the section.

    Learn more about Section animations in Stiletto.

  3. Choose to display a Top divider that separates sections with a Solid line.

    The Top divider uses the color of Lines and borders set in the Theme settings.

  4. Select a Padding option to change the spacing between sections. Choose between Top and bottom, Top only, Bottom only, or set it to None.

  5. Set the Content width to display the section at Full width or use the slider to set a custom width between 400 - 1000 pixels.

  6. Click Save.

Setting
Description

Enable animation

Choose whether to display visual effects when scrolling, hovering, or interacting with the section. See the Animation guide to learn more.

Top divider

Show a solid border above the section to visually separate it from other sections. The Top divider uses the Lines and borders color selected in the theme color settings.

Padding

Add a margin of space around the section to either the Top and bottom, Top only, Bottom only, or set it to None.

Related links

Shoppable image Shoppable image editorial

Last updated

Was this helpful?