Skip to main content
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

Add the main heading for the section (default: “Complete The Set”). This title appears above the content blocks.
Choose what displays alongside the collapsible information blocks:Featured image — Display a custom promotional or lifestyle imageComplementary products (default) — Show product recommendations powered by Shopify Search & DiscoveryComplementary products are customizable through the Shopify Search & Discovery app to show the most relevant recommendations based on the current 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.
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.
Choose the container width:
  • Page width (default) — Standard container width
  • Fluid — Wider, edge-to-edge within padding
Select the color scheme for the section (default: scheme-1).
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.
Add decorative borders:
  • None (default) — No borders
  • Top — Border above the section
  • Bottom — Border below the section
  • Both — Borders above and below

​
Block: Popup drawer

Create interactive buttons that reveal content through drawers, collapsible panels, or links.
Enter the text label for the button (e.g., “Details”, “Shipping Info”, “Size Guide”).
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 overlayCollapsible — Expand content inline below the button
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.
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.
When a page is selected, it replaces any content entered in the Drawer richtext field.
Use the page option to manage frequently updated or lengthy content from a centralized location.

​
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

Strategic content

Use complementary products to increase average order value by suggesting items that genuinely pair well with the main product.

Organized information

Group related information into logical blocks. Common blocks include Details, Shipping, Care Instructions, and Size Guide.

Clear labels

Use concise, descriptive button text (2-3 words) so customers know what information each block contains.

Mobile priority

Use the flip mobile option to show the most important content first on smaller screens where space is limited.

Page content

Use the Drawer page option for complex content like detailed size charts or comprehensive care instructions that are easier to manage as pages.

Default product

Always set a default product when using complementary products to ensure the section displays properly even when recommendations aren’t available.

​
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

Product recommendations

Automated product recommendations section for cross-selling

Accordions

General-purpose collapsible content section