15 steps to complete.
This guide details the steps involved in adding banners that will appear in a slideshow on the Home and Products pages of your eCommerce Site.
For more information about the Banner page, see: 2.1. Adding Banners.
In eCommerce Admin, navigate to: Content Management > Banner.
On the Banner page, click the + ADD BANNER button on the top right corner of the page.
The Add Banner pop-up window opens.
In the Add Banner pop-up window, in the Title text field, type a memorable name for your banner.
In the Description text field, type a description for the banner.
The following steps show the two methods to upload an image: Upload New Image and Enter Image Url.
Under the Image section, click the Drop files here to upload area.
Your computer’s file finder dialog box will open.
Navigate to your image and click Open.
Alternatively: from your computers finder dialog box, drag and drop the image to the Drop files here to upload area.
The Drop files here to upload area expands and the details of your image are visible.
Note: Images must be less that 50 MB to upload and in order to display properly and they should be at least 644 px high, with an aspect ratio of 16:9. Suggested image size is 1200 px wide by 675 px high.
Alternatively, under the Image section, click the dropdown to reveal two options:
In the Image section dropdown, select Enter Image URL.
In the Image URL text field, type the URL to the image file.
Note: Use this when an image is hosted in a cloud-based app or in your own CMS with a public URL. Use the complete URL including https:// (e.g., https://www.directscale.com/images/banner.png/)
In the Call to Action Text field, type the url of where the banner takes you when clicked.
Note: For internal pages: Add the page location using a forward slash before the location name. (e.g. /Home, /BusinessDashboard, /Community). For external pages: Use the complete URL including http:// or https://.
Under the Call to Action Text field, click the Open in New Window checkbox, if necessary.
Note: As a rule of thumb, if the link points to an external site, select the option to Open in New Window.
Under the Open in New Window checkbox, in the second Call to Action Text field, type some additional text that will appear on the banner.
This can be flavor text, or indicative text (e.g., “Click Here to Learn More!”)
Note: Only necessary if the first Call to Action Text link is added.
In the Banner Use For dropdown, select whether the banner will be a Primary, Secondary, or Product banner.
- Primary Banners: Puts the image in the slider on the homepage of the eCommerce Site. Recommended size: 1365x770.
- Secondary Banners: Puts the image in the 2x2 content block below the homepage slider. Because of this, it is recommended you add two 670x670 square images.
- Product Banners: Puts the image in the slider on the products page of the eCommerce Site. Recommended size: 1365x770.
Click the Published toggle on if you’d like to publish the banner once the configuration is saved.
Note: You can also publish the banner later in the Banners List by clicking the Publish icon.
The rest of the settings are DirectScale’s powerful set of settings known as Multi-Faceted Configuration (MFC).
Enter you specific configurations on who can view the banner. For more information, see: Multi-Faceted Configuration (MFC) in eCommerce Admin.
For a step-by-step guide, see: How to Configure a Page Element in eCOmmerce Admin with MFC.
Click the SAVE button in the top right corner when finished.
Important: the banner will only show on the eCommerce Site if it is set to Published and the correct configuration settings are in place.
Repeat the above steps for any additional Primary, Secondary, and Product banners.
If your banners are not displaying in your eCommerce Site, see: What If My Banners Aren’t Displaying?
You now know how to add a banner in eCommerce Admin.