Skip to content

Slider Items

Purpose

Create and manage banner/slider images for your homepage and landing pages. Build attractive hero sections with images, titles, and call-to-action buttons.

Accessing Slider Items

Navigate to: Marketing & Content > Slider Items from the sidebar

List View

Slider Items List

The list displays all slider/banner items for your homepage.

Table Columns

Image

  • Format: Image thumbnail
  • Purpose: Banner image displayed in slider

Title

  • Format: Text
  • Purpose: Banner headline/title

Description

  • Format: Text
  • Purpose: Banner supporting text

Button Text

  • Format: Text
  • Purpose: Call-to-action button label

Button URL

  • Format: URL
  • Purpose: Where button links to

Row Actions

  • Edit: Modify slider item
  • Delete: Remove slider item

Bulk Actions

  • Delete: Remove multiple slider items
  • Export: Export slider data to Excel/CSV

Creating a Slider Item

Create Slider Item

Click "New Slider Item" to add a new banner/slider image.

Form Fields

Image Required

  • Type: File upload (image validation)
  • Purpose: Banner image displayed in slider
  • Recommended Aspect Ratio: 16:5 (wide banner)
  • Recommended Size: 1920 × 600 pixels
  • Formats: jpg, png, gif, webp, etc.
  • Note: Larger dimensions recommended for high-quality displays

Title Optional

  • Type: Text input (max 255 characters)
  • Purpose: Banner headline/headline text
  • Translatable: Yes - provide in each language
  • Examples: "Summer Collection", "Special Offer", "New Arrivals"

Description Optional

  • Type: Text input (max 255 characters)
  • Purpose: Supporting text below title
  • Translatable: Yes - provide in each language
  • Examples: "Discover our latest styles", "50% off all items", "Limited time offer"

Button Text Optional

  • Type: Text input (max 255 characters)
  • Purpose: Call-to-action button label
  • Translatable: Yes - provide in each language
  • Examples: "Shop Now", "Learn More", "View Collection"

Button URL Optional

  • Type: URL input (max 255 characters)
  • Purpose: Where button links when clicked
  • Examples:
  • "/shop" (internal page)
  • "/collections/summer" (category)
  • "https://example.com/promotion" (external)

Color Customization

Customize the appearance of text and buttons on your slider items to match your brand or improve visibility against different background images.

Slider Item Colors

Title Color

  • Type: Color picker
  • Default: #FFFFFF (white)
  • Purpose: Set the color of the title/headline text

Tips: - Use light colors for dark background images - Use dark colors for light background images - Ensure good contrast for readability

Description Color

  • Type: Color picker
  • Default: #FFFFFF (white)
  • Purpose: Set the color of the description/subtitle text

Tips: - Usually matches or complements title color - Slightly lighter/softer shade can create visual hierarchy - Test on actual slider to ensure readability

Button Color

  • Type: Dropdown selection
  • Default: Primary
  • Purpose: Choose the button style/color

Options:

Color Description Use Case
Primary Main brand color Default choice, most CTAs
Secondary Secondary brand color Alternative actions
Accent Accent/highlight color Special emphasis
Neutral Gray/neutral tone Subtle actions
Info Blue information color Informational banners
Success Green success color Positive actions, sales
Warning Yellow/orange warning Urgency, limited time
Error Red error/danger color Final sale, clearance

Selecting Button Color:

  • Match your brand guidelines
  • Consider contrast with background image
  • Use "Warning" for urgency (e.g., "Limited Time!")
  • Use "Success" for positive messages (e.g., "Free Shipping!")

Create Actions

  • Create: Save and return to list
  • Create & Create Another: Save and open blank form
  • Cancel: Discard changes

Editing a Slider Item

Click the Edit icon to modify slider item: - Banner image - Title, description, button text - Button link destination - Translations in other languages

Slider Translation Support

Slider items support multiple languages:

  1. Edit the slider item
  2. Use the Locale dropdown (top right)
  3. Switch between languages
  4. Update title, description, and button text for each language

Slider Display

Slider items appear on your homepage in the following order:

  • Items sorted by their creation order
  • All items rotate/cycle in the slider
  • Each banner displays image with optional overlay text
  • Button is clickable when configured

Image Guidelines

Aspect Specification
Aspect Ratio 16:5 (Wide Banner)
Recommended Width 1920px
Recommended Height 600px
Minimum Width 1280px
Format JPEG, PNG, WebP, GIF
Max File Size Usually 5-10MB

Image Tips

  • Use high-resolution images for desktop and mobile
  • Include product images for e-commerce promotions
  • Add text overlays for branding
  • Use consistent styling across all sliders
  • Optimize images to reduce page load time

Key Information

  • Hero Banners: Primary landing page image carousel
  • Flexible Content: Image is only required field
  • Optional Text: Title, description, button all optional
  • Color Customization: Adjust text and button colors for each slide
  • CTAs: Include button with link to drive traffic
  • Multi-Language: Translate all text for multilingual stores
  • Visual Priority: Appears prominently on homepage
  • Display Order: Items appear in creation order
  • Responsive: Banners scale to different screen sizes