How to Configure the Block Showcase
This guide walks you through configuring the Block 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 Block from the available layout types: Slider, Block, and Grid.
Layout Settings
Block Column Count
Select how many column(s) the block will contain.
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.
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.
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.