> ## 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 product information with collapsible content blocks and optional complementary products or featured image.

The Complete the Set section combines product information with complementary product recommendations or featured imagery. It includes collapsible content blocks (description, shipping info, etc.) alongside optional product recommendations or a featured image.

This section is exclusive to product page templates and helps cross-sell related products while organizing product information efficiently.

<img src="https://mintcdn.com/digifist/eReAouV2QE3uSDqv/images/theme/release/sections/complete-the-set/complete-the-set-overview.png?fit=max&auto=format&n=eReAouV2QE3uSDqv&q=85&s=d7e37b2e7376e67f452ae9edc8ea92ef" alt="Complete the set section overview" width="3280" height="2186" data-path="images/theme/release/sections/complete-the-set/complete-the-set-overview.png" />

## What this section controls

* Collapsible content blocks (description, shipping, etc.)
* Complementary product recommendations from Shopify Search & Discovery
* Optional featured image display
* Drawer or collapsible block types
* Link to page blocks
* Desktop and mobile layout flip options

## Getting started

<Steps>
  <Step title="Open Theme Customizer">
    From Shopify admin, access the Theme Customizer on a product page.
  </Step>

  <Step title="Add Complete the Set section">
    Add the section to your product template.
  </Step>

  <Step title="Choose content type">
    Select complementary products, featured image, or none.
  </Step>

  <Step title="Add content blocks">
    Add collapsible blocks for description, shipping, care instructions, etc.
  </Step>
</Steps>

<img src="https://mintcdn.com/digifist/eReAouV2QE3uSDqv/images/theme/release/sections/complete-the-set/complete-the-set-location.png?fit=max&auto=format&n=eReAouV2QE3uSDqv&q=85&s=a262e228a13d76f4f47723d6b9daf19f" alt="Complete the set in Theme Customizer" width="3280" height="2186" data-path="images/theme/release/sections/complete-the-set/complete-the-set-location.png" />

## Section settings

