uStore Widgets

Simple banner widget

Download

Simple banner widget v1

Installation

Watch this video to see how to add widgets to your server and apply them to a store.

Purpose

Simply adds a graphic banner image into the storefront. For example, to advertise a special offer or promotion.

Configuration

After installing, and activating, select a store and customize the theme. In the theme editor, widgets tab, click to add a widget. Turn it on, select the widget and select a slot for it to appear in.

{
  "bannerImage":"https://campus.xmpie.com/banner.jpg",
  "altText":"My Promotion Image",
  "bannerHeight":"100px",
  "linkUrl":"https://www.xmpie.com",
  "backgroundColor":"#ca246b"
}

bannerImage - A URL to the image to display. The image can be located on another web server as shown in the sample code above. However, you can also upload the banner image into the theme editor "Assets" area to host images on your uStore server. The trick, then, is to know the URL to use in your configuration. The best solution to find the link to your uploaded image, is to right-click on the image after you have uploaded it. Select "inspect" and use the same URL that is shown in the style background-image parameter. The URL will include a folder called "Draft". After you publish the theme, the image will be in both the Draft and Published folder. Using the Published folder for the image link will allow you to continue making changes in the theme editor without affecting the published theme.

altText - Text to add to the "alt" parameter of the image tag to improve accessibility.

bannerHeight - Height of the banner image. The banner will scale to this height. If no bannerHeight is provided, 100px will be used as default. Note that when the banner is displayed in the header (either above or below) if the page is displayed on a device with a width less than 1200px, the "search" bar is shown over the top of the banner. This behaviour can be changed by using the .search CSS class to move the search bar, or change the position of the banner when the screen is less than 1200px.

linkUrl - Optional. If a URL is provided, clicking the banner image will navigate to this URL.

backgroundColor - any valid hexadecimal RGB color value to display behind the banner image to fill areas to left and right of the image when the bannerHeight is set to a size that the banner width does not fill the browser width. If no backgroundColor is provided, white will be used as default.

If needed, additional styling can be applied to the .bannerImage class in the theme editor "Custom CSS" section.