> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Complete the set

> Display complementary products or featured imagery alongside collapsible product information

The Complete the set section combines product information with complementary product recommendations or featured imagery on product pages. It organizes product details in collapsible blocks while showcasing related products or a custom image, helping with cross-selling while keeping product pages clean and organized. This product-page-only section increases average order value by suggesting coordinating items at the moment of highest purchase intent.

## What this section controls

This section controls product cross-selling displays with the following capabilities:

* Collapsible product information blocks (specifications, shipping, materials)
* Complementary product recommendations via Shopify Search & Discovery
* Featured image display as alternative to product recommendations
* Desktop and mobile layout flip options
* Fallback product selection when no recommendations available
* Section title customization
* Color scheme and width controls

## Section settings

<AccordionGroup>
  <Accordion title="Section title">
    Add the main heading for the section (default: "Complete The Set"). This title appears above the content blocks.
  </Accordion>

  <Accordion title="Content type">
    Choose what displays alongside the collapsible information blocks:

    **Featured image** — Display a custom promotional or lifestyle image

    **Complementary products** (default) — Show product recommendations powered by Shopify Search & Discovery

    Complementary products are customizable through the Shopify Search & Discovery app to show the most relevant recommendations based on the current product.
  </Accordion>

  <Accordion title="Featured image">
    Upload a custom image when "Featured image" is selected as the content type. Use this for lifestyle photography, promotional graphics, or brand imagery.
  </Accordion>

  <Accordion title="Default product">
    Select a fallback product to display when complementary products are selected but no recommendations are available. This ensures the section always has content to show.
  </Accordion>

  <Accordion title="Layout options">
    **Flip left and right side (Desktop)** — Swap the positions of collapsible content and featured content on desktop views (enabled by default)

    **Flip top and bottom content positions (Mobile)** — Reverse the content order on mobile devices (enabled by default)

    Use these options to prioritize different content on desktop versus mobile for optimal user experience.
  </Accordion>

  <Accordion title="Section width">
    Choose the container width:

    * **Page width** (default) — Standard container width
    * **Fluid** — Wider, edge-to-edge within padding
  </Accordion>

  <Accordion title="Color scheme">
    Select the color scheme for the section (default: scheme-1).
  </Accordion>

  <Accordion title="Spacing">
    Control vertical spacing above and below the section with options from None to XL (0, S, M, L, XL). Default is M for both top and bottom.
  </Accordion>

  <Accordion title="Section border">
    Add decorative borders:

    * **None** (default) — No borders
    * **Top** — Border above the section
    * **Bottom** — Border below the section
    * **Both** — Borders above and below
  </Accordion>
</AccordionGroup>

## Block: Popup drawer

Create interactive buttons that reveal content through drawers, collapsible panels, or links.

<AccordionGroup>
  <Accordion title="Button text">
    Enter the text label for the button (e.g., "Details", "Shipping Info", "Size Guide").
  </Accordion>

  <Accordion title="Button type">
    Choose how the content is revealed when the button is clicked:

    **Link** — Navigate to a URL (internal or external page)

    **Drawer** (default) — Open content in a slide-out drawer overlay

    **Collapsible** — Expand content inline below the button
  </Accordion>

  <Accordion title="Button URL">
    Set the destination link when "Link" is selected as the button type. Use this to link to dedicated pages like size guides, care instructions, or policies.
  </Accordion>

  <Accordion title="Drawer content">
    **Drawer richtext** — Add formatted content that appears in the drawer or collapsible panel. Supports rich text formatting including bold, italic, lists, and links.

    **Drawer page** — Alternatively, select a Shopify page to display its content in the drawer. This overrides the richtext field when set.

    <Warning>
      When a page is selected, it replaces any content entered in the Drawer richtext field.
    </Warning>

    Use the page option to manage frequently updated or lengthy content from a centralized location.
  </Accordion>
</AccordionGroup>

## Default configuration

The section preset includes three example blocks:

1. **Details** (drawer) — Shows product details content
2. **Description** (drawer) — Displays product description
3. **Contact us** (link) — Links to contact page

Content type is set to "Featured image" by default in the preset.

## Best practices

<CardGroup cols={2}>
  <Card title="Strategic content" icon="bullseye">
    Use complementary products to increase average order value by suggesting items that genuinely pair well with the main product.
  </Card>

  <Card title="Organized information" icon="bars-staggered">
    Group related information into logical blocks. Common blocks include Details, Shipping, Care Instructions, and Size Guide.
  </Card>

  <Card title="Clear labels" icon="tag">
    Use concise, descriptive button text (2-3 words) so customers know what information each block contains.
  </Card>

  <Card title="Mobile priority" icon="mobile">
    Use the flip mobile option to show the most important content first on smaller screens where space is limited.
  </Card>

  <Card title="Page content" icon="file">
    Use the Drawer page option for complex content like detailed size charts or comprehensive care instructions that are easier to manage as pages.
  </Card>

  <Card title="Default product" icon="box">
    Always set a default product when using complementary products to ensure the section displays properly even when recommendations aren't available.
  </Card>
</CardGroup>

## Use cases

* **Cross-selling accessories** — Show complementary products like phone cases with phones, or shoes with clothing
* **Product information hub** — Organize shipping, returns, care, and sizing information in collapsible blocks
* **Size guides** — Provide detailed sizing information in drawers without cluttering the main product page
* **Care instructions** — Display maintenance and care details for products that require special handling
* **Warranty information** — Share warranty and guarantee details in an organized, accessible format
* **Styling suggestions** — Use featured images to show lifestyle photography or styling inspiration
* **Bundle promotions** — Highlight product bundles or "frequently bought together" items
* **Policy information** — Link to shipping policies, return procedures, or terms

## Related sections

<CardGroup cols={2}>
  <Card title="Product recommendations" icon="sparkles" href="/themes/sahara/sections/product-recommendations">
    Automated product recommendations section for cross-selling
  </Card>

  <Card title="Accordions" icon="bars-staggered" href="/themes/sahara/sections/accordions">
    General-purpose collapsible content section
  </Card>
</CardGroup>