Layout Presets

1 – General Settings Overview

Main Configuration Options

• Slider Type – Choose the type of slider you want to display. This option allows you to define how products are presented, such as product-based sliders, category-based sliders, or other supported display types. It helps you control the structure and purpose of the slider.
• Layout Preset – Layout Presets allow you to quickly apply pre-designed layouts to your product slider. These presets define how product elements like images, titles, prices, and buttons are arranged, helping you achieve a consistent and professional look without manual customization.
• Theme Selection – Theme Selection lets you choose a visual style for your slider. Each theme controls colors, typography, spacing, and hover effects, allowing you to match the slider design with your website’s overall branding and appearance.
• Product Filtering – Product Filtering gives you full control over which products appear in the slider. You can filter products by category, tag, price, featured status, on-sale items, or custom conditions to showcase the most relevant products to your customers.
• Visibility & Sorting Controls – This option allows you to manage how and when products appear in the slider. You can control sorting order (e.g., newest, popular, price-based) and set visibility rules such as showing or hiding out-of-stock items, limiting the number of products, or displaying sliders on specific pages.

2 – Slider Type

Main Configuration Options

• Product Slider – The Product Slider allows you to showcase individual products in a smooth, responsive carousel layout. You can display featured, recent, best-selling, or selected products to highlight key items and encourage customer engagement. It’s ideal for promoting specific products, special offers, or new arrivals while keeping your store visually clean and organized.
• Category Slider – The Category Slider displays product categories instead of individual products. It helps customers quickly browse different product groups by showcasing category images and titles in a slider format. This is especially useful for improving navigation, guiding users to relevant collections, and enhancing the overall shopping experience.

3 – Layout Preset

Choose your preferred layout style:

• Slider – The Slider layout displays items in a horizontal, scrollable carousel. Users can navigate through products or categories using arrows, dots, or swipe gestures. This layout is ideal for highlighting featured content, promotions, or limited selections while saving page space and maintaining a clean design.
• Grid – The Grid layout presents items in evenly spaced rows and columns. It provides a clean and structured view, making it easy for users to browse multiple items at once. This layout works best for showcasing a larger number of products with equal importance and visibility.
• Masonry – The Masonry layout arranges items in a dynamic, Pinterest-style grid where elements fit together based on their height rather than fixed rows. This creates a visually engaging and modern look, ideal for showcasing products with varying image sizes or content lengths.

4 – Theme Selection

Pre-designed Themes

• 3 themes available in Free Version – The free version includes three beautifully designed themes that allow you to create attractive and functional sliders right away. These themes are optimized for performance and usability, giving you flexible design options without any additional cost.
• More premium themes available in Pro Version – The Pro version unlocks a wider collection of professionally designed premium themes. These advanced themes offer enhanced styling options, modern layouts, and greater customization flexibility—perfect for creating a more polished and unique look for your store.

5 – Product Filtering Options

Filter products based on:

• Latest Products – Displays the most recently added products from your store. This is perfect for highlighting new arrivals and keeping your content fresh and up to date for returning customers.
• Featured Products – Showcases products that you have marked as featured in WooCommerce. This option is ideal for promoting top-selling, recommended, or special products you want to draw extra attention to.
• Category-based Products – Displays products from selected categories only. This allows you to organize and showcase specific product groups, making it easier for customers to find items related to their interests or needs.

6 – Responsive Columns

Set product columns per device:

• Desktop – Controls how many product columns are displayed on large desktop screens. This ensures your slider or grid looks well-structured and makes full use of available screen space.
• Laptop – Defines the number of product columns shown on standard laptop screens. This helps maintain a balanced layout across medium-sized displays.
• Tablet – Sets the number of product columns for tablet devices. Optimizing this view ensures better readability and smooth navigation on touch screens.
• Mobile – Determines how many product columns appear on mobile devices. This setting helps create a clean, scroll-friendly layout that enhances usability on smaller screens.

7 – Product Count & Sorting

Set product columns per device:Order By

• ID Sorts products based on their unique ID number. Useful for maintaining a consistent or default product order.
• Date Orders products by their published date. Ideal for showing newest or oldest products first.
• Random Displays products in a random order each time the page loads, creating variety and freshness for users.
• Title Sorts products alphabetically by their title, making it easier for users to browse in an organized manner.
• Last Modified Orders products based on the most recent update. Helpful for highlighting recently updated or edited products.

Order Type

• Ascending Displays products in ascending order (A–Z, oldest to newest, or lowest to highest depending on the selected order type).
• Descending Displays products in descending order (Z–A, newest to oldest, or highest to lowest), which is commonly used to highlight recent or featured items.

8 – Slider Controls Overview

Control how your slider behaves with powerful options.

9 – AutoPlay & Speed

• AutoPlay – Enables or disables automatic sliding of the slider. When enabled, the slider will automatically move to the next item without user interaction.
• AutoPlay Speed – Controls the delay time between each slide transition when AutoPlay is enabled. The default value is 3000ms (3 seconds), allowing enough time for users to view each slide comfortably.
• Sliding Speed – Determines how fast the slide transition animation occurs. The default value is 600ms, providing a smooth and visually pleasing transition between slides.

10 – Interaction Controls

