You May Also Like Extension
You May Also Like extension by EComposer allows you to add product recommendations to a single product page. (EComposer hasn’t supported automatic related products by rules)
Normally, you will see related products under these blocks: “More items like this”, “People also buy”, and “Similar items”. You have freedom while picking related items manually.
![](https://help.ecomposer.io/wp-content/uploads/2023/08/2023-08-21_14-23-42-1-1024x587.png)
1. How to install/add the You May Also Like extension?
First, we’ll need to open the Extension popup, you have two ways:
- Click on the Extension icon at the left side.
- Under the Extension tab, click Add more.
![](https://help.ecomposer.io/wp-content/uploads/2023/08/2023-08-21_14-31-00-1-1024x532.png)
On the Extension popup, you can see the You May Also Like extension, click Install now to install it.
![](https://help.ecomposer.io/wp-content/uploads/2023/08/2023-08-20_9-55-19-1024x505.png)
2. How to set up You May Also Like extension?
After installing the extension, there will be a metafield added to your store. Please go to Shopify settings -> Custom data -> Products to see it.
![](https://help.ecomposer.io/wp-content/uploads/2023/08/2023-08-24_14-39-32-1024x629.png)
After that, there are 2 ways to add the You May Also Like extension to your store (note that we only support manually selecting products in both ways).
- First way: Go to Shopify > Choose Product > Add it with Metafield
Return to the EComposer editor > Select the Product that you have specified in the Metafield (it will render the products that you have specified).
- Second way: Choose the product directly in the EComposer editor
Note: If you add products for the “You May Also Like” in the Metafield, they will show as a priority. If not, It will show the products that you pick for the extension in EComposer.
3. How to config the You May Also Like settings?
3.1 Content Settings
- After choosing the Product, you can set the Show price, Items per row, and the Gap for the spacing of the You May Also Like.
- Show badges:
– Automatically rendering ‘Sale‘ badges when your product is set a Compare price
– Automatically rendering ‘Sold Out’ badge if the product has an out-of-stock variant
![](https://help.ecomposer.io/wp-content/uploads/2024/05/image-109-1024x590.png)
- Show price: We can show up both normal price and Compare price here. Compare price should have different style from normal price
![](https://help.ecomposer.io/wp-content/uploads/2024/05/image-110-1024x571.png)
- Show sale value badge: Here you can display the percentage/ amount of sale price. This badge is only shown up on products which have a Compare price.
![](https://help.ecomposer.io/wp-content/uploads/2024/05/image-121-1024x539.png)
You have to go to Shopify to set up a compare price for each variant firstly
![](https://help.ecomposer.io/wp-content/uploads/2024/05/image-136-1024x608.png)
3.2 Design Settings
- General: This enables you to customize the extension’s background colour, box shadow, and border.
- Items box: You can modify your design by changing the background colour, the box shadow, the border, the hover animation, and the transition.
- Title: This option will let you change some basic designs of Product name such as the font style, position, etc.
- Compare at price: change the style of sale price to differentiate it from the regular price
- Sale value badge: change the style of % or amount badge
- Sale badge: adjust the appearance of Sale text
- Sold out badge: adjust the appearance of Soldout text
- Custom badge: adjust the appearance of a custom badge you add yourself. This badge works following product tags
![](https://help.ecomposer.io/wp-content/uploads/2024/05/z5419524760567_ce0bbdc5f2e6c7423886ebb08c01d792.jpg)
1 Comment
Rainy Pham
cool feature
Reply