Related Products Element

Author: An Do 954 views

What do you know about Related? Let’s figure it out with EComposer App.

Related products 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. Click into Elements –> Single Product –> Related
  2. Drag the Related element from the left sidebar and Drop it wherever you want it to stay.
How To Adding The Related Element With EComposer App

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 after.
  • 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 the product that will be demonstrated at the end.
  • Show product available only: If you only want to see the available products, you can click on it.

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 go 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 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 to.
How To Changing The Content With EComposer App

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.
Setting Countdown Promo With EComposer App

Change Text

  • You allow changing the text or any flexible word of the Title when no product, Sale badge, Sold badge, Product unavailable, Product out of stock, Days, Hours, Minutes, Second.
Setting Change Text With EComposer App

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.
Setting Product Card Items Ordering With EComposer App

Note: In the EComposer App, you can’t directly edit the element here. It depends on the product or options that you add to Shopify. You can go to Edit Your Product in Shopify Admin to edit this element.

2.2. Design

Product items

  • Normal: When you turn it to be 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 as 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 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.
How To Change The Design With EComposer App

Leave a Comment

Enjoy a free 3-day trial. Then get your first month for $1. Try Now.