A Complete The Look widget shows shoppers a short set of products that go with what they are buying, such as the chinos that pair with a sweatshirt, so they can add the rest of the outfit in one place. This guide builds a Complete The Look widget on your product page or inside Rebuy's Smart Cart, and narrows its layout to two or three products shown one row at a time.
You build a Complete The Look widget in the Rebuy admin. A product page Complete The Look widget is created under Cart & Merchandising > Widgets, and a Smart Cart Complete The Look widget is added as a component under Cart & Merchandising > Smart Cart.
This guide covers only what makes a widget a Complete The Look widget. For every other setting, see How to Create a Product Page Cross-Sell Widget for the product page and How to Create an Embedded Cart Cross-Sell Widget for the Smart Cart.
Choose where the look appears and how shoppers add it
A Complete The Look widget can sit on the product page or inside the Smart Cart, and where it sits decides which widget type you build and how shoppers add the look. The table below lists each option with where it appears, how the shopper adds the look, and when to choose it.
Widget type | Where it appears | How the shopper adds the look | Choose it when |
Product Cross-Sell | Product page | Each recommended product has its own Add to Cart button | Shoppers should pick the pieces that go with the product they are viewing, one at a time |
Cart cross-sell widget (the Smart Cart Cross-Sell Widget component) | Inside the Smart Cart | Each recommended product has its own add button | Shoppers should see pieces that go with everything already in their cart |
Dynamic Bundle | Product page | Every product starts selected, including the one on the page, and the widget's single Add to Cart button adds everything still selected | Shoppers should add the product and its whole look in one click |
To build a Complete The Look section as a Dynamic Bundle, follow How To Create A Dynamic Bundle Widget instead of this guide.
Create a Complete The Look widget for the product page
A product page Complete The Look widget starts from the AI Recommended card on the Create New Widget page, which builds a Product Cross-Sell widget for the product page. There is no card named Complete The Look, so Complete The Look is the name you give the widget yourself. Any other card that builds a Product Cross-Sell widget for the product page, such as Top Sellers or Custom Widget, works too, since those cards differ only in the Data Source they start with.
In the Rebuy admin sidebar, click Cart & Merchandising and then Widgets. On some plans the sidebar shows a single Merchandising Widgets entry instead, which opens the same Widgets page.
Click Create New. If this is your store's first widget, the button reads Create Your First Widget instead.
Set the Location dropdown above the widget cards to Product Page, then find the AI Recommended card. Pick the card named AI Recommended, not AI Recommended (Cart Flyout) or AI Recommended (Full Page), which build cart widgets.
Click Create on the AI Recommended card.
When Rebuy asks you to choose a location, select Product Page and click Continue.
In the widget editor, click the pencil icon next to the widget name in the top bar and rename the widget Complete The Look, so you can find it later in the Your Widgets table.
Create a Complete The Look widget in the Smart Cart
A Smart Cart Complete The Look widget is a cart cross-sell widget added through the Cross-Sell Widget component in the Smart Cart editor, and the component is what places it in the cart. A new Smart Cart already includes a Cross-Sell Widget component, so you can turn its widget into your Complete The Look widget instead of adding another one.
In the Rebuy admin, open Cart & Merchandising > Smart Cart, then open the Smart Cart you want to edit.
Click Add + in the section where the Complete The Look widget should appear. On a single-column cart this is usually the Body section, and on a double-column cart you can also use the Cross-Sells section.
Select Cross-Sell Widget from the component list.
Create a new widget and name it Complete The Look, or select an existing cart widget from the list.
Drag the component to where the Complete The Look widget should appear in the cart.
Save your Smart Cart settings.
Set up the Data Source that builds the look
The Data Source decides which products a Complete The Look widget shows, and what it starts from depends on where the widget sits. A product page Complete The Look widget uses the product the shopper is viewing as its input. A Smart Cart Complete The Look widget uses every product in the cart as its input, and refreshes its products each time the cart changes.
To connect a Data Source, find the DATA SOURCE section in the Complete The Look widget's editor. Click Create new data source to build new rules, or click Edit to open the Data Source already connected, then save the Data Source and click Save in the widget editor. Each rule has an IF line that decides when the rule applies and a RETURN line that decides which products it shows. How To Configure And Apply Data Sources covers the Data Source editor in full.
Set Max Number of Products displayed, in the same DATA SOURCE section, to 2 or 3. A Complete The Look section reads best as a short set, and this setting is the most products the widget shows, whatever the layout or rules.
The ways to set up a Complete The Look Data Source are described below, from no setup at all to a look you pick by hand for every product.
Let AI Recommended pick the look from your order history
A product page Complete The Look widget created from the AI Recommended card already returns products that customers also bought, based on the product being viewed, and a new Smart Cart cross-sell widget already returns AI recommendations based on the cart's contents, with no rules to write. This works well when your order history already pairs the items you want shown together, and it is the quickest way to get a Complete The Look widget live.
Pair one collection with another using Collection rules
A Collection rule builds a Complete The Look widget from your existing Shopify collections, such as showing bottoms whenever the shopper is looking at a top. Set the rule up as follows:
Set IF to Collection, choose the collection the shopper starts from, such as Tops, and set the operator to Contains Any. The rule applies when the product being viewed, or any product in the cart, is in that collection.
Set RETURN to Collection and choose the collection to recommend from, such as Bottoms.
Set SORT BY to Smart Sort to put the products most often bought together with the starting product first.
Add another rule for each pairing you want, such as Bottoms to Shoes.
Pair tagged products using Product Tags rules
A Product Tags rule builds a Complete The Look widget from Shopify product tags, which works well when your catalog is tagged by category or by outfit. Set the rule up as follows:
Set IF to Product Tags, set the operator to Contains Any, and enter the tag the shopper starts from, such as shirts. The rule applies when the product being viewed, or any product in the cart, carries that tag. Tag matching ignores capitalization.
Set RETURN to Products with Tags, set the operator to Contains, and enter the tag to recommend from, such as pants.
Set SORT BY to Smart Sort to put the products most often bought together with the starting product first.
Tags also let you build a look across collections, such as tagging every piece of a seasonal outfit with the same tag and returning that tag for each piece.
Hand-pick each product's look using a Products In Metafield rule
A Products In Metafield rule shows the exact products you choose for each product, such as the belt, pants, and shoes styled with one specific shirt. You list those products in a product metafield in Shopify, and the Complete The Look widget returns that list.
In Shopify, create a product metafield of type List with Product as the content type, and turn on Storefront API access for it. Note its namespace and key, such as custom.complete_the_look.
On each product, open the metafield and select the products that complete its look.
In the Data Source, set IF to the products the rule applies to, such as Collection clothes Contains Any.
Set RETURN to Products In Metafield and choose your metafield, such as custom.complete_the_look, from the dropdown.
A product with no products selected in the metafield gives the rule nothing to return. The full setup, including clearing the cache after you fill in the metafield, is in the Products in Metafield Data Source Rule section of Metafield Data Source Rules.
Keep the Complete The Look widget from coming up empty
A Complete The Look widget hides itself whenever its Data Source returns no products, which can happen when a product is in none of your rule's collections, carries none of its tags, or has an empty metafield. To keep the widget showing, add a last rule below your Complete The Look rules that returns an AI recommendation endpoint, such as Recommended AI. Rules add their products in order from top to bottom, so the last rule only fills the slots your Complete The Look rules leave open, up to Max Number of Products displayed. Leave Exit If Matched off on the rules above it, since a matched rule with Exit If Matched on stops every rule after it from running.
Lay out the products one row at a time
The Complete The Look layout comes from the Screens settings under Widget settings, which hold one card per screen size: Large Screen, Medium Screen, and Small Screen. The same Screens settings appear for a product page widget and a Smart Cart cross-sell widget. Each card has its own copy of every setting, so make the same changes on each card or the widget keeps its default layout on the screen sizes you skip.
In the widget editor, open Widget settings and expand Screens.
On each screen size card, set Display Style to Line. Line places each product's image beside its title, price, and options.
On each screen size card, set Grid Columns to 1.
Choose how shoppers move through the look:
Leave Carousel on to show one product at a time, with arrows to move to the next one, as in the example at the top of this guide. Show Paginations adds dots below the product when Carousel is on.
Turn Carousel off to stack every product in the look one under another.
Click Save.
Write the Complete The Look heading
The heading shoppers see above the Complete The Look widget is the Title on the widget's Language tab. A product page widget created from the AI Recommended card and a new Smart Cart cross-sell widget both open with the heading You may also like, so change it to match the look.
In the widget editor, open Language.
Under General, set Title to the heading you want, such as Complete the look, Wear it with, or Style it with.
Click Save.
Show color swatches in the Complete The Look widget
A Complete The Look widget can show each recommended product's colors as swatches and its sizes as buttons, so shoppers pick the variant before adding it, as in the example at the top of this guide.
In the widget editor, open Widget settings and expand Variant Selector.
Confirm Enable Variant Selector is checked. It is on unless you turn it off.
Set Variant Selector Type to Buttons.
Click Save.
Swatches and buttons appear only for Shopify product options named "Color", "Colour", or "Size". Each color swatch fills with the color its variant name describes, which works for standard color names such as Red or Black. For color names that are not standard colors, such as Sand, upload a swatch image for each color to your Shopify theme's assets folder, named with the color- prefix and the variant name, such as color-sand.png.
The widget editor preview may not show swatch images, so check them in Rebuy Preview Mode or on your storefront. The file naming, caching, and troubleshooting steps are in How to Set Up Widget Variant Image Buttons (Color Swatches) in Rebuy.
Match the Complete The Look widget to your store
The Display tab of the widget editor controls how the Complete The Look widget looks, and its Theme menu decides where the colors come from. With your store's Rebuy theme selected, the widget uses that theme's colors. Set Theme to Custom to show the Styles group of color and button settings, such as Button Background, Button Radius, and the Carousel Control colors. Custom starts from Rebuy's default colors rather than your theme's, so set each color you want to match.
For changes the color settings do not cover, such as the widget's width or spacing, add CSS in the CSS box under Theme on the Display tab. The CSS box works with any Theme selection. Start each selector with your widget's ID, such as #rebuy-widget-295945, so the styling applies only to this widget. The widget ID is shown in the top bar of the widget editor.
For selectors and examples for every part of a Rebuy widget, see Enhance Widget Styling Using Custom CSS Code.
Put the Complete The Look widget live on your product page
A product page Complete The Look widget shows on your product page only after it is installed in your Shopify theme, the same as any Product Cross-Sell widget. On an Online Store 2.0 theme, you install it by adding the Rebuy Widget app block to your product page template in Shopify's theme editor:
In Shopify, go to Online Store > Themes and click Customize on your theme.
Open your product page template, such as Default product.
In the product information section, click Add block and choose Rebuy Widget.
In Widget ID, enter the Complete The Look widget's ID, which is shown in the top bar of the Rebuy widget editor.
Keep Enable Product ID on, so the Complete The Look widget returns the look for the product being viewed.
Drag the Rebuy Widget block to where the look should appear on the page, such as above the product description.
Click Save.
For a vintage (1.0) theme, or for the installation guide specific to this widget, click INSTALL in the top bar of the Rebuy widget editor. The app block method is covered in full in Installing Rebuy Widgets via App Blocks in 2.0 Themes.
To check a product page Complete The Look widget before shoppers see it, turn Live Mode off, test it on a product page in Rebuy Preview Mode on both a phone and a desktop, then turn Live Mode back on and click Save. The full test steps are in How to Create a Product Page Cross-Sell Widget.
Put the Complete The Look widget live in the Smart Cart
A Smart Cart Complete The Look widget needs no Shopify theme install, no app block, and no code in your theme, because the Smart Cart places the widget itself once the Cross-Sell Widget component is saved. The Smart Cart Complete The Look widget still follows the widget's Live Mode setting, so it shows to shoppers only while Live Mode is on.
To check a Smart Cart Complete The Look widget before shoppers see it, turn Live Mode off and open your storefront in Rebuy Preview Mode, which shows the widget in the cart for you only. Preview Mode does not show a Cross-Sell Widget component hidden with the eye icon in the Smart Cart editor, so make sure the component is visible before testing. When you are happy with the Complete The Look widget, turn Live Mode back on and click Save. The full test steps are in How to Create an Embedded Cart Cross-Sell Widget.