Shappio Help Center / Design & Layout / Banners

Upload Online Store Banners

Give your online store a more professional look by uploading banners that appear on your ecommerce website's home page. Banners could highlight your products and attract customers' attention to the latest exciting offers.

Shappio supports 3 different types of banners for your website homepage

  1. Front Banners or Slideshow
  2. Home Banners
  3. Side Banners

Front Banners

Front banners appear on top of your website's home page, just below the header. If more than one banner are uploaded, it becomes a slideshow.

To change front banner style:

  1. From your Shappio admin, go to Design > Front Banners
  2. In Banner style, select the banner height and banner width
    The banner style applies to all front banners on the home page. For example, if you select Large (500px), the height of front banner space will be 500px, even if you upload a banner larger or smaller in height.
  3. Click Save Banner Style

To upload front banners:

  1. From your Shappio admin, go to Design > Front Banners
  2. Click Add New Banner
  3. Upload your banner image
  4. Click Upload Banner

To add text and buttons on front banners:

  1. From your Shappio admin, go to Design > Front Banners
  2. Upload a new banner or click Edit on an existing banner
  3. In Edit Banner Text, enter the information
  4. Enter Heading
    This text appears in large fonts as main heading or title of banner
  5. Enter Description
    This text appears in smaller fonts as more descriptive message
  6. Enter a URL in target link
    This could be any page URL of your website like a product page or category page URL. When this banner is clicked, it will redirect to this URL
  7. Enter Button Text (if you want to add a button)
  8. Select a button color
  9. Select background color of your text area
  10. Select position of your text area on banner
  11. Click Save
Note
Display order of your banners could be managed through
the Priority column that appears with the list of banners.


Best practices for front banners or slideshows

To make sure that your images work well on all types of devices, here are some things to keep in mind:

  • The "focal point" of the image, or the part you want customers to look at, should be in the center. That way, if your theme doesn't show the edges of the image, the important part will still be visible.
  • Images you use for slideshows or backgrounds shouldn't have text. If the text is a part of the image itself, it might get moved around, cropped, or adjusted based on your theme. Use the banner text editor to add text, buttons, and links to your slideshows.
  • For images you use in slideshows, choose simple images so that any overlying text is easy to read.

Home Banners

Home banners appear in between the content of your website home page, as per your settings.

There are further 3 types of home banners.

  • Top Banners - These banners appear in the header of the home page, just below the top menu.
  • Middle Banners - These banners appear in the middle of the home page, just below the front banners or slideshow.
  • Bottom Banners - These banners appear at the bottom, just above the footer of the home page.
Note
Please note that all types of home banners can be
uploaded and displayed in multiple layers, which means that you can have one or
more layers of banners with one more images in each layer. Images in a single
layer appear horizontally, so it is highly recommended that banners in a single
layer are of the same height.

To upload home banners:

  1. From your Shappio admin, go to Design > Home Banners
  2. Choose the type of banners you want to keep on the home page (Top, Middle or Bottom Banners)
  3. Click Add Banner
  4. In Add Banner popup, click Choose file and select a banner image
  5. Enter Banner Title (optional)
  6. Enter a targeted link
    This could be any page URL on your website, like a product page or category page URL. When this banner is clicked, it will redirect to this URL
  7. Click Save
  8. Repeat the above steps to upload more banners


Side Banners

Side banners appear on left or right panel of your website home page, as per your settings.

To upload left panel banners:

  1. From your Shappio admin, go to Design > Left Panel Banners
  2. Click Add New Banner
  3. Upload your banner image
  4. Click Upload Banner

To upload right panel banners:

  1. From your Shappio admin, go to Design > Right Panel Banners
  2. Click Add New Banner
  3. Upload your banner image
  4. Click Upload Banner

To add text and links on-site banner:

  1. From your Shappio admin, go to Design > Left Panel Banners/Right Panel Banners
  2. Upload a new banner or click Edit on an existing banner
  3. In Edit Banner Text, enter the information
  4. Enter Heading
  5. Enter Description
  6. Enter a URL in the target link
    This could be any website page URL, like a product page or category page URL. When this banner is clicked, it will redirect to this URL
  7. Click Save
Note
Display order of your banners could be managed through
the Priority column that appears with the list of banners.


Related Topics