Introducing Stiletto - the essential Shopify theme to fuel your ecommerce growth. Learn more.

Complete the Look

Use the Complete the look section to promote multiple products that go well together. Display a large image or video that feature your products together and display those products so customers buy them.

Set up section

Add this section to any template (except Checkout) and re-order its position. You can use this section multiple times on the same page with different content and settings.

Note: New sections will appear on all pages that use the same template. To add sections to specific pages only, learn how to create and assign multiple templates.

Steps

In your theme editor (Customize):

  1. Select a Template to edit from the dropdown menu in the top bar.

  2. In the side panel, click (+) Add section and select Complete the look.

  3. Change the order of your sections by using the drag and drop handles ⋮⋮

Add large image

Upload a single image or video that features the products in your 'Complete the look' set. Alternatively, you can upload and display a large video

Steps

In your theme editor (Customize):

  1. Click on the Complete the look section to open the section settings.

  2. Under Image, use the Select image button to add a section image.

    There are no required image dimensions but we recommend uploading an image with a minimum width of 2048px for optimal quality.

  3. Select a Media position to display the image on the Left or Ride side of the section, opposite the featured products.

  4. Select an Image aspect ratio to crop your image to Square, Landscape, or Portrait.

    The Natural setting displays the original shape of your image.

    Example of aspect ratio shapes: Square, Landscape, and Portrait
    Example of aspect ratio shapes: Square, Landscape, and Portrait
  5. Click Save.

Add large video

Instead of a large feature image, you can add an autoplay video.

The Video requires an .mp4 that's been uploaded to your Shopify Files.

This feature is best for short videos. We strongly recommend using a video that's around 10 seconds long or less and that's under 10MB in size.

1. Upload video to Shopify files

In your Shopify Admin:

  1. Go to Settings > Files to open your [Shopify Files][files].

    Shopify files in admin dashboard
    Shopify files in admin dashboard
  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.

    Note: you may need to refresh the page for your file to appear.

    Shopify files copy link button
    Shopify files copy link button

In your theme editor (Customize):

  1. Click on the Complete the look section to open the section settings.

  2. Paste the link into the Video URL field. Click on the the link that appears in the results above.

    Direct link in the Video link field
    Direct link in the Video link field

    If you haven't already, go to Settings > Files and click the Link icon next to your video file to copy the URL.

  3. Click Save.

3. Edit video options

Once you've added your video, change the Shape (Aspect ratio) and Position of your video. You can also choose whether to Loop video and Show video controls.

Steps

  1. Uncheck the Loop video option so the video stops after playing through once.

  2. Check the Show video controls options to let the customers pause, enlarge, or adjust the volume.

  3. Select a Media position to display the video on the Left or Ride side of the section, opposite the featured products.

  4. Select an Image aspect ratio to crop your video shape to Square, Landscape, or Portrait.

    The Natural setting displays the original shape of your video.

    Example of aspect ratio shapes: Square, Landscape, and Portrait
    Example of aspect ratio shapes: Square, Landscape, and Portrait
  5. Click Save.

Add product card blocks

Display individual product cards for each product in your 'Complete the look' set. Add up to 4 products and customize their Shape (Aspect ratio) and Size.

Steps

In your theme editor (Customize):

  1. Under the Complete the look section, click on a Product block to open the settings. (+) Add Product to add up to 3 product blocks.

    Click Remove block or the eye icon to delete or hide a block.

    You can add a maximum of 4 product blocks.

  2. Click on each product block to open the block settings.

  3. Use the Select product button to find and choose a product in your 'Complete the look' set.

  4. (Optional.) Under Custom product image, click Select image to replace the default image of your product.

  5. (Optional.) Click and hold the drag handles ⋮⋮ to rearrange the blocks:

  6. Click Save.

Product card styles

Change the Shape (Aspect ratio) of the product images and their Size.

  1. Click on the Complete the look section to open the settings.

  2. Under Product cards, set the Image size for your selected products to Small, Medium, or Large.

  3. Click Save.

Add section headings

Change the Heading and Subheading text that display above the section.

Steps

In your theme editor (Customize):

  1. Click on the Complete the look section to open the settings.

  2. Enter Heading text to display as a title at the top of the section.

    We recommended one to three words.

    Delete the text in this field to remove the heading.

  3. Enter Subheading text to display beneath the heading.

    We recommend two to three short sentences.

    Use the formatting buttons to add bold, italic, or linked text.

  4. Click Save.

Add button

Add a Button block to link to your collections or products or any other page with a custom label.

Steps

In your theme editor (Customize):

  1. Click on the Complete the look section to open the settings.

  2. Select or paste a URL for the Button link.

  3. Enter text for the Button label.

    The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, read "What is a Call to Action?"

  4. Select a Button style: either Solid, Outline, or Text.

    The button uses the theme-wide button color set in the Theme settings.

  5. Click Save.

Section style

Add an optional Top divider to clearly separate sections.

Steps

  1. Click on the Complete the look section and scroll down to the Section style settings.

  2. Choose whether 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 Lines and borders color selected in the Theme Settings.

  4. Select a Padding option to add space around the section to either the Top and bottom, Top only, Bottom only, or set it to None.

  5. Click Save.

Section settings

Click on the Complete the look section to find the following settings:

Configuration Settings

Image

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

Video URL

Add the direct link to your .mp4 file uploaded to your Shopify Files.

Click the Link icon next to your video file to copy the URL.

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.

Media position

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

Image aspect ratio

Crop the shape of your feature image to Square, Landscape, or Portrait.

Choose Natural to display the original image shape.

Heading

Enter text to display a title in the top-left corner of the section.

Subheading

Enter text to display a section subheading below the heading.

Use the formatting buttons to add bold, italic, or linked text.

Select or paste a URL for the button.

Button label

Enter text to display a button label.

Leave this field blank to remove the button.

Button style

Use a Solid, Outline or Text style for the section button.

The button uses the theme-wide button color set in the Theme settings.

Product image size

Set the Image size of your selected products to Small, Medium, or Large.

Section style settings

Click on the Complete the look section to find the following section style settings:

Configuration Settings

Enable animation

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

Learn more about Section animations in Stiletto.

Top divider

Display a Solid line above the section to separate it from the above section.

Padding

Add spacing around the section to either the Top and bottom, Top only, Bottom only, or set it to None.

Block settings

Click on a Product block to find the following settings:

Configuration Settings

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.

Contact

🇨🇦 Fluorescent Design Inc.

Send us a message
  • Toronto OfficeMonday to Friday, 10am to 6pm ET
  • Victoria (B.C.) OfficeMonday to Friday, 10am to 6pm PT
  • Average Response Time~1 Business Day
* Excludes statutory holidays. All offices closed to the public.