Install #1 Page Builder App for FREE and get deal 6 months of Standard Plan. Hurry up! See Detail  

Header background

Element sections - Products

Maria Do

Written by Maria Do

Last updated


On this page

This section is allowing to show a product grid on your page.

1. Add Products

  1. From Dashboard > Pages > All Pages > Choose the elementor page you want to modify > Edit with elementor.

  2. Scroll down to Kalles Theme > drag and drop the Products above the section then it will appear an Edit box.


2. Configure Products’ Content

2.1. Content

  • List product style: There are 4 styles. They are Grid, Metro, Masonry, Carousel.

  • Display: This option allows to display product by some conditions.  They are All products, Recent products, Featured products, Sale products, Best selling products, Top Rated Products.

  • Order By: This option allows to display product by some conditions. They are Title, Date, ID, Author, Modified, Random, Comment count, Menu order.

  • Order: This option allows to display product by 2 conditions. They are Ascending or Descending.

You can watch this video below to get more detail about the Display, Order By, and Order options.

  • Products: Input the name of the product that you want to show on the product list. Then you’ll see suggestions.

  • Product Category: If you don’t want to add product manual, you can select product categories that you want to show on the product list.

  • Per page: Enter the number of products that you want to display on one page.

2.2. Settings

  • Columns: There are 3 number of column types. They are 2-column style, 3-column style, 4-column style, 5-column style, 6-column style.

  • Enable Flip Product Thumbnail: When you hover over the product, the second image will appear.

  • Load more button: Turn on this option to show the Load more button.  Please note that if you want to show Load More button so the number of product must more than product Per Page from Content option block.

  • Load More Type: There are 4 types.

  • CSS Animation: There are 5 style animation. They are Top to bottom, Bottom to top, Left to right, Right to left, Appear from center.

  • Extra class name: You also can add an extra class name in this option. (Style particular content element differently – add a class name and refer to it in custom CSS).

3. Configure Products’ Style


From this tab, you will able to config attribute of Hover Product Style, Product Title, Product Title Color, Product Price, Product Price Color.

Image size: This is important option and you should understand. Because customers always upload product image with different size so we developed this option to allow make all product images have same size. For example: If I config image size is Medium – 500×500.  This is the result:


[Private Offer] EComposer Partner Plan

Exclusively for The4 users, when you bougth any theme from us, you can get Ecomposer - Theme Partner Plan for ZERO and start making beautiful, high-converting store pages today:

  • FREE 100% EComposer Standard plan for 6 months (save you $114)
  • Build ANY Shopify pages: Landing page, Sale Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.
  • Create advanced sections & add to your theme with ease
  • 100+ professtional, stunning designer-made templates
  • Build pages with a love drag-drop editor, no coding required

How to claim offer. Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject "Theme name+EComposer" to upgrade for free

Cheers, The4.

We highly recommend Shopify apps from our partners.

We uses cookies to ensure you get the best experience on our website.