Managing Related Products

StoreHippo allows you to add related products. By default in the StoreHippo themes, the products within the same category are shown automatically as the related products. Along with that, you can also specify the related products manually while adding or editing the product.

Adding the related products

To add the related products, follow the steps mentioned below:

• Go to the Products > Products section in the StoreHippo Admin Panel.
• Proceed to add or edit the product.
• Click the MISCELLANEOUS tab option.
• In the Related Products field, add the related products. 
• After adding the related products, click the Save button.

Making related products visible on the storefront

To make the related products visible on the product page of your store, then you need to make few changes in the design theme. Follow the steps mentioned below:

• Go to the Design theme section in the StoreHippo Admin Panel.
• In the HTML section, click the Product option.

• Now, check the condition "ng-if="related_products.length" for related products in the html code.
• Above that condition, paste the code mentioned below:

<div ms-widget="ms.entity" ms-data-entity="ms.products" 
ms-data-alias="related_products"
ms-data-filters='[{"field":"sku","value":{{product.related_products}},"operator":"in"}]'>

• After pasting the code, click the Save button to apply the changes.

Now, the related products will be displayed on the product page of your store.