Complete the Look
.png)
Complete the Look is designed to increase your average order value by suggesting a small set of complementary products that match the current item. Instead of leaving customers to browse on their own, this section helps them quickly build a full outfit by adding 2–3 recommended items (for example: a top + skirt + bag, or a dress + shoes + accessories).
This is a simple but effective upsell feature:
- Encourages customers to buy matching items together
- Makes outfit building effortless
- Reduces decision fatigue and increases conversion
How to set it up (Shopify Admin → Product Metafields)
To control which products appear in Complete the Look, you will assign recommended items directly on each product using Product metafields in Shopify Admin.
Section settings
General settings
| Setting | Description |
|---|---|
| Section width | 3 options for container |
| Color scheme | Select colors from Theme settings -> Colors |
Section header
| Setting | Description |
|---|---|
| Heading | The primary text element used to introduce or label the content within this section. |
| Enable heading underline animation | Enable heading underline animation |
| Underline style | Select Underline style |
| Underline color | Customize Underline color |
| Description | A text element used to provide additional details or supporting information related to the heading or content of the section. |
| Heading size | The size of the title: |
| Alignment | The position of the heading and description. |
Content settings
| Setting | Description |
|---|---|
| Items per row on desktop | Number of columns to display on desktop computers. Minimum: 2. Maximum: 6. |
| Column gap | 4 options for column gap |
Carousel settings
| Setting | Description |
|---|---|
| Enable carousel | When enabled, the section will be displayed in carousel format |
| Show navigation | Display the next and back controls for the carousel |
| Show pagination | Display the pagination for the carousel |
| Reveal next slide | Display a part of the upcoming slide. |
| Items per row on mobile | Number of columns to display on mobile devices. |
Mobile settings
| Setting | Description |
|---|---|
| Items per row on mobile | Number of columns to display on mobile devices. |
Section padding
| Setting | Description |
|---|---|
| Top | Customize the top margin of the section |
| Bottom | Customize the bottom margin of the section |
Section divider
| Setting | Description |
|---|---|
| Show divider | Toggles the visibility of a horizontal divider line within the section. |
No comments yet