• Pause on Hover – When enabled, the slider will temporarily stop sliding when the user hovers over it. This allows visitors to view product details or interact with elements without interruption.
• Infinite Loop – Allows the slider to loop continuously without stopping at the last slide. Once the final item is reached, the slider seamlessly returns to the first item for a smooth and uninterrupted experience.

Controls the direction in which the slider moves.

• Left to Right Slides move from left to right, which is the standard direction for most languages and layouts.
• Right to Left Slides move from right to left, ideal for RTL (Right-to-Left) languages such as Arabic or Hebrew, or for custom design preferences.

11 – Navigation Settings

Show
Displays the navigation controls (such as arrows or buttons) on all devices, allowing users to manually navigate through the slider.
________________________________________
Hide
Completely hides the navigation controls from the slider while keeping other slider functionalities active.
________________________________________
Hide on Mobile
Displays navigation controls on desktop and tablet devices but hides them on mobile screens to maintain a clean layout and improve mobile usability.
________________________________________
Color
Sets the default color of the navigation icons (such as arrows or buttons), ensuring they match your site’s design.
________________________________________
Hover Color
Defines the color of the navigation icons when a user hovers over them, providing visual feedback and improving interactivity.
________________________________________
Background
Controls the background color of the navigation buttons, helping them stand out or blend in with your slider design.
________________________________________
Hover Background
Specifies the background color of the navigation buttons when hovered, adding a smooth and engaging hover effect.
________________________________________
Border
Allows you to set the border color and style for the navigation buttons, giving them a defined and polished appearance.
________________________________________
Hover Border
Defines the border color that appears when a user hovers over the navigation buttons, enhancing visual interaction and usability.

12 – Pagination Controls

Pagination Options

• Show
  Displays pagination dots below the slider, allowing users to navigate between slides easily.
• Hide
  Completely hides the pagination dots while keeping the slider functional.
• Hide on Mobile
  Shows pagination dots on desktop and tablet devices but hides them on mobile screens to maintain a cleaner layout.

Pagination Styling

• Dots Color
  Sets the default color of the pagination dots, helping them match your site’s design and theme.
• Active Dot Color
  Defines the color of the currently active dot, making it easier for users to identify which slide is being viewed.

13 – Pagination Controls

Pagination Options

• Show
  Displays pagination dots below the slider to indicate the total number of slides and current position.
• Hide
  Completely hides pagination dots while keeping the slider fully functional.
• Hide on Mobile
  Shows pagination on desktop and tablet devices but hides it on mobile for a cleaner, space-saving layout.

Pagination Styling

• Dots Color
  Allows you to customize the color of pagination dots to match your website’s design.
• Active Dot Color
  Defines the color of the active dot, making it easy for users to identify the currently visible slide.

14 – Touch & Drag Controls

• Touch Swipe (Enable / Disable)
  Allows users to swipe slides using touch gestures on mobile and tablet devices for a smooth, intuitive experience.
• Mouse Draggable (Enable / Disable)
  Enables dragging slides using a mouse on desktop devices, enhancing usability and interaction.

15 – Display Options Overview

Control which content elements appear inside the slider. This section allows you to show or hide various product details to match your design and marketing goals.

16 – Product Content Visibility

• Slider Section Title (Show / Hide)
  Controls the visibility of the slider’s main heading or title.
• Product Name (Show / Hide)
  Shows or hides the product title within each slider item.
• Product Price (Show / Hide)
  Allows you to display or hide product pricing based on your layout or promotional strategy.

17 – Discount & Rating Settings

• Discount Color Customization
  Customize the color of discount badges or labels to match your branding.
• Rating Display (Show / Hide)
  Enable or disable star ratings for products.
• Rating Colors
  • Star Color: Sets the color of filled rating stars.
  • Empty Star Color: Defines the color of unfilled stars for better contrast.

18 – Add to Cart Button Settings

• Show / Hide Add to Cart Button
  Controls the visibility of the Add to Cart button on each product.
• Button Color
  Sets the text or icon color of the Add to Cart button.
• Hover Color
  Defines the button color when hovered over.
• Background Color
  Controls the background color of the button.
• Hover Background
  Sets the background color when the button is hovered.

19 – Button Border Styling

Choose from multiple border styles to enhance button appearance:

• Solid – A continuous solid line
• Dashed – A dashed border style
• Dotted – A dotted border appearance
• Double – Two parallel border lines
• Inset – Gives a pressed-in effect
• Outset – Creates a raised button effect
• Groove – A carved 3D-style border
• Ridge – A raised 3D-style border
• None – No border applied

20 – Templates

Choose from a wide range of professionally designed templates to quickly build sliders without custom design work.

• Slider Templates – Classic horizontal slider layouts
• Grid Templates – Structured grid-based product layouts
• Masonry Templates – Dynamic, Pinterest-style layouts

21 – Image Settings

Advanced Image Controls

• Show / Hide Image
  Enable or disable product images within the slider.
• Dynamic Image Dimensions
  Automatically adjust image sizes to fit different layouts and screen sizes.
• Lightbox Support
  Allows users to click on images to view them in a larger, popup lightbox.
• Zoom Effect
  Adds a zoom-in effect on hover or interaction for better product visibility.