Eveland – Products

This shortcode will display a list of products in grid or carousel slider view

From the Eveland elements

Configuration:

General tab:

  1. Title: Add title for this shortcode
  2. Product List style: Set layout for this shortcode – Grid/Carousel Slider
  3. Product item style: Set display style for single product item, currently this shortcode has only one style
  4. Image size: There are a lot of sizes that you can select for your images. If not, please select Custom then you can add the Width and Height for images
  5. Enable Load More: Show load more button
  6. Extra class name: If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your CSS file.

Products options tab:

  1. Product Category: Specified categories for this shortcode to display only products which belongs to these categories to narrow down the output
  2. Target: Choose the target to filter products
  3. Order by: Order products by the given criteria
  4. Order: Designates the ascending or descending order.
  5. Product per page: Number of products to show per pagination.

Products options tab:

Bootstrap settings (This tab will be available if you choose Grid layout for Product list style):

  1. Rows space: Space between rows of product card item
  2. Items per row on … : Responsive breakpoints for some specific screen resolution

Carousel settings (This tab will be available if you choose Owl Carousel layout for Product list style):

  1. Number of rows will be displayed
  2. Fade: Use fade effect or not
  3. Center Mode: Your active slide will be centered
  4. Vertical Mode: Slide direction will be vertical direction
  5. AutoPlay: Auto slide to next slide item
  6. Navigation: Show/hide Next & Previous buttons
  7. Navigation style: Set style for Next & Previous buttons
  8. Dots: Show/hide pagination dots
  9. Loop: If yes, then your slide will loop infinitely
  10. Slide Speed: Slide speed in milliseconds
  11. Margin: Space between items in pixels
  12. The items on…: Responsive breakpoints for some specific screen resolution

Design option tab:

This tab contains some advanced configs for custom layout, such as padding, margin, typography, custom CSS… Changing values on this tab is not recommended unless  you know exactly how its work.

For detailed instructions, please go to Responsive Design Options.

Was this page helpful?
Yes No