Introduction
Use the new product card feature by AiTrillion to easily configure the look and feel of the carousels on the front end of your store.
Here are the steps to customize the look and feel of carousels in product recommendations:
Step 1: Head over to Product Recommendations > Layout Settings
Step 2: Here you can set up the product card settings. These settings govern how the product blocks look in the carousel displays, how the images appear, and if the display does or does not adapt to changes in products and their images.
Important points to remember here are:
A) Image Ratio: This feature helps you adjust the image appearance so that the entire carousel blends in with the rest of your site. You can choose from adapt to image, portrait and square image settings. Remember the Square / Potrait options may crop your image, so try all and choose what works best for you.
In square format the carousels look like this :
The portrait will look more like this:
And last but not least, 'Adapt to Image' will take on the image sizing. So if your images are rectangles, that's how they will appear. For e.g.
B) Number of Columns on mobile: This feature from AiTrillion, helps you adjust how many columns you want in the carousels when viewed on a smaller screen device like a mobile or a handheld phone. Images in the carousel will take on the image ratio as illustrated above, based on your selection.
C) Space Between product blocks: Use these configuration options to set the padding between product blocks and on the top and bottom of the carousel as well.
So with the settings of :
The carousel looks like this:
But with the settings of:
The carousel look changes to:
Step 3: Once done, you can also choose to customize the recommendation section width, include or exclude out-of-stock products in the recommendations and you can also choose to hide products with a certain tag, from the recommendations system.
When you have finished making your choices, click Save / Update.
Next➡️
💡Tips for Product recommendation