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
Section settings
General settings
| Setting | Description |
|---|---|
| Section width | Controls the width behavior of the section container: |
| Color scheme | Select a color scheme from Theme settings → Colors. |
Section header
| Setting | Description |
|---|---|
| Heading | The primary text element used to introduce or label the content within the section. |
| Enable heading underline animation | Enables an animated underline effect for the heading. |
| Underline style | Selects the underline style applied to the heading. |
| Underline color | Customizes the underline color. |
| Description | Provides additional details or supporting information related to the heading or section content. |
| Heading size | Controls the size of the heading text: |
| Alignment | Controls the alignment of the heading and description: |
Content settings
| Setting | Description |
|---|---|
| Items per row on desktop | Defines the number of columns displayed on desktop devices. |
| Column gap | Controls the spacing between columns: |
Carousel settings
| Setting | Description |
|---|---|
| Enable carousel | Displays the section content in a carousel layout when enabled. |
| Show navigation | Displays previous and next navigation controls for the carousel. |
| Show pagination | Displays pagination indicators for the carousel. |
| Reveal next slide | Displays a partial preview of the next slide in the carousel. |
| Items per row on mobile | Defines the number of slides visible on mobile devices. |
Mobile settings
| Setting | Description |
|---|---|
| Items per row on mobile | Defines the number of columns displayed 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