Related Products

What is Related Products?

We’ve all been there. You land on a product page, convinced you've found exactly what you need. But then, you scroll down and a carousel of intriguing alternatives catches your eye.

Ever stop to think about what's actually going on there?

It's just a gallery of other products but that little box is one of the most powerful tools on your entire website.

Too many store owners see this as just a decorative row of pictures. Big mistake. That little section is your 24/7 sales associate, and it's brilliant at its job. When a customer is hesitant, it can show them a similar item that might be the perfect fit, saving a sale you were about to lose.

And for the customer who's ready to buy, it can suggest the perfect accessory or complementary item, effortlessly increasing the value of their order.

That's why we create the Related Product features to turn that simple product gallery into a powerful sales-boosting machine. Let's get started.

Click here to see the demo link ->

How To Install Related Product?

Step 1: In Shopify Admin, going to Smind Section app and find Related Products 1-1 in Product Block tab of Library. Click Install and Customize it.

Step 2: Going to Shopify Editor sidebar, choose any product page template and click Add Section -> Related Products 1

Step 3: Copy the block ID. For example: smi-block-related-products-1

Step 4: On the Product Detail sections, click Add Block and add Smind Block to the section.

Step 5: And insert the block ID of Related Products to the Section ID. You can change the block name if you want.

Step 6: Now you have to change the content for this feature

• Block ID: This is a unique identifier for this specific block.

• Content max-width: This setting limits the maximum width of the content inside the block.

• To add related products in Shopify, install the Search & Discovery app

• In the Search & Discovery app, go to the Recommendations section and click Add recommendations.

• Select the main product for which you want to display related products. In the Add Related Products section, browse for and select the products you want to be complementary. Click Save to store your selections.

Step 7: Continue to customize this product block after saving these related products.

Heading

These options control the title of the section.

• Heading: This is the text for the section's title.

• Heading size: This controls the font size of the heading.

• Heading alignment: Aligns the heading text to the Center.

Container

These settings customize the appearance of the box that contains the related products.

• Grid view: When disabled, the products are displayed in a list format. If it were enabled, the products would appear in a grid.

• Thickness: The thickness of the container's border.

• Thickness opacity: The transparency of the border.

• Corner radius: The roundness of the container's corners.

• Content padding: The space between the container's border and the content inside.

• Item gap on desktop: The space between each product on desktop screens.

• Item gap on mobile: The space between each product on mobile screens.

• Shadow: Adds a shadow effect to the container.

• Shadow opacity: Controls the transparency of the shadow.

Slider

These settings control the product carousel.

• Auto rotate slides: This is disabled. If enabled, the slider would automatically cycle through the products.

• Change slides every: Sets the time before the slide changes.

• Number of products per page: This determines how many products are visible at once in the slider.

• Pagination: This controls the style of the navigation indicators for the slider.

Product settings

These settings apply to the individual product items within the slider.

• Use image corner radius from theme settings: This is disabled, allowing for a custom corner radius on product images that is independent of the main theme settings.

• Image width: Controls the width of the product images.

• Media ratio: Sets the aspect ratio for the product images.

Color

This section allows for detailed color customization of the block.

• Color Scheme: Applies a predefined set of colors from your theme's settings.

• Custom color: If enabled, it would let you override the theme's color scheme with manual color choices.

Block spacing

These settings control the space around the entire block.

• Top margin: This adds a certain of pixel of empty space above the block, separating it from the content above.

• Bottom margin: This adds a certain of pixel of empty space below the block, separating it from the content below.