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
Show in accordion:
Enable this if you want your complementary products to show in an accordion. This will have the same look as the 'collapsable' content.
Collapse accordion 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:
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.
Use .svg format:
Want to use a custom image for the icon in .svg format? paste the link here, this will overrule the custom image and 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.
Example of 4 products per row:
Quick shop
Show on desktop:
Enable this if you want the add to cart button to show on your product card on desktop.
Show on mobile:
Enable this if you want the add to cart button to show on your product card on mobile.
Show amount selector:
Enable this if you want to show an amount selector next to the buy button.
Enable compact button:
This will show a shopping cart icon instead of a button with text on desktop.
Enable quick shop drawer:
If you want to enable the quick shop drawer (slide-out of a mini productpage) enable this option.
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.
For example, you can choose to display the products in a 'Grid / swipe' layout, with 5 products per row, and only show the image. It will look like this:
Or for example, you can choose a 'List' layout and only show the product title and price. It will look like this:
