Products (Grid or Carousel)

Products (Grid or Carousel)


Go to tiarabytj.com

Select 'Products (grid or carousel)' to display the products in Carousel (slider).

2. Clicking on pencil icon will open the settings window. Let's explore it one by one.

Clicking on pencil icon will open the settings window. Let's explore it one by one.

3. Allows you to set the title text.

Allows you to set the title text.

4. Select the tag to define the title element where h1 is the largest and most important, and h6 is the smallest.

Select the tag to define the title element where h1 is the largest and most important, and h6 is the smallest.

5. Allows you to select a custom color for the title text.

Allows you to select a custom color for the title text.

6. Clicking on "Edit" button opens additional typography settings for detailed control over font family, size, weight, line height, letter spacing, and more.

Clicking on 'Edit' button opens additional typography settings for detailed control over font family, size, weight, line height, letter spacing, and more.

7. Determines what all products should appear in the slider.

Determines what all products should appear in the slider.

8. Allows you to filter products based on specific categories or tags.

Allows you to filter products based on specific categories or tags.

9. Allows you to choose how the products will be displayed visually. Grid: Displays products in a structured, grid-like format with rows and columns. List: Displays products in a vertical list format, one after the other. Carousel (Currently Selected): Displays products in a horizontal slider that users can scroll through.


10. This option determines how many items will be displayed on a single page.

This option determines how many items will be displayed on a single page.
Let's move to the 'Carousel' section.

13. Let's move  "Design" section.


14. Allows you to customize how product information appears when a user hovers over a product image.

Allows you to customize how product information appears when a user hovers over a product image.

15. Allows you to define the size of product images displayed. You can set as thumbnail, large, medium, small or also as 100 x 150 and so on.

Allows you to define the size of product images displayed. You can set as thumbnail, large, medium, small or also as 100 x 150 and so on.

16. Enables or disables a countdown timer for products with a sale price.

Enables or disables a countdown timer for products with a sale price.

17. Display a number of sold and in stock products as a progress bar.

Display a number of sold and in stock products as a progress bar.

18. Create an eye-catching section of special products to promote them on your store.

Create an eye-catching section of special products to promote them on your store.

19. Dropdown to choose the color scheme for the text.

Dropdown to choose the color scheme for the text.

20. Adds borders around each product grid item for a more defined look.

Adds borders around each product grid item for a more defined look.
Enables or disables a background color for each product grid or carousel item.

22. Adds a subtle shadow effect to each product box for a more modern, lifted appearance.

Adds a subtle shadow effect to each product box for a more modern, lifted appearance.

23. Rounds the corners of the product boxes.

Rounds the corners of the product boxes.
Add the ability to view the product gallery on the products loop.

25. Let's move to the "Data Settings" section.

Let's move to the 'Data Settings' section.
Determines how products are ordered in the grid or carousel.

27. A numeric input field to skip a certain number of products from the beginning of the list. Example: If the offset is set to "2," the first 2 products will be skipped, and the grid/carousel will display products starting from the 3rd one.


28. Determines how multiple conditions (e.g., categories or tags) are applied: OR: Products that match any of the selected conditions will be displayed. AND: Only products that match all the selected conditions will appear.


29. Inherit: Follows the default sorting set in the theme or backend. Descending: Displays products in descending order (e.g., newest to oldest). Ascending: Displays products in ascending order (e.g., oldest to newest or low to high).


30. An input field where you can exclude specific products, categories, or tags from appearing in the grid/carousel.


When enabled (Yes), products that are out of stock will not be displayed in the grid or carousel.

32. Let's move to "Design Options" section.

Let's move to 'Design Options' section.

33. For a detailed understanding of the Design Options, search for the video titled "Design Options Of Elements" where you’ll find all the information you need.


34. Click on "Save Changes" to apply the settings applied.

Click on 'Save Changes' to apply the settings applied.

35. This is how the Products slider will look like on the website.

This is how the Products slider will look like on the website.