Documentation

Pagination Styles

The Pagination Styles settings is active when layout is Carousel and Pagination is enabled, this allow you to refine the appearance and interactive behavior of the navigation indicators (dots or numbers) for your Carousel. These controls ensure the pagination is both functional and visually aligned with your brand’s UI.

• Vertical Positioning: Fine-tune the vertical offset to control how far the pagination sits below the carousel content.
• Gap: Adjust the specific spacing between each individual pagination dot to ensure they are distinct and easy to click.
• Align: Set the horizontal placement of the indicators. Toggle between Left, Center, or Right to balance the layout against your team member cards.
• Default / Active (Toggle)
  • Default:
    • Width & Height: Define the base size of the inactive indicators.
    • Border Radius: Control the shape, from sharp squares to perfect circles.
  • Active:
    • Width & Height: Increase these values to make the active slide indicator physically larger or longer (e.g., a “pill” shape) for better visibility.
    • Border & Border Offset: Add an outline to the active dot and use the offset to create a “halo” effect (spacing between the dot and its border).
    • Border Radius: Independently adjust the curvature of the active indicator.
• Color:
  • Default: The color of inactive indicators.
  • Default Hover: The color shift when a user moves their cursor over an inactive dot.
  • Active: The primary color for the dot representing the current slide.
  • Active Default: The color of the active dot when hovered.
  • Active Border: The specific color of the stroke surrounding the active indicator.

Navigation Styles

• Icon Size: Independently scale the arrow icon within its box. You can create a “minimalist small arrow in a large box” or a “bold arrow that fills the frame.”
• Box Width & Height: Define the clickable area surrounding the navigation arrows. Creating a larger box ensures your gallery is touch-friendly and easy to navigate on mobile devices.
• Border: Add a structural outline to your navigation boxes. This is ideal for “Ghost Button” styles where the background is transparent.
• Border Radius: Use the slider to transition from sharp, modern squares to soft, classic circles.
• Color
  • Icon & Icon Hover: Set the color of the arrow itself. Providing a high-contrast hover color gives the user immediate tactile feedback.
  • Background & Background Hover: Control the fill color of the navigation box.

Sale Badge Styles

The Sale Badge Styles panel provides the aesthetic toolkit to transform a standard “On Sale” notice into a high-conversion visual element. These controls allow you to define the shape, orientation, and “pop” of your discount indicators, ensuring they grab the shopper’s attention without clashing with your product photography.

• Padding: Adjust the internal space within the badge. Increasing the padding creates a larger, more button-like “pill,” while tighter padding keeps the badge compact and minimalist.
• Border Type: Choose from Solid, Dashed, Dotted or more outlines to add a stylistic frame around your discount text.
  • Border Width: Enter the border width.
  • Border Color: Select the border color.
• Border Radius: Control the curvature of the badge corners. A value of 0px creates a sharp, modern rectangle, while a high value (like 50px) creates a friendly, rounded “capsule” shape.
• Vertical & Horizontal Positioning: Use these granular offsets to “pin” the badge to specific areas of the product image. You can tuck it into the top-right corner or center it along the bottom edge for a unique look.
• Rotate: Add a touch of personality by tilting the badge (e.g., a -15° or 10° angle). This “sticker” effect is a proven way to draw the eye toward promotional offers.
• Rotate: Add a touch of personality by tilting the badge (e.g., a -15° or 10° angle). This “sticker” effect is a proven way to draw the eye toward promotional offers.
• Typography
  • Font Family & Size: Select the typeface and scale that best matches your site’s design system.
  • Font Weight: Control the thickness (e.g., Bold for emphasis or Light for a modern look).
  • Letter Case: Force the labels to Uppercase, Lowercase, or Capitalize without editing the form code.
  • Decoration: Apply styles like Underline or Line-through if needed for specific design cues.
  • Line Height & Letter Spacing: Fine-tune the vertical breathing room and horizontal character density.
• Color
  • Text Color: Set the color for your “Sale” text or discount percentage. High-contrast colors (like white text on a dark background) are recommended for readability.
  • Background Color: Apply a vibrant fill to the badge. Using a signature “Action” color—like a bright red, orange, or your brand’s primary accent—ensures that customers never miss a deal while browsing your grid or carousel.

Sale Badge Typography

• Typography
  • Font Family & Size: Select the typeface and scale that best matches your site’s design system.
  • Font Weight: Control the thickness (e.g., Bold for emphasis or Light for a modern look).
  • Letter Case: Force the labels to Uppercase, Lowercase, or Capitalize without editing the form code.
  • Line Height & Letter Spacing: Fine-tune the vertical breathing room and horizontal character density.
• Color
  • Text Color: Set the color for your “Sale” text or discount percentage. High-contrast colors (like white text on a dark background) are recommended for readability.