The Complementary products block makes it possible for you to show your manually picked complementary products right there on the productpage. These products will be set up in by the Shopify Search & Discovery app.
To activate this block you first have to navigate to the main 'Product' section on the productpage.
1) Click on 'add block' which can be found in your left sidebar
2) Click on 'Complementary products'.
3) Done, your Complementary products block is added.
Settings
The settings contains the settings for the styling, layout and the products of the 'Complementary products' block.
Simply click on the 'block' to open the settings.
On the right sidebar, the following settings will show
Products:
You can select the products to overwrite Search and discovery app. You can use metafields to load different products for every product of your store.
Layout:
Select the layout for the complementary products. You can choose between: Regular, Tabs or Accordion
Collapse by default:
Enable this when you want to show the accordion collapsed by default. Note that when you're customizing this block in the theme editor, it will always be uncollapsed.
Heading size:
Set the heading size, this is only applicable when 'regular' layout is chosen
Heading:
Set the name of the heading here. By default we use "Pairs well with".
Icon:
If you want you can also use an icon that will show before the heading, do you want to use an icon here, please select one.
Custom image:
Set an custom image for your heading here. This will show as an icon before the title and will overrule the icon setting.
Max image width:
Set the max image with for the custom image here.
Products
Layout:
You can choose to show the complementary products either in a list or in a grid layout which you can swipe horizontally.
Example of the 'List' layout:
Example of the 'Grid / swipe' layout:
Products per row:
When you have chosen the 'Grid / swipe' layout, how many products do you want to show in the row? If you have more products than shown in the row, it will automatically become a slider.
Layout products:
You can decide which elements of the complementary products you want to show. By default only the image, title and price will show.
By using these checkboxes, you can totally customize the look and amount of information of the complementary products.