Related Element

Similar to the Related Product element, the Related element are basically suggestions that complement the item a buyer is currently looking at. As a result, using these items can significantly boost conversion by encouraging consumers to buy more.

Do you want to know how we end up deciding which products will appear for which searches? Products will show up in the Related Products section without having to be manually selected. And because it is dependent on Shopify, its terms and conditions are listed below (no one can change this).

• Match with the current product type.
• Match with the current product vendor.
• In the same collection with the current product (However, if a product is in more than one collection, there is no way to know which collection’s products will be displayed)

1. Adding Related Element

2. Configuring Related

2.1. Content

General Settings

• Preview: The selection you choose here is only for demonstration purposes. Also, the Related Product will be shown as flexible because that is depended on the product that you choose.
• Layout: This function will help your related product view be better.
  • Gird: Your product will be shown up as a grid of cells. Each item will have a certain space between them.
  • List: This will be illustrated as a list of the product horizontally.
  • Slider: Help you demonstrate your connection product as a slide show.

• Style: You may change the position of the features by indirectly changing their style of it. Whenever you change the Layout, which means the Style will be changed too. There are three different options( Style 1, Style 2, and Style 3) that are waiting for you to view.
• Image Ratio: This feature allows you to set up the percentage of the product photo. There are known as Adapt to Image, Portrait, or Square.
• Maximum products to show: Let you set the number of products that will be demonstrated at the end.
• Show product available only: If you only want to see the available products, you can click on them.

Product card settings

• Show the second image on hover: When you hover on it, the image automatically stops the transition.
• Show short description: If you want to show the description of the product so just go on to this button, but if not so you do not need to click on it. Please set a number of the Maximum words to show whenever you turn on this function.
• However, still have lots of interesting functions for you to change known as Show vendor, Show type, Show price, Show sale badge, and Show badge.

Slider settings

• Infinite Loop: After you go on Autoplay, this function will let you view the slide smoothly as a repeating roll and never stop.
• Autoplay: This allows this element to auto-run and goes back to the beginning to play it again and again. Whenever you click on Pause on hover, so the slide will stop when you hover on it.
• And some of them basically settings for the slide such as Items per row, Column gap, Navigation, Navigator, or Transition duration.

Product Title

• HTML Tag: You can choose the HTML tag for the product title here.

Product variant settings

• You can go to set some of the basic settings such as Show variant picket, Show variant label, or Show button.
• Add to cart text & icon: You may set a new name for the add to cart button and you can select an icon that you think matches your description
• View more text & icon: You also can type any word for the view more text button, including adding any icon that you want.

Countdown Promo

• Please go on Enable countdown or Enable progress bar if you have any requests involved with those features.
• Layout: You may set the view for the related product as Vertical or Horizontal.
• Title: Change any word that you think makes sense with your countdown demonstration.
• Time labels to show: You can illustrate many little details such as Week, Day, Hour, Minute, or Second.

Edit labels

• Here you can change the text of the Title when no product, Sale badge, Sold badge, Product unavailable, Product out of stock, Days, Hours, Minutes, Second, etc…

Product card items ordering

• Those features are some of the most important functions that connect with our description, known as Title, Description, Vendor, SKU, Type, Price, and Button action.

2.1. Design

General/Product items

• Normal: When you turn it to a normal function, you may go to change some of the necessary features here like Background color, Border, Box Shadow, and Border Radius.
• Hover: Some of the interests features such Background color, Border, Box Shadow, and Border Radius, without saying here is Transition Duration, you may set lots of functions like that when you choose the hover effect.

Product image

• You may go first with the basic functions to set Width, Max Width, Height, Alignment, and Image fit for the pictures.
• After that go on Opacity, CSS Filters, Box Shadow, Border, Border Radius, and Spacing.

Here’s the list of the remaining options:

• Title, Price, Compare at price, Sale price, Add to cart button, Quick shop button, Unavailable button, Sold out button, View more button, Sale price badge, Sale badge, Sold out badge, Custom badge, Rating, Countdown general, Countdown items, Countdown title, Countdown number, Countdown label, Progress Bar and Navigation.

• All of the design settings above have very similar options for you to change.