Fluorescent
Stiletto
Stiletto
  • Stiletto Help Center
    • Start using Stiletto
      • Theme licenses
      • Migrate your theme
    • FAQs
    • Video tutorials
    • Changelog
  • General
    • Editing themes
      • Adding sections
      • Using templates
      • Accessibility
      • Customizing your site
      • SEO for Shopify themes
      • H1 heading tags
      • Online store speed
    • Image guide
      • Web ready photography
      • Image sizes
      • File formats
      • Theme image settings
    • Adapting theme content
      • Edit default theme content
      • Multiple languages
      • Dynamic content with metafields
      • Unique content for markets
    • Update your theme
  • Theme styles
    • Theme settings
    • Style presets
      • Demo layouts
    • Fonts
    • Colors
    • Animation
  • Pages
    • Templates
      • About page
      • Blog page
      • Blog posts
      • Collections list
      • Contact page
      • Customer accounts
      • FAQ page
      • Lookbook
      • Password page
      • Search page
      • Store locations
      • 404 page
      • Home page
    • Announcement bar
    • Header
      • Layout and style
      • Logo
      • Transparent header
      • Mega menus
      • Mobile menu
      • Quick search
      • Language and currency
      • Social media icons
      • Customer account icon
    • Footer
      • Links block
      • Newsletter block
      • Text and image block
      • Language and currency
      • Payment icons
      • Custom Liquid
  • Sections
    • Theme sections
      • Using sections
      • Content blocks
      • Blog posts
      • Collapsible row list
      • Collection list grid
      • Collection list slider
      • Complete the look
      • Contact form
      • Countdown banner
      • Countdown bar
      • Events
      • Featured collection grid
      • Featured collection slider
      • Featured product
      • Gallery carousel
      • Grid
      • Image compare
      • Image hero
      • Image hero split
      • Image with text
      • Image with text split
      • Multi column
      • Newsletter
      • Newsletter compact
      • Promotion banner
      • Promotion bar
      • Quotes
      • Recently viewed products
      • Rich text
      • Sales banner
      • Scrolling content
      • Shoppable image
      • Shoppable image editorial
      • Slideshow
      • Testimonials
      • Video
      • Video hero
      • Video with text
    • Popups
      • Sign up popup
      • Age verification
      • Countdown popup
      • Promotional popup
  • Products
    • Product listings
      • Product card style
    • Prices and discounts
    • Product badges
    • Quick shop
  • Product pages
    • Product template
      • Alternate templates
      • Pre-order template
      • Gift card
    • Layout and style
      • Product tabs
      • Media gallery
      • Sticky product details
      • Breadcrumbs
      • Navigation buttons
    • Overview blocks
      • Default blocks
        • Description
        • Product header
        • Variant selector
        • Quantity selector
        • Buy buttons
        • Local pickup banner
        • Share icons
        • Sticky add-to-cart bar
      • Collapsible rows block
      • Complementary products
      • Custom options
      • Image block
      • Information popup
      • Product labels
      • Secure payment
      • Stock level indicator
      • Text block
      • Text list with icons
      • App blocks
    • Variant options
      • Variant chips
      • Variant swatches
        • Enable swatches
        • Use default colors
        • Use custom colors
        • Use variant images
        • Use custom images
        • Change swatch styles
        • Show on product cards
        • Dynamic option availability
      • Media grouping
      • Sibling product swatches
    • Product page sections
      • Product reviews
      • Product recommendations
  • Collection pages
    • Collection template
      • Collection landing
      • Sale collection
      • Subcollections
      • Flash sale
    • Banner
    • Product grid
    • Filters and sorting
  • Cart
    • Cart page
    • Quick cart
      • Added to cart popup
      • Empty cart promotion
    • Free shipping bar
    • Low inventory warning
    • Cross sells
  • Support
    • Support policy
    • Shopify vs Theme issues
    • Store access requests
  • For developers
    • Custom CSS
    • Custom fonts
    • Custom Liquid
    • Custom JavaScript events
    • Edit Theme JavaScript
Powered by GitBook
On this page
  • Set up section
  • Add large media
  • Add autoplay video
  • Add product card blocks
  • Section header

Was this helpful?

  1. Sections
  2. Theme sections

Complete the look

Last updated 1 month ago

Was this helpful?

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 or

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: | |

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. Click the Upload files button to add your .mp4 file from your computer.

  2. 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.


Related links

Go to Content > Files to open your .

Shopify files ↗
Shoppable image
Shoppable image editorial
insert dynamic content with metafields
create new templates
Padding
Top divider
Animation