<Tabs>
  <Tab title="Content">
    ### Heading

    Main section heading.

    * Inline rich text
    * **Default:** "More info"

    ### Content heading

    Heading for the complementary products or featured image area.

    * Inline rich text
    * **Default:** "Similar items"

    ### Heading size

    Controls size of both headings.

    **Available options:** XS, S, M, L, XL

    **Default:** L

    ### Content type

    Controls what appears alongside collapsible content.

    **Available options:**

    * **None:** Only collapsible blocks
    * **Featured image:** Display a custom image
    * **Complementary products:** Show product recommendations

    **Default:** Complementary products

    <Note>
      Complementary products are customizable through the Shopify Search & Discovery app. [Learn more](https://help.shopify.com/en/manual/online-store/search-and-discovery/product-recommendations)
    </Note>

    ### Featured image

    Image to display when content type is "Featured image".

    * Shopify image picker

    ### Featured image aspect ratio

    Controls aspect ratio of featured image.

    **Available options:** Auto, 1:1, 3:4, 4:3, 16:9

    **Default:** 4:3

    ### Set first collapsible item opened

    Opens the first collapsible block by default.

    **Default:** True

    <Warning>
      Only works if the first block type is set to 'Collapsible' (not Drawer or Link).
    </Warning>

    <img src="https://mintcdn.com/digifist/IPoCyzc8nWn8VCIB/images/theme/release/sections/complete-the-set/content-settings.png?fit=max&auto=format&n=IPoCyzc8nWn8VCIB&q=85&s=206ea9335678c34a9734d521f98ab165" alt="Content settings" width="3280" height="2186" data-path="images/theme/release/sections/complete-the-set/content-settings.png" />
  </Tab>

  <Tab title="Layout">
    ### Flip left and right side

    Swaps position of collapsible content and complementary content on desktop.

    **Default:** True

    ### Flip top and bottom content positions on mobile

    Reverses content order on mobile devices.

    **Default:** True

    <Tip>
      Use layout flips to prioritize different content on desktop vs mobile.
    </Tip>

    <img src="https://mintcdn.com/digifist/eReAouV2QE3uSDqv/images/theme/release/sections/complete-the-set/layout-settings.png?fit=max&auto=format&n=eReAouV2QE3uSDqv&q=85&s=15a0fa9cc14d9ecb18854b55b5f26c12" alt="Layout settings" width="3280" height="2186" data-path="images/theme/release/sections/complete-the-set/layout-settings.png" />
  </Tab>

  <Tab title="Settings">
    ### Section width

    Maximum width of section container.

    **Available options:** Narrow, Page, Fluid

    **Default:** Page

    ### Color scheme

    Background and text colors.

    * Shopify color scheme selector
    * **Default:** Scheme 1

    ### Spacing top

    Space above section.

    **Available options:** None, S, M, L, XL

    **Default:** M

    ### Spacing bottom

    Space below section.

    **Available options:** None, S, M, L, XL

    **Default:** M

    <img src="https://mintcdn.com/digifist/IPoCyzc8nWn8VCIB/images/theme/release/sections/complete-the-set/section-settings.png?fit=max&auto=format&n=IPoCyzc8nWn8VCIB&q=85&s=929b99611d8671d489371a682f25310b" alt="Section settings" width="3280" height="2186" data-path="images/theme/release/sections/complete-the-set/section-settings.png" />
  </Tab>
</Tabs>

## Block settings

### Collapsible Block

<Tabs>
  <Tab title="Type & Content">
    ### Type

    Controls how the content is displayed.

    **Available options:**

    * **Collapsible:** Expands/collapses inline
    * **Drawer:** Opens in a slide-out drawer
    * **Link to page:** Links to another page

    **Default:** Collapsible

    ### Heading

    Title for the collapsible item.

    * Inline rich text
    * **Default:** "Content"

    ### Link

    URL for link type blocks.

    * Shopify URL selector

    ### Content

    Rich text content for the block.

    * Rich text editor
    * Use `[description]` to show product description dynamically

    <Tip>
      Use `[description]` placeholder to automatically display the product's description.
    </Tip>

    ### Page

    Link to a specific page for content.

    * Shopify page picker

    <Note>
      If page is selected, the content setting will be ignored.
    </Note>

    <img src="https://mintcdn.com/digifist/IPoCyzc8nWn8VCIB/images/theme/release/sections/complete-the-set/block-settings.png?fit=max&auto=format&n=IPoCyzc8nWn8VCIB&q=85&s=81fcc1375257479f12972fcb177012a4" alt="Block settings" width="3280" height="2186" data-path="images/theme/release/sections/complete-the-set/block-settings.png" />
  </Tab>
</Tabs>

## Best practices

* Use "Complementary products" content type to increase average order value
* Set first collapsible (product description) to open by default for better UX
* Use drawer type for lengthy content like shipping policies or size guides
* Use collapsible type for quick-scan information like materials or care instructions
* Place most important information (description) as first block
* Use `[description]` placeholder to keep product info synchronized
* Consider flipping mobile layout to prioritize product recommendations on smaller screens
* Link to dedicated pages for detailed policies rather than including lengthy text
* Keep collapsible headings concise (2-4 words) for better mobile experience
* Use featured image option to showcase product lifestyle or detail shots

## Common use cases

* **Product details organization** - Organize description, specs, shipping in collapsibles
* **Cross-selling** - Display complementary products to increase cart value
* **Size guides** - Use drawer type for detailed sizing information
* **Shipping policies** - Link to shipping policy page or include brief details
* **Care instructions** - Collapsible block for product care and maintenance
* **Warranty information** - Drawer for detailed warranty terms
* **Material details** - Collapsible for fabric composition or materials
* **Brand story** - Featured image option with brand imagery

## Related guides

<Card title="Product Page" icon="box" href="/themes/release/products/product-page">
  Learn more about product page customization
</Card>

<Card title="Common Settings" icon="sliders" href="/themes/release/common-settings">
  Learn about common settings shared across sections
</Card>