A Collection Product element will display the products in a Collection on your page. It helps you customize your Collection’s look on the live page. Let’s find out what Collection Products Element can offer!
To add this element to your page, please go to Elements –> Collection Page –> Products
With the General option, you can customize your Production layout, the size of Product images, and the number of products shown on the screen.
We also provide an Enable preload option in this case. Its main function is to render the HTML of the product when hovering to reduce the page load time when clicking on the product page.
1.2. Product card
You can choose what to show together with your products such as the vendor’s name, sale badges, 3rd party apps (reviews, quickviews, wishlist),… and even a short description. You can also select the price min option here to show variant prices.
1.3. Product Title
Here you can change the HTML tag for the product title. You can either tick or untick the Show title on the one-row option to show the title on one row if the product title is very long.
1.4. Product variant
Product variant provides you the ability to custom variant options of your products (variant picker, layout show, quick shop buttons,…).
If you want to show the variant as the swatch color or image, please fill in the correct variant name. You can read more here about the Color variant.
You can select between Off, Default, Load more buttons, and Infinite scrolling
1.6. Wishlist button
You will have the option to choose between a 3rd party wishlist app or the Wishlist extension from EComposer.
For more details on the product wishlist button from the EComposer app please check the guide here.
1.7. Compare button
You will have the option to show the Compare product button, for further details please check the guide here.
1.8. Countdown Promo
You can check out the detailed guide here.
1.9. Edit labels
Allow you to change the text of badges, countdown promo, etc.
1.10. Product card items ordering
If you want to put the price or description of the product on top, Product card items ordering definitely could help. You can also rearrange the position of other card items in this setting.
You can even make your Collection Products page look colorful with:
- General: This function allows you to set the basic ones such as Alignment, Background color, Box Shadow or Border, Border Radius and Hover Animation.
- Product items & Product image: You may want to set Width, Max Width, Height, Image fit, CSS Filter, Box Shadow, Border, or Border Radius.
- Title, Price, Compare at price & Sale price: All changes for these element related to Alignment, Typography, Text color, Border and Spacing can be done here.
- Add to cart button, Sold out button, Unavailable button, View more button: these functions help you to customize how your button looks with Typography, Background color, Border Hover, and move them around by Spacing, Alignment and position and options.
- Badges: You can also change the badges Alignment, Typography, Text color, Width, Height, Border and Spacing here.