All Collections
Managing your Online Store Widgets and Features
Your Online Store's Slider Banner (Hero Version)
Your Online Store's Slider Banner (Hero Version)

What is Hero Slider and how it improves upon the slider banner by interacting with your customers in a different way.

Dan McCarty avatar
Written by Dan McCarty
Updated over a week ago

Note: We design banners and social media images for monthly releases. Find banners and images here: Go to Downloads > Marketing Materials

Our Hero Slider display increases the effectiveness of a typical slider banner by tripling the number of ways a user can interact with the display.

Features:

The Hero Slider is a hybrid image and product slider which combines a banner and two associated products. The admin user may upload and any custom billboard-sized image for the banner portion of this display, and the slider will automatically adjust its size to the vertical dimension of the banner. The user may specify any URL as the link for that banner, or no link if no click-through is desired. Using our tagging system, the user selects which products to associated with each banner, and the Hero Slider dynamically displays those products when the banner is loaded on the page.

Specifications:

  • Each slide is comprised of one banner and two associated products

  • Product information displayed: Image, Name, Price, MSRP (if applicable).

  • In addition to the product information, the stock quantity of the default variant, and a link to the containing category are also displayed.

  • May be used in single or two-column website layouts

How to tag for the Hero Slider:

Each slide in the Hero Slider display has a corresponding number, called an index number. The index number for the first slide is '1', for the second slide the index number is '2', and so on. Each tagged object on a given slide -- that is, the banner and both products -- use the index number for that slide as a part of their tag.

In the following example slides, we have used "heroslider" as the tag name.

Slide 1
Slider Tag:heroslider banner1
Product Tags: heroslider product1 &&  heroslider product1

Slide 2
Slider Tag:heroslider banner2
Product Tags: heroslider product2 &&  heroslider product2

In each example, notice how the index number matches the number used in the tag for the banner and both products. 

Note: We design banners and social media images for monthly releases. Find banners and images here: Go to Downloads > Marketing Materials

Did this answer your question?