Collection Products

Author: An Do 1169 views

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

1. Content

1.1. General

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.

1.5. Pagination

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.

2. Design

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.


  • Kristian

    October 3, 2023

    Hi, I want to show size variants as radio buttons. Can I hide / mark sold out sizes on the collection page?

    • Anna Nguyen

      October 4, 2023

      Hi Kristian,

      I’m Anna from EComposer team :)
      To show the variants add radio buttons, you can open the element -> Content -> Product variants. Please follow this image
      We don’t have the option to hide the sold out sizes now. But please contact us via live chat support, our support team will try to check your page to help.

      Thank you!


Leave a Comment

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