# Shop-the-Look and Complete-the-Set Sections

> Design shop-the-look and complete-the-set sections that sell a decision, not four products: five patterns, when to use them and what breaks them.

- Type: Pattern guide
- Level: Intermediate
- Reading time: About 34 minutes
- Audience: Written for store owners, builders, and designers refining high-performance ecommerce stores.
- Last updated: 2026-11-04
- Canonical page: https://academy.getzenbasket.com/patterns/shop-the-look-section/
- Part of: [Pattern library](https://academy.getzenbasket.com/patterns/) on ZenBasket Academy

---

## 1. What these sections are actually selling

A shop-the-look section is not selling four products. It is selling **a decision the shopper does not have to make.** Someone who likes a styled room but does not trust their own eye for what goes with what is buying your judgement, and the four items are how that judgement gets delivered.

That is why these sections behave differently from an ordinary product row. A related-products grid says "here are more things"; a look says "these belong together, and we are telling you so". The claim is stronger, which is what makes it more persuasive — and also why it collapses faster when one item does not belong.

Baymard's cross-sell research found that a single questionable suggestion caused test participants to lose faith in a site's recommendations generally and ignore them from then on, and that 52% of desktop sites show cart cross-sells that are irrelevant or based only on what other customers bought. In a curated look, where you have explicitly claimed the items go together, one wrong item does not just fail — it undermines the claim itself.

> **The stylist test.** Read your look out loud as a sentence a shop assistant would say: "with that chair, people usually take this lamp and this cushion." If the sentence is obviously true, the look works. If you have to say "and also this unrelated thing that was on promotion", cut it. Three items you can defend beat five you cannot.

**Scope.** This guide owns the multi-item set as a designed, purchasable unit — its layout, its add-to-cart behaviour, variants, stock and pricing. The hotspot mechanism itself is covered in Shoppable images and product hotspots. Cart-stage cross-selling is in the [Cart page guide](https://academy.getzenbasket.com/store-pages/cart-page/), related-product placement on the product page is in the [Product detail page guide](https://academy.getzenbasket.com/store-pages/product-details-page/), and industry-specific advice on outfits and routines is in the [fashion](https://academy.getzenbasket.com/industries/fashion-apparel/) and [beauty](https://academy.getzenbasket.com/industries/beauty-cosmetics/) guides.

---

---

## 2. The five patterns

These differ in how strongly they commit to the set as a unit, and in how much work the shopper has to do to buy it. Read each pattern's *fails when* line as carefully as its *wins when*.

### 2.1 The hotspot look


![hotspot look](https://bloggallery.s3.us-west-2.amazonaws.com/Zenbasket%20Docs/hotspot%20look_1791286412694.png)


*The photograph is the argument. Markers turn it into something buyable without breaking the scene.*

A styled photograph with markers on the individual products. Tapping a marker opens a small card with the item, its price and a way to add it. The classic shop-the-look, and the one most people picture.

- **Wins when:** The arrangement itself is the selling point — a room set, a styled outfit, a laid table. The photograph proves the items work together in a way a row of cut-outs never can.
- **Fails when:** The shopper has to hunt for the markers, or there are more than about five. It also fails on a phone if markers are smaller than a fingertip or the card opens off-screen — which is where most of these sections are actually used.
- **Costs you:** A real photography brief, and ongoing maintenance: every discontinued item leaves a dead marker on a page you are not looking at.

### 2.2 The image-plus-list look


![image-plus-list look](https://bloggallery.s3.us-west-2.amazonaws.com/Zenbasket%20Docs/image-plus-list%20look_1791286446892.png)


*Everything visible at once, variant choices inline. The most reliable pattern on a phone.*

The styled photograph sits beside an explicit list of the items, each with a name, price and its own add control. Everything in the look is visible at once with nothing to discover.

- **Wins when:** Items need variant choices, or you want every product in the look to be scannable without interaction. It is the most reliable pattern on mobile, because a list stacks and markers do not.
- **Fails when:** The list is long. Six rows of thumbnails beside a photograph stops being a look and becomes a product listing with a decorative header.
- **Costs you:** Some of the atmosphere. The photograph shares space instead of dominating it.

### 2.3 The set sold as one product


![set sold as one product](https://bloggallery.s3.us-west-2.amazonaws.com/Zenbasket%20Docs/set%20sold%20as%20one%20product_1791286475450.png)


*One record, one page, one price — and the sum of the parts shown beside it so the saving is checkable.*

The set has its own product record, its own page, its own price and its own reviews. The shopper buys one thing that happens to contain several.

- **Wins when:** The combination is genuinely repeatable — a starter kit, a gift set, a desk bundle, a three-piece cookware set. It is also the only pattern that gets its own URL, so it can rank, be linked to, and be reviewed as a unit.
- **Fails when:** The items need individual variant choices. A "complete bedroom" sold as one SKU is unbuyable if the shopper needs a different mattress size, and a set that quietly contains sample sizes rather than full ones turns into a refund.
- **Costs you:** Inventory complexity. The set is only in stock while every component is, and that has to be enforced rather than hoped for.

Sets built around a use case rather than a discount are covered further in the [beauty guide's section on bundles](https://academy.getzenbasket.com/industries/beauty-cosmetics/).

### 2.4 The complete-the-set row


![complete-the-set row](https://bloggallery.s3.us-west-2.amazonaws.com/Zenbasket%20Docs/complete-the-set%20row_1791286494023.png)


*Companions, not alternatives — and each row explains itself.*

On a product page, a short row showing the item being viewed plus the two or three things that finish it, with checkboxes and a running total. Contextual rather than a destination section.

- **Wins when:** The companion items are genuinely required or near-required — the cable, the filter, the stand, the shade that matches the base. Shoppers respond well to compatibility-dependent suggestions because they read as service rather than selling.
- **Fails when:** It offers alternatives instead of companions. Showing three similar chairs next to the chair someone is considering restarts the decision they were about to finish, and at checkout it can send them looking elsewhere entirely.
- **Costs you:** Page space directly below the buy area, which is expensive. Keep it below the add-to-cart block, never inside it.

### 2.5 The look gallery


![look gallery](https://bloggallery.s3.us-west-2.amazonaws.com/Zenbasket%20Docs/look%20gallery_1791286516156.png)


*Several stories at once, so a shopper who dislikes the first can still find theirs.*

Several looks presented together — a grid or slider of styled scenes, each opening into its own shoppable view. A lookbook that happens to be buyable.

- **Wins when:** You have a genuine seasonal edit and several coherent stories to tell. It also helps shoppers self-select: someone who does not like look one may like look three, where a single look gives them one chance.
- **Fails when:** The looks are indistinguishable, or there are eight of them. It also fails when opening a look costs a page load and the shopper loses their place in the gallery.
- **Costs you:** The most photography of any pattern here, and a section that dates visibly the moment the season turns.

---

---

## 3. Choosing your pattern

**Start here, then read that pattern's "fails when" line before committing.**

| If this is true | Start with | Because |
|---|---|---|
| The arrangement is the selling point, items need no variant choice | Hotspot look | The photograph proves the combination works |
| Items need sizes, shades or other variants | Image-plus-list look | Each row has space for a variant control; markers do not |
| The combination repeats and is worth its own page | Set sold as one product | Only pattern that can rank, be linked and be reviewed as a unit |
| Companions are required rather than optional | Complete-the-set row | Reads as service, not selling — and sits where the doubt is |
| A seasonal edit with several coherent stories | Look gallery | Lets shoppers self-select the story that suits them |
| You cannot say why these items belong together | Build a recommendations row instead | A curated claim you cannot defend is worse than an honest algorithmic one — see [section 5](#5-curated-or-generated) |

---

---

## 4. The transaction problem

**This is the claim in this guide most worth arguing about:** most shop-the-look sections fail at the checkout step, not the design step, and a look that cannot be bought as a look is just a decorated product row. Teams spend the budget on photography and layout, then discover at the end that the shopper still has to make four separate decisions — and nobody goes back and redesigns the section, because it looks finished.


![transaction problem](https://bloggallery.s3.us-west-2.amazonaws.com/Zenbasket%20Docs/transaction%20problem_1791286599985.png)


*The difference between a look and a decorated product row is usually one variant control.*

Three questions decide whether your section is a look or a listing.

### Can the whole set be added in one action?

If yes, the section has a reason to exist. If no — because every item needs a size or a shade — then be honest about it and design for sequence instead: show each item with its variant control inline, so the shopper makes four quick choices in one place rather than visiting four pages. That is still a real saving. What does not work is an "Add all" button that silently adds default variants, which produces returns and erodes exactly the trust the look was built on.

### What happens when one item is unavailable?


![look with a missing item](https://bloggallery.s3.us-west-2.amazonaws.com/Zenbasket%20Docs/look%20with%20a%20missing%20item_1791286708560.png)


*A look with a missing item is the normal state. Handling it in the open is what keeps the promise intact.*

A look with a missing item is the normal state, not the exception, and it is almost always handled badly. Three options, in order of preference:

1. **Substitute visibly.** Swap in the nearest equivalent and say you have done so. This keeps the look intact and is the only option that preserves the promise.
2. **Degrade gracefully.** Show the item, mark it clearly as unavailable, and let the rest of the set be added. A greyed row with a notify-me control keeps the shopper and captures demand.
3. **Retire the look.** If the missing item is the reason the look works, take it down rather than showing a broken set.

What fails: an "Add all" that partially succeeds without saying so. A shopper who thinks they bought a set and receives three of four items has been given a returns case and a support ticket.

### How is the set priced?

Three honest models, and one dishonest one.

- **No discount, just convenience.** Perfectly legitimate. The value is that you did the choosing.
- **A real set discount,** shown as the sum of the parts alongside the set price, with the saving stated plainly. In ZenBasket's [Frequently Bought Together](https://help.getzenbasket.com/products/frequently-bought-together/), discounts are set per product and apply only when every item in the set is selected — so the interface must make it obvious that deselecting one item removes the saving, or shoppers will feel the price changed on them.
- **A set-only item** — something available exclusively in the set. Strong when genuine.
- **Inflated "was" prices to manufacture a saving.** This is the dishonest one, and it is increasingly a compliance problem as well as a credibility one. Confirm the pricing display rules in each market you sell into.

---

---

## 5. Curated or generated?

Shop-the-look is **curated:** a person decided these items belong together and the store is putting its name to that. Recommendations are **generated:** a system inferred a relationship from behaviour or attributes. They look similar on the page and they are completely different products.

| | Curated looks and sets | Generated recommendations |
|---|---|---|
| Decided by | A merchandiser or stylist | Behaviour, attributes or a model |
| Claim being made | "These belong together" | "People who looked at this also looked at that" |
| Scales to | Dozens of looks | Every product in the catalogue |
| Fails by | Going stale, or one indefensible item | Blandness and irrelevance |
| Needs | Photography and editorial time | Data and tuning |

ZenBasket's Frequently Bought Together is worth understanding correctly here: despite the name, it is manually curated — you choose the products that appear rather than the system detecting purchase patterns. That makes it a set-building tool, not a recommendation engine, and it should be merchandised with the same care as a look. ([Frequently bought together](https://help.getzenbasket.com/products/frequently-bought-together/).)

Use curation where the claim is strong and the catalogue is small enough to maintain; use generation for the long tail. Most stores need both, and the mistake is using curation everywhere — twenty hand-built looks nobody updates become twenty stale sections within a season.

---

---

## 6. When this is the wrong pattern

A curated look answers one question: *what goes with this?* Two neighbouring patterns answer questions it handles badly, and both scale where curation does not.

| If the real job is… | Use | Why not a curated look |
|---|---|---|
| Covering the whole catalogue, or adapting to the individual shopper | [Ecommerce recommendations: related, complementary and personalised](https://academy.getzenbasket.com/patterns/ecommerce-recommendations/) | You cannot hand-build a look for every product. Generated rows scale, and personalisation reacts to behaviour a stylist never sees |
| Helping someone pick up where they left off | [Recently viewed product sections](https://academy.getzenbasket.com/patterns/ecommerce-recommendations/) | The shopper's own history is a stronger signal than your curation. Nothing you choose beats showing them the thing they were already considering |

A well-merchandised store runs all three on different surfaces: a curated look where the story matters, generated rows across the catalogue, and recently viewed as a safety net for anyone about to leave. Running three curated looks and nothing else leaves most of your catalogue unmerchandised.

---

---

## 7. What breaks these sections

| Failure | How it shows up | Fix |
|---|---|---|
| One indefensible item | A promoted product wedged into a look it does not belong in | Cut it. One wrong item makes shoppers discount the whole block |
| Add-all that cannot work | A button that adds default sizes, then returns | Inline variant controls per row, or drop the button and be honest |
| Silent partial failure | Three of four items added; nothing said | State plainly what was and was not added |
| Alternatives dressed as companions | Three similar chairs beside the chair being viewed | Companions complete; alternatives compete. Move alternatives lower and label them |
| Dead markers | Hotspots pointing at discontinued products | Give every look an owner and a review date; fail the marker visibly, not silently |
| Stale seasonal looks | Winter styling still live in April | Set an expiry when the look goes up, not when someone notices |
| Set price that moves | Deselecting one item silently removes the saving | Show the condition next to the total, before it changes |

---

---

## 8. Knowing whether yours works

- **Attach rate, not clicks.** Units per order and the share of orders containing two or more items from the same look. Clicks tell you the photograph was interesting; attach rate tells you the merchandising worked.
- **Multi-item conversion.** Of sessions that engaged with the look, how many bought more than one item from it. This is the number the section exists to move.
- **Add-all completion.** If you offer one, what share of presses result in everything actually reaching the cart. A gap here is the transaction problem in [section 4](#4-the-transaction-problem).
- **Return rate on set purchases versus single-item purchases.** A higher rate usually means default variants were added without a real choice.
- **Per-item click distribution.** An item nobody ever clicks is the indefensible one. Remove it and watch whether the rest improve.

### Before publishing

- [ ] Every item passes the stylist test — you can say why it belongs
- [ ] Three or four items, not six
- [ ] Variant choices are available inline, or there is no add-all button
- [ ] Out-of-stock items are shown and marked, not silently dropped
- [ ] Partial add-to-cart states are announced, never silent
- [ ] Any set saving states its condition beside the total
- [ ] "Was" prices are genuine
- [ ] Markers are at least 24×24 CSS pixels and open on-screen on a phone
- [ ] Companions, not alternatives
- [ ] The look has an owner, a review date and an expiry

---

---

## 9. Choosing a ZenBasket theme for set merchandising

Everything above is platform-independent. If you are choosing or changing a ZenBasket theme, look sections are a good test of it, because they combine three things themes often handle separately: a large image, product data bound to it, and an add-to-cart path.

### Judge a theme's look sections in five minutes

Open the theme's demo store on a phone and check six things from this guide:

1. Does the theme have a hotspot or tag section at all, or will you build it from blank?
2. Tap a marker — does the card open fully on screen, or off the edge?
3. Can an item row show a variant control, or only a name and price?
4. Is there an add-all action, and does it say what it did?
5. Does an out-of-stock item in a set render as anything other than a broken row?
6. Does the look section still look deliberate with three items rather than the demo's six?

### Where to start by store type

*Theme categories verified September 2026. Check the collection page for the current range.*

| If you sell… | Start with | Why for this pattern |
|---|---|---|
| Fashion and apparel | [FuFashia](https://help.getzenbasket.com/fufashia-theme) (free), [Trendrivo](https://help.getzenbasket.com/zenbasket-builder/trendrivo-theme/) (premium) | Outfits are the natural unit; hotspot looks reuse lookbook photography you already own |
| Furniture and interiors | [FurniRix](https://help.getzenbasket.com/furnirix-theme) (free), [elGrandeur](https://help.getzenbasket.com/zenbasket-builder/elGrandeur-theme/) (premium) | Room sets are the strongest case for a hotspot look anywhere |
| Beauty and personal care | [Glimmova](https://help.getzenbasket.com/glimmova-theme) (free), [Glowique](https://help.getzenbasket.com/zenbasket-builder/glowique-theme/) (premium) | Routines sell as sets; variant choice inside the set is the deciding factor |
| Home décor and gifting | [elGrandeur](https://help.getzenbasket.com/zenbasket-builder/elGrandeur-theme/), [Bouqiva](https://help.getzenbasket.com/zenbasket-builder/bouqiva-theme/) (premium) | Gift sets benefit most from being sold as a single product with their own page |
| Electronics and accessories | [Devicea](https://help.getzenbasket.com/devicea-theme) (free) | Complete-the-set rows work because companions are genuinely required |

Browse the range on the [ZenBasket themes collection](https://getzenbasket.com/store-themes/), where each theme has a live demo store you can open on your own phone. Free themes support every pattern here when built on a blank section; premium themes matter when you want the sections surrounding the look styled to match without rebuilding them.

You can apply a premium theme and customise it in the builder before buying it; you simply cannot publish it live until it is purchased. Note that **Replace Current Theme** swaps your existing design, layout and settings for the new theme's defaults, while **Keep Existing Theme** cancels the switch.

---

---

## 10. Building it in ZenBasket

**Step zero happens outside the builder.** If the set is going to carry a saving or appear on product pages, set it up as a [frequently bought together](https://help.getzenbasket.com/products/frequently-bought-together/) group first — you enable the plugin, pick the products explicitly, and can apply a fixed or percentage discount per item. Remember that the discount only applies when every item in the group is selected. For companion items without a set price, [related products](https://help.getzenbasket.com/products/related-products/) is the lighter-weight option.


### Pattern to element

| Pattern | How it is built |
|---|---|
| Hotspot look | The [hotspot element](https://help.getzenbasket.com/zenbasket-builder/image-hotspot) with [tag](https://help.getzenbasket.com/zenbasket-builder/tag/) markers, each bound to a product |
| Image-plus-list look | An image beside a [list element](https://help.getzenbasket.com/zenbasket-builder/list-element/) or a row of [data-driven boxes](https://help.getzenbasket.com/zenbasket-builder/data-driven-box) |
| Set sold as one product | The set as its own product record, featured with the [single product element](https://help.getzenbasket.com/zenbasket-builder/single-product/) and marked with a [product badge](https://help.getzenbasket.com/products/product-badge/) |
| Complete-the-set row | [Frequently bought together](https://help.getzenbasket.com/products/frequently-bought-together/) on the product page, or [data-driven boxes](https://help.getzenbasket.com/zenbasket-builder/data-driven-box) for a manual row |
| Look gallery | A [slider](https://help.getzenbasket.com/zenbasket-builder/slider/) of look cards, each linking to its own look section or page |

Start from [adding a new section](https://help.getzenbasket.com/zenbasket-builder/adding-new-section/) and choose a blank section. ZenBasket's own documentation describes the [tag element](https://help.getzenbasket.com/zenbasket-builder/tag/) as the way to turn a lifestyle image into a shop-the-look experience, so that is the shortest route to the first pattern.

Two builder behaviours worth knowing before you start: markers positioned in the desktop view do not reposition themselves for mobile, so check the phone layout before publishing — a marker that sits on the lamp on desktop can sit on empty wall on a phone. And deleting an element in one view does not delete it in the other.

---

---

## 11. Frequently asked questions

### What is a shop-the-look section?
A merchandising block built around a styled photograph where the individual products in the scene can be bought, usually through markers on the image or a list beside it. It sells the combination rather than the items — the shopper is buying your judgement about what goes together.

### How many items should be in a look?
Three or four. Beyond about five, markers become hard to find and the set stops reading as a coherent choice. More importantly, every extra item is another chance to include something indefensible, and Baymard found a single questionable suggestion makes shoppers distrust all of a site's recommendations.

### Should a shop-the-look section have an "Add all" button?
Only if it can actually work. If every item needs a size or a shade, an add-all button either blocks or silently adds defaults, and defaults come back as returns. In that case show each item with its variant control inline so the shopper makes four quick choices in one place — that is still a genuine saving over visiting four product pages.

### What happens if one item in the look is out of stock?
Substitute it visibly with the nearest equivalent, or show it marked unavailable with a notify-me control and let the rest be added. What fails is an add-all that partially succeeds without saying so — a shopper who thinks they bought a set and receives three of four items has a returns case and a support ticket.

### What is the difference between shop-the-look and related products?
Curation versus generation. A look is chosen by a person who is claiming these items belong together; related products are generated from behaviour or attributes. The curated claim is stronger and more persuasive, which is also why it collapses faster when one item does not fit. Most stores need both — curation where the story matters, generation for the long tail.

### Should complete-the-set items be discounted?
Not necessarily. Convenience alone is a legitimate reason to buy a set — you did the choosing. If you do discount, show the sum of the parts beside the set price and state the saving plainly. Never inflate a "was" price to manufacture one; that is a credibility problem and increasingly a compliance one.

### Where should a shop-the-look section go on the page?
On the homepage it works well below the hero and category entry points, where a shopper who has not found what they want is open to being shown a direction. On a product page, put the complete-the-set row below the add-to-cart block, never inside it — nothing should compete with the variant selector and the buy button.

### Do shop-the-look sections work on mobile?
Hotspot looks often do not, because markers sized for a cursor are hard to hit with a thumb and the card can open off-screen. Target at least 24 by 24 CSS pixels, and check that markers still sit on the right products after the image reflows — a marker on the lamp on desktop can land on empty wall on a phone. The image-plus-list pattern is the safer mobile choice.

### Should I show alternatives alongside a look?
Not in the same block. Companions complete a purchase; alternatives restart the decision. Baymard's research found suggesting alternatives late in the journey can send shoppers off to compare elsewhere. Put substitutes lower down, clearly labelled as similar options.

### How often should looks be refreshed?
Give every look an expiry date when you publish it rather than when someone notices it is old. Seasonal looks should come down when the season does, and any look containing a discontinued product should fail visibly rather than leaving a dead marker on the page.

### Is "frequently bought together" the same as a recommendation engine?
In ZenBasket, no. Despite the name, the feature is manually curated — you choose which products appear rather than the system detecting purchase patterns. That makes it a set-building tool that deserves the same merchandising care as a styled look, and it means the quality of the pairing is entirely your responsibility.

### How do I measure whether a shop-the-look section works?
By attach rate rather than clicks: units per order, and the share of orders containing two or more items from the same look. Also watch add-all completion, and compare return rates on set purchases against single items — a higher rate usually means default variants were added without a real choice.

---

---

## 12. Where to go next

- [Ecommerce recommendations: related, complementary and personalised](https://academy.getzenbasket.com/patterns/ecommerce-recommendations/) — what to do across the whole catalogue
- [Recently viewed product sections](https://academy.getzenbasket.com/patterns/ecommerce-recommendations/) — the shopper's own history as a merchandising signal
- Shoppable images and product hotspots — the marker mechanism in detail
- [Cart page guide](https://academy.getzenbasket.com/store-pages/cart-page/) — cross-selling at the cart, and where to stop
- [Product detail page guide](https://academy.getzenbasket.com/store-pages/product-details-page/) — where companion rows sit on the page
- [Fashion & apparel guide](https://academy.getzenbasket.com/industries/fashion-apparel/) — outfits, lookbooks and accessory attach

---