Complete the look sells an outfit together. It lists up to six products, each with its own size or variant picker and a checkbox. Customers untick what they don't want, watch the total update, and add everything that is left to the cart with one button.
The section can show the same products everywhere, or a different look on every product page. Products that are sold out are listed but can't be selected. When there are no products to show, the section is hidden from customers.
Where to find it
The default product template already includes Complete the look, below the product information, set up to read each product's own look from a metafield. Until a product has a look, the section stays hidden on its page.
You can also add it to the home page or any other page: in the theme editor, click Add section and choose Complete the look.
Two ways to choose the products
Product source decides where the products come from:
- Pick products: you choose the products in the section's Products setting. Every page that shows the section shows the same look. Use this on the home page or a landing page.
- From product metafield: each product carries its own list of products, and the section shows the list of the product being viewed. Use this on product pages.
Set up a look for each product
This takes a few minutes once, then a moment per product.
1. Create the metafield
- In your Shopify admin, go to Settings > Metafields and metaobjects.
- Click Products, then Add definition.
- In Name, type Complete the look. Shopify fills in the namespace and key as
custom.complete_the_look. Leave it as it is. - Click Select type and choose Product.
- Change One to List, so the metafield holds a list of products.
- Click Save.
Choose List before you save. A metafield's type can't be changed after it is saved. If you save it as a single product, delete the definition and create it again.
2. Add a look to a product
- Go to Products and open a product.
- Scroll down to Metafields and click Complete the look.
- Select the products that go with it, up to six, and save the product.
3. Check the section
- In the theme editor, open Products > Default product and select Complete the look.
- Check that Product source is From product metafield and that Metafield reads
custom.complete_the_look. Both are already set on the default product template. - Preview the product you added a look to. The section appears with those products.
If you gave your metafield another name, type its namespace and key into Metafield, in the form namespace.key.
Layout options
- List beside image: a lifestyle photo on one side, and the products in a list beside it, one per row. Best when you have a photo of the whole outfit.
- Horizontal row: no lifestyle photo. On desktop the products sit side by side, with the total and the button at the end.
Section settings
Select the section in the theme editor to see these settings, in this order.
| Setting | Options | What it does |
|---|---|---|
| Product source | Pick products or From product metafield. Default: Pick products. | Where the products come from: picked here, or read from the product being viewed. |
| Products | Products. | The products to show, used with Pick products. The first 6 are shown. |
| Metafield | Text. | The namespace and key of the product metafield to read, used with From product metafield. The metafield must be of the type List of products. |
| Layout | List beside image or Horizontal row. Default: List beside image. | A list beside a lifestyle photo, or a row of products. |
| Lifestyle image | Image. | The photo shown with the List beside image layout. Set its focal point to keep the subject in view. |
| Eyebrow | Text. | A short label above the heading, such as "New in". With Number sections on in theme settings, the section's number is shown before it. |
| Heading | Text. | The section's heading. Select a word and make it italic for emphasis. Leave it empty to show no heading. |
| Heading size | Small, Medium, Large or Extra large. Default: Medium. | How large the heading is set. |
| Text alignment | Left or Center. Default: Left. | Aligns the eyebrow and heading to the left or the center. |
| Color scheme | Color scheme. | Which of your color schemes the section uses. Schemes are edited in theme settings under Colors. |
| Background image | ||
| Image | Image. | An optional image behind the whole section, cropped around its focal point. Text keeps the color scheme's text color, so darken or lighten the image with the overlay until everything reads clearly. |
| Overlay color | Color. Default: #000000. | The color laid over the background image. |
| Overlay opacity | 0% to 90%. Default: 40%. | How strong the overlay is. 0% shows the image untouched. |
| Section spacing | ||
| Top spacing | None, Small, Medium or Large. Default: Medium. | The space above the section, as a share of Space between sections in theme settings. None lets the section touch the one above it. |
| Bottom spacing | None, Small, Medium or Large. Default: Medium. | The space below the section. None lets it touch the one below. |
Image sizes
| Image | Recommended | Notes |
|---|---|---|
| Lifestyle image | 2000 x 2500 px (4:5 portrait) | Cropped around its focal point. Used by the List beside image layout only. |
| Product images | As set for your products | Each product is shown with its first image. |
Upload JPG or PNG files. Shopify resizes and compresses each image for the customer's screen, so there is no need to make smaller copies yourself.
Tips
- Three or four products make a believable outfit. Six is the limit.
- Leave the product being viewed out of its own look; the customer is already buying it above.
- A product in the look with several options, such as size and color, gets one dropdown for each.
- With From product metafield, the section shows nothing on the home page, because there is no product to read from. Use Pick products there.