Skip to main content

Quickstart — Your First Hero Slider in 5 Steps

1. Activate & License​

Install SyteSlyders, go to Plugin Setup, enter your license key and email, and save. See the full installation guide for details.

2. Feature a Product​

Edit any product, toggle Featured Slyder Product ON, click Select Slyder Media, choose a hero image, and Update the product.

3. Place the Shortcode​

Edit the page where you want the hero slider. Add [slyders_featured_hero] in your page builder before your overlay content (CTA button, text). See the theme guides for step-by-step placement instructions for Avada, Divi, or Elementor.

4. Style Your Overlay​

Give your CTA button the class .slyders-hero-cta so the plugin updates its link on each slide. Add .slyders-hero-text-area-1 to your text element for dynamic text injection.

5. Preview​

View the page. Your hero slider should show the featured product's image with the CTA linked to the product.

Next Steps​

  • Add more featured products — they rotate automatically.
  • Customize hero text via the Set Defaults modal on the Slyders tab.
  • Set defaults per device in the Settings tab (shortcode defaults) or the Set Defaults modal (hero text defaults).
  • Add custom CSS in the Custom CSS tab.