Complementary products

To select complementary products, add the Search & Discovery app. Learn more

Setting	Description
Color scheme	Select a color scheme from the list and customize it with appropriate colors for the whole block: text, headings, buttons, and background. Applying a color scheme automatically updates all related colors based on the settings defined in the theme's color schemes.
Heading	You can keep the suggested heading or enter an informative heading for complementary products. This heading will provide customers with a clear understanding of the related products featured in this section. Default: "Pairs well with".
Heading size	Controls the size of the block's heading: Extra small, Small, Medium, Large. Only shown when Heading is filled in.
Maximum products to show	This setting determines the maximum number of products that will appear on the page. You have the flexibility to select a range from 1 to 10 products.
Number of products per page	This setting determines the number of products that will be shown side by side on the page. You have the flexibility to select a range from 1 to 4 products.

Product card

Setting	Description
Image ratio	The “Image ratio” setting allows you to control how images are displayed on your website based on their width-to-height ratio. You have several options to choose from: Portrait: This option crops the images to use a 2:3 ratio, creating a taller appearance with a width that is 2/3 of its height. Square: This option crops the images to use a 1:1 ratio, creating a square-shaped display with equal width and height. Landscape: This option crops the images to use a 3:2 ratio, creating a wider appearance with a width that is 1.5 times the height.
Show type	Click “Show type” to display the product type on product cards in this section. *Note:* The product type must first be added on the product page in the admin.
Show vendor	Click “Show vendor” to display the product vendor on product cards in this section. *Note:* The product vendor must first be added on the product page in the admin.
Enable quick add button	If you activate the Quick add option, then your customers can add an item to their cart from the product card. Choose from the following options: None: No quick add feature is displayed. Standard: Displays one of the following quick add buttons on product cards: Add to cart circle button: For single-variant products. When a customer clicks the button, the product is automatically added to their cart. Quick view circle button: For products with variants. When a customer clicks the button, a pop-up dialog displays for them to make their variant selection and then proceed with the purchase.
Show color swatch	Enable the toggle to show color swatches on product in the section.
Swatch variant name	f the variant option name on the product page differs from the default “Color”, enter the custom name here to ensure swatches are displayed correctly on product cards.
Product description	Pulls a short custom description onto each product card from a metafield. Enter the name of a "Single line text" metafield created under the product's custom namespace (e.g. "Product description") — the theme converts it to a handle and looks up `product.metafields.custom.<handle>` . Requires creating that metafield definition first. Leave blank to hide this line.
Product info	Same mechanism as Product description, but for a second, separate line of custom info (e.g. a shipping note, material, or care instruction). Enter the name of another "Single line text" metafield under the custom namespace (e.g. "Product info"). Leave blank to hide this line.