Collection Products

Author: administrator 414 views

What can you do with Collection Products Element?

Collection Products Element helps you to customize how your Collection should look on the live page. Let’s find out what Collection Products Element can offer!

1. Adding Collection Products

Click into Elements –> Single Product –> Products
Drag the Collection Products element from the left sidebar and Drop it wherever you want it to appear.

2. Configure

2.1. Content

General: With General option, you can customize your Production layout, size of Product images and the number of products shown on the screen.
Product card: You can choose what to show together with your products such as: 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 price From.
Product variant: Product variant provides you ability to custom variant options of your products (variant picker, layout show, quick shop buttons ,…).
Countdown Promo: You can check the detailed guide here.
Pagination: You can select between Off, Default, Load more button and Infinite scrolling
Change text: Allow you to change text of badges, countdown promo, etc.
Product card items ordering: If you want to bring price or description of product on top, Product card items ordering definitely could help.

2.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.