similarProducts.css

img.product {
    height: 120px;
    max-width: initial;
    pointer-events: none;
}

similarProducts.html

<template>
    <lightning-card title="Similar Products" icon-name="standard:link">
        <div class="slds-m-horizontal_medium">
            <template if:true={similarProducts.data}>
                <template if:true={similarProducts.data}>
                    <template for:each={similarProducts.data} for:item="product">
                        <c-product-list-item key={product.Id} product={product}></c-product-list-item>
                    </template>
                </template>    
                <template if:false={similarProducts.data.length}>
                    <c-placeholder message="No similar products"></c-placeholder>
                </template>
            </template>
            <template if:true={errors}>
                <c-inline-message message="An error has occurred while retrieving similar products" errors={errors}></c-inline-message>
            </template>                
        </div>
    </lightning-card>
</template>

similarProducts.js

import { LightningElement, api, track, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import getSimilarProducts from '@salesforce/apex/ProductController.getSimilarProducts';
import PRODUCT_FAMILY_FIELD from '@salesforce/schema/Product__c.Product_Family__c';

const fields = [PRODUCT_FAMILY_FIELD];

export default class SimilarProducts extends LightningElement {
    @api recordId;
    @api familyId;
    @track product;

    // Track changes to the Product_Family__c field that could be made in other components.
    // If Product_Family__c is updated in another component, getSimilarProducts
    // is automatically re-invoked with the new this.familyId parameter
    @wire(getRecord, { recordId: '$recordId', fields })
    product;

    @wire(getSimilarProducts, {
        productId: '$recordId',
        familyId: '$product.data.fields.Product_Family__c.value'
    })
    similarProducts;

    get errors() {
        const errors = [this.product.error, this.similarProducts.error].filter(
            error => error
        );
        return errors.length ? errors : undefined;
    }
}

similarProducts.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Similar Products (LWC)</masterLabel>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightningCommunity__Default">
            <property
                name="recordId"
                type="String"
                label="Record Id To Find Similarities With"
                description="Default uses the current page's record id. Modify if you want a specific record to use."
                default="{!recordId}" />
        </targetConfig>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Product__c</object>
            </objects>
        </targetConfig>
    </targetConfigs>

</LightningComponentBundle>