How to Configure the Slider Showcase
This guide walks you through configuring the Slider Showcase feature for product categories on your store page. This interactive layout allows for a dynamic, horizontally scrolling display with customizable styling and functional settings to enhance your site’s engagement.
General Settings
Display Settings
Select Layout
Choose Slider from the available layout types: Slider, Block, and Grid.
Layout Settings
Slider Column Count
Select how many column(s) the slider will contain.
Slider Row Count
Select how many row(s) the slider will contain.
Column Breakpoints
Configure how many columns your category showcase should display based on the users’ device screen size.
Category Selection
Category Filter
Control which product categories appear in the showcase:
All: Includes all product categories automatically.
Specific: Manually select which categories to display.
Enable Additional Categories
Enable this to add more categories, increasing flexibility and content richness.
Sort By
Choose how the categories are sorted (e.g., Name, Date, Category ID).
Sort Order
Select between ascending or descending order.
Categories Display Limit
Set a maximum number of categories to show (Not applicable for Grid layout).
Include Sub-categories
Toggle ON/OFF to show/hide child categories.
Hide Empty Categories
Toggle ON/OFF to exclude/include categories with no products.
Showcase Settings
Essentials
Section Heading
Enable the toggle and input a heading.
Section Description
Enable the toggle and add a description for context.
Alignment
Set alignment of heading and description (e.g., Left, Center, Right).
Showcase Styling
Choose Card Color
Customize card appearance using HEX codes or color picker for: Background, Text, Hover Background, Hover Text.
Border Radius
Set card corner rounding (pixels). Use the settings icon to control each corner individually.
Gap Between Cards
Set spacing between cards in pixels.
Content Placement
Select a modern styling option from Overlay, Top, Bottom, Right, or Left.
Overlay Content Position
Choose where the content (title, button, etc.) should appear on the card (e.g., Top Left, Center Center, etc.).
Content Padding
Set padding between the card content and its edge (in pixels). Use the settings icon to control each side independently.
Content Inner Color
Use the color picker or enter a HEX code to set the color for BG Color, Text Color, Hover BG Color, and Hover Text Color.
Content Inner Padding
Set padding for the overlay content (in pixels). Use the settings icon to control each side independently.
Category Showcase
Use toggles to turn ON/OFF the following elements:
Categories Image: Show/hide images for each category.
Categories Icon: Display/hide icons alongside or instead of images.
Category Title: Show/hide the name of the category.
Category Description: Display/hide the category description.
Product Quantity: Show/hide the total number of products per category.
Sub-categories Product Quantity: Show/hide product counts for sub-categories.
Custom Text: Add additional details, such as “Price Range” or “Category Information.”
Button Style
Button
Toggle to enable a call-to-action button on each card.
Button Text
Customize the button label (e.g., “Shop Now”, “Explore”).
Button Style
Choose from predefined styles.
Arrow Icon: Uncheck this box if you do not want to display the arrow icon within the button.
Button Colors
Customize the appearance by using the color picker or entering a HEX code to set the colors for BG Color, Text Color, Hover BG Color, Hover Text Color, Border Color, and Border Hover Color.
Slider Settings
Ticker Settings
Ticker Carousel
Enable for continuous scrolling display.
Ticker Slider Direction
Choose scroll direction: Left-to-Right or Right-to-Left.
Ticker Speed
Set scroll speed: Slow, Medium, or Fast.
Slider Settings
Automatic Slideshow
Enable to auto-play slider.
Slide Speed
Set the duration of the animation effect when transitioning between slides within the slider, in milliseconds.
Stop on Hover
Toggle to pause the slider when hovering over it with the mouse.
Unlimited Loop
Enable the slider to repeat endlessly.
Slide Controls
Navigation Arrows
Show or hide navigation arrows or dots.
Navigation Position
Choose where controls appear on the slider.
Arrow Styles
Select a design for navigation arrows.
Button Styles
Pick the look for the slider control buttons.
Button Background Styles
Choose a background style for buttons.
Button Colors
Customize the appearance by using the color picker or entering a HEX code to set the colors for BG Color, Text Color, Hover Color, Hover Text Color, Border Color, and Border Hover Color.
Slide Counters
Enable/disable dot indicators for slide count.
Counters Styles
Select a design for pagination (e.g., dots, dashes).
Counters Color
Customize the appearance by using the color picker or entering a HEX code to set the colors for BG Color, Text Color, Hover Color, Hover Text Color, Border Color, and Border Hover Color.
Others
Touch Interaction
Enable or disable user navigation by swiping on touch-enabled devices.
Scroll Interaction
Control whether users can navigate slides using the mouse wheel.
Draggable Slides
Enable or disable drag-based navigation for slides via the mouse.
Free Mode
Allow slides to move freely without snapping to a set position, offering smooth scrolling.
Images Settings
Image Layout
Choose a layout from: Rectangle, Rounded, or Circle.
Zoom on Hover
Toggle ON/OOF to enable image zoom on hover.
Fonts Settings (Pro Feature Only)
Google Fonts Support
Toggle ON/OOF to enable/disable custom typography using Google Fonts.
Main Title & Category Title
Customize the font styling for the Main Title and Category Title with the following options:
Text Tag: Choose HTML tag (e.g., P, H1, H2).
Font Family: Select your preferred font.
Text Weight: Set font weight (e.g., 100, 400, 700).
Size: Define size in px.
Line Height: Adjust spacing between lines.
Letter Spacing: Control spacing between characters.
Alignment: Align text (left, center, right).
Decoration: Add bold, italic, or underline.
Color: Set text color via color picker or enter a hex code.