Complete the look
ProProductv1.0.0
Raise order value right where shoppers decide. Below the product, show what goes with it: by default Shopify's own recommendations, starting with the complementary products you set in the Search & Discovery app, or products you pick by hand. Every row has a tick box and its own option picker, the total updates as shoppers choose, and one button adds the ticked products together through your theme's cart. An image of the whole look can sit beside the list. Works on product pages with the page's product, or anywhere else with a product you choose.
Good for: Frequently bought together · Outfits and room sets · Accessories and refills with the main product
When to use it
Use it below the product information on your product pages, or on a home or landing page built around one product.
- The rest of the outfit or room in one place. The product sits at the top of a list with up to four products that go with it, such as accessories, refills or matching pieces.
- Shoppers choose what they want. Each row has a tick box and its own option picker, and the total updates as they tick, untick and change options.
- One click for the set. Add selected to cart adds every ticked product together through your theme’s cart.
Set it up
Add the section
On your product template, choose Add section and pick SU: Complete the look. On a product page it uses that page’s product, shown first as This item. Anywhere else, pick one in Main product.
Choose where the other products come from
Under Products that go with it, choose:
- Shopify recommendations: the complementary products you set for each product in Shopify’s free Search & Discovery app. When a product has none, Shopify’s related products show instead. Set how many with Number of recommendations (1 to 4).
- Picked by hand: the products you choose in Products, up to four. The same products show with every main product, so this suits a single-product page best.
Set up complementary products
For recommendations that really match, install Shopify’s free Search & Discovery app and add complementary products to each product you sell under its recommendations. Without them, the section relies on Shopify’s related products, which are picked automatically.
Decide what starts ticked
With Tick every product to start on, every product in the list starts ticked, so the total shows the full set. Turn it off to let shoppers tick only what they want. The main product always starts ticked.
Add an image of the look
Under Image, Show an image beside the products places a picture next to the list. Pick a photo of the whole outfit or room in Image of the look; without one, the main product’s image is used.
Set the button
Under Buying, change Button label if you like, and under After adding to cart choose Open the cart or Stay on the page.
On a product page, shoppers pick the main product’s options inside this section. A choice made in your theme’s product form above doesn’t carry over, and the other way round.
Try it
Settings
In the theme editor, in the order you'll see them. Every section also has the heading and style settings.
Products
| Setting | What it does |
|---|---|
| Main productProduct | Leave empty on product pages to use the page's product. |
| Products that go with itDropdown | Recommendations use the complementary products you set in the Search & Discovery app, then Shopify's related products. |
| ProductsProducts (up to 4) | Used when Products that go with it is Picked by hand. |
| Number of recommendationsSlider (1–4) | |
| Tick every product to startCheckbox |
Image
| Setting | What it does |
|---|---|
| Show an image beside the productsCheckbox | |
| Image of the lookImage | Leave empty to use the main product's image. |
Good to know
- Recommendations come from Shopify: set complementary products in the free Search & Discovery app for the best matches; otherwise Shopify's related products show.
- Up to 4 products besides the main one.
- On product pages the main product's options are picked in the section, separately from the theme's product form.
- Without JavaScript the products show with links to their pages; recommendations and adding several at once need JavaScript.
Changelog
- 1.0.0: Initial release.