Skip to main content

Quickstart — Your First Hero Slider in 5 Steps

1. Activate & License​

Install and activate SyteHero, then open SyteHero → Settings (the only screen available before activation). Paste your license key and customer email, click Save Changes, and confirm the status table shows Valid. See the full installation guide if anything looks off.

2. Feature a Product​

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

3. Place the Shortcode​

Edit the page where you want the hero slider. Add [sytehero_featured] 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 .sytehero-hero-cta so the plugin updates its link on each slide. Add .sytehero-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 Heroes 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.