User Guide
Variants

Variants

Variants of the banner are typically visually unique versions of your banner. This is the core of SmartSaleBanner. You may add as many or as few variants as you’d like (minimum 1). Click the “Add Variant” button to add a new variant. Click on the variant’s text to edit a single variant. When editing you will see a live preview of your banner.

Please note that you will need to save all changes using the save button at the top of the page for changes to take effect. They will be effective immediately for all visitors.

Variant Settings

  • Banner Text: This is the text that will be displayed to your visitors (“Launch Sale $100 Off”)
  • Redirect Url: (optional) This is the url that you may enter to redirect your users when they click the banner. This could be a checkout page or a section on your homepage like https://smartsalebanner.com#pricing (opens in a new tab)
  • Clipboard Text: (optional) This is the text that you may enter that will be copied to the visitors clipboard when they click the banner. This could be a coupon code like LAUNCH100
  • Sticky Header: This is a toggle option to either have it enabled so the banner stick to the top of the page when the user scrolls so it remains in view, or disabled so that it only lives at the top of the page and is not visible when scrolling beyond view.
  • Opens In New Tab: This is a toggle option that only relates to the Redirect Url. When enabled it will open the redirect url in a new tab of the visitor’s browser.

Variant Style

  • Banner Height: This is the height in pixels of the banner, a good number would be somewhere between 20 and 40.
  • Banner Color: This is the background color of the banner. You may enter a specific color hex code like 00FF00
  • Text Size: This is the font size of the text on the banner.
  • Text Color: This is the color of the font of the text on the banner. Use the preview to determine readability between the options you’ve selected for the banner and text colors.
  • Font: SmartSaleBanner uses your website’s font to create a unified branding impression for your visitors. You may not select a specific font during this configuration.

A Note For Advanced Users

You may continue to customize the banner further with custom CSS if you’d like. Simply apply any styling rules to the following css classes:

  • .ssb-banner-container this class is applied to a <div> element that contains the banner
  • .ssb-banner-text this class is applied to a <p> element that contains the Banner Text
BannersAnalytics