Knowledge Base
IRP
+
Admin Messages (1)
+
Common Tasks (1)
+
Interventions (1)
+
Languages (1)
+
Questions & Answers (1)
+
Referrals (2)
+
Reviews (1)
+
Site Scripts (1)
+
Web Services (1)

Banners

How Tos (2)

You can find this section under Interface & Design > Banners in the IRP Admin left navigation menu.

You use the Banners section to add banners, graphics and images to your IRP. There are several parts of the IRP website that can incorporate banners, with each area potentially serving its own unique purpose, depending on your online marketing strategy.

The main Banners.aspx page appears as follows:

IRP Banners screen
 

The screen shows the following details:

  • ID: This is the unique ID of the banner in the IRP system.
  • Active: This shows whether or not the banner is Active on the front end of the website. If you check or uncheck this box, make sure to click the Update All Banners button.
  • Archived: This shows whether or not the banner is archived (True/False). Archived banners are deactivated but you can reactivate them if required. You may want to use this feature for seasonal banners for example, or for banners that you are working on but want to protect from being made active until they are ready. For details, see the How to Add or Edit a Banner article in this section.
  • Weight: The order in which banners will appear in relation to other banners of the same type. The higher this number, the earlier it will be displayed in sequence. For example, a banner with a Weight of 10 will appear before those with a Weight of 9. You can use this column to quickly update the weight of all banners on the Banners.aspx page instead of having to update each individual banner on the BannersEdit.aspx page. If you make changes, remember to click the Update All Banners button.
  • Type: This indicates whether the banner is a standard image or custom HTML content.
  • Banner: This shows an image of the banner.
  • File Size: This shows the file size of the banner.
  • Location: This shows the location of the banner on the front end of the website. See the section below about Banner Locations.
  • Countries: This shows the department that the countries that the banner is restricted to.
  • Banner Name: This shows the name of the banner that is used to identify it within IRP Admin.
  • Department: This shows the department, or tab, that the banner is related to. This could be ‘All Departments’.
  • Clicks: This shows the number of times that a banner has been clicked on the front end of the website.
  • Delete: Click this button to delete a banner. If you do so, make sure to click the Delete Selected Banners button.
  • Copy: Click this button to make a copy of an existing banner. By default, any copied banners will be inactive exact copies, however, on the BannerCopySettings.aspx lightbox page, you can specify the following for the new copy:
    • Active/Inactive
    • Banner Name
    • Banner Image
    When you provide a new banner image it will replace any existing banner content and will be the only displayed banner image. Therefore the following content will be automatically removed from the new copy when a new image is provided:
    • Any language specific banners
    • Any banner HTML content
    If you leave the Banner Name text box blank, the existing Banner Name (if available) will be used. If you leave the Banner Image file upload empty, the existing Banner Images (including language-specific banners) will be used.
    Any associated Shipping Countries and Promotions will also be copied when you copy a banner.
  • Edit: Click this button to make changes to existing banners. For details, see the How to Add or Edit a Banner article in this section.

Use the Search bar to find any banner. If you expand Other Options under the Search bar you can choose to show only Active, Inactive, both Inactive and Active, or Archived banners. You can also search by banner location, department and country.

At the top of the screen you can use the following buttons:

  • Add New Banner: Click this button to begin creating a new banner. For more details, see the How to Add or Edit a Banner article in this section.
  • Show All Banners: Click this button to display all banners in the main grid on the screen.
  • Bulk Update Settings: Click this button to go to the BannerBulkSettings.aspx page where you can select a banner location to bulk update and select various settings for the banner including dimensions, animation type, background colour, display time and transition time. For more details, see the How to Bulk Update Banner Locations article in this section.
  • Cogwheel: Click this icon to go to the InterfaceSettings.aspx#Banners page where you can configure multiple Application Settings for banners.

Banner Size Guidelines

  • Mobile banner and image dimensions (width and height) should always be doubled so that they display clearly on retina screens.
  • As a general rule, all images should be 'saved for web' from Photoshop.
  • Images should also be run through an image compressor such as https://kraken.io/web-interface before uploading - this cuts an average of 20% off images and makes for much faster page loads.
  • Average banner size should generally not exceed 20kb.
  • Maximum banner size should never exceed 100KB for large banners. If your banner is any larger than this then you probably have not run it through an image compressor.
  • HTML banner dimensions are limited by the width and height values that are set in the banner Key Information section. To make the banner HTML fill all available banner space, a containing div with a width of 100% and a height of 100% should be added to the banner content. The width of HTML banners will be stretched based on screen size in the same way as image banners when the "Stretch Banner" setting is ticked.
  • It is the responsibility of the Admin User to ensure that HTML banner content is displayed within the banner dimensions. Any overflowing content will not be visible to customers.
  • Please Note: When compressing images, do make sure to compare before and after. It is important to cut down banner size without visibly degrading the quality of the images.

Banner Locations

The following table lists all banners, their recommended widths and their locations on the IRP website. Note that active desktop banners will be shown on both the desktop and the mobile sites unless mobile banners have also been activated.

Type Rec. Width Description
Add to Basket 350px Appears below the Buy buttons on the product pages.
Basket 900px Full-width banner that appears below the basket summary on the basket page. Use this to add more payment reassurance and USPs.
Below Logo 215px Appears to the left of the category and brand drop-downs – only if this section is displayed.
Bottom 1010px Appears below the site footer on all pages (below the bottom navigation).
Brand 830px x 120px Appears at the top of the listings on brand pages.
Brand Category 830px x 120px Appears at the top of the listings on brand category pages.
Category 830px x 120px Appears at the top of the listings on category pages.
Checkout Login 640px Appears on the Secure/Login.aspx page, above the title.
Heading 1010px Appears below the top navigation section of the IRP, on all pages. This is usually where you put shipping USPs and so forth.
Mobile Add To Basket 640px Appears below the Buy buttons on the product pages on the mobile site.
Mobile Basket 640px Full-width banner below the basket summary on the basket page on the mobile site. Use this to add more payment reassurance and USPs.
Mobile Bottom 640px Appears below the site footer on all pages (below the bottom navigation) on the mobile site.
Mobile Brand 640px Appears at the top of the listings on brand pages on the mobile site.
Mobile Brand Category 640px Appears at the top of the listings on brand category pages on the mobile site.
Mobile Category 640px Appears at the top of the listings on category pages on the mobile site.
Mobile Checkout 640px Appears below the checkout on the mobile site.
Mobile Checkout Login 640px Appears on the Mobile/Secure/MobileLogin.aspx page, above the title. On the mobile site only it is possible to change the order of the banner and the title label via the CSS classes checkout-title-bar and mobile-banner-checkout-login-container.
Mobile Heading 640px Appears below the top navigation section of the IRP on all pages on the mobile site. This is usually where you put shipping USPs and so forth.
Mobile Home Page 640px Appears centrally at the top of a home page on the IRP on the mobile site, below the Heading banner.
Mobile Product Group 640px Appears
Mobile Product Super Group 640px Appears on Mobile Product Super Group pages.
Mobile Promotion Current 640px Appears on the page showing all active promotions on the mobile site (http://YourIRP.com/Mobile/MobileCurrentPromotions.aspx).
Mobile Promotion Heading 640px Appears after any standard (non-promotion) Heading banners and below the basket summary on the basket page on the mobile site.
Private Sale Checkout Login 640px Appears on the PrivateSale/Secure/Login.aspx page, above the title.
Private Sale Heading 1010px Appears within the Private Sale section of the site.
Product Group TBC Appears on Product Group pages.
Product Super Group TBC Appears on Product Super Group pages.
Promotion Add To Basket 350px Appears above any standard (non-promotion) Add to Basket banners on the Models pages for Promotions.
Promotion Current 670px (when left and right nav are shown)
830px (when only left nav is shown)
1010px (when no left or right nav are shown)
Appears on the page showing all active promotions (http://YourIRP.com/CurrentPromotions.aspx).
Promotion Heading 900px Appears after any standard (non-promotion) Heading banners and below the basket summary on the basket page.
Purchase Guarantee 1010px Full-width banner that appears at the bottom of the product pages. Note that there is an Application Setting called 'Show Purchase Guarantee' - you need to enable this in order for any active Purchase Guarantee Banners to appear on the Models page.
Right Slot 1 160px Appears on the right side of the IRP home page.
Right Slot 2 160px Appears below Right Slot 1 on the right side of the IRP home page.
Right Slot 3 160px Appears below Right Slot 2 on the right side of the IRP home page.
Top 670px (when left and right nav are shown)
830px (when only left nav is shown)
1010px (when no left or right nav are shown)
Appears centrally at the top of a home page on the IRP, under the Heading banner.
Trade Below Logo 215px Appears to the left of the category and brand drop-downs on the Trade site – only if this section is displayed.
Trade Checkout Login 640px Appears on the Trade/MyAccount/Login.aspx page, above the title.
Trade Heading 1010px Appears below the top navigation section of the IRP, on all pages of the Trade site. This is usually where you put shipping USPs and so forth.
Trade Promotion Current 670px (when left and right nav are shown)
830px (when only left nav is shown)
1010px (when no left or right nav are shown)
Appears on the page showing all active promotions (http://YourIRP.com/Trade/CurrentPromotions.aspx).
Trade Promotion Heading 900px Appears after any standard (non-promotion) Heading banners and below the basket summary on the basket page.
Trade Right Slot 1 160px Appears on the right side of the IRP home page on the Trade site.
Trade Right Slot 2 160px Appears below Trade Right Slot 1 on the right side of the IRP home page on the Trade site.
Trade Right Slot 3 160px Appears below Trade Right Slot 2 on the right side of the IRP home page on the Trade site.
Trade Top 670px (when left and right nav are shown)
830px (when only left nav is shown)
1010px (when no left or right nav are shown)
Appears centrally at the top of a Trade site home page on the IRP, under the Heading banner.

Example Banner Locations

Some of the main banner locations are illustrated in the screen captures below.

Popular banner locations:

Screen capture showing the locations of some of the banners on IRP websites.
 

Add to Basket banner:

Screen capture showing the location of the Add to Basket banner on IRP websites.
 

Promotion banners:

Promotion Current on CurrentPromotions.aspx:

Screen capture showing the location of the Promotion Current banner on IRP websites.

Promotion Heading on Basket.aspx:

Screen capture showing the location of the Promotion Heading banner on IRP websites.

Mobile Promotion Current on /MobileCurrentPromotions.aspx:

Screen capture showing the location of the Mobile Promotion Current banner on IRP websites.

Mobile Promotion Heading on /MobileBasket.aspx:

Screen capture showing the location of the Mobile Promotion Heading banner on IRP websites.

Promotion Add To Basket on Model page:

Screen capture showing the location of the Promotion Add To Basket banner on IRP websites.

Banner Features

Using elements of graphic design, banners offer you the ability to display key marketing messages, offers and promotions, positive affirmations, reassurances and unique selling points to your new or existing visitors and customers.

There are several features that you can configure for each of the banner locations:

  • Animation — Multiple banners can be rotated in each location.
  • Country — Country-specific banners can be displayed, dependent on the customer’s country settings.
  • Language — Language-specific banners can be displayed, dependent on the customer’s language settings.
  • Department — Department- or tab-specific banners can be displayed.
  • The 'HTML' banner type includes the following key features:
    • HTML banners are available for all banner locations on the desktop, mobile and trade sites.
    • All banner animations that are available for image banners are also available for HTML banners.
    • The 'Banner Repeat' setting is not applicable for HTML banners and is hidden on the BannersEdit.aspx page when 'HTML' is selected as the banner type.
    • HTML banners can contain images. These can be uploaded to the HTML Banner images directory using the 'Upload Files' button on the BannersEdit.aspx page which is visible only when 'HTML' is selected as the banner type.
    • Language-specific HTML banner content can be added via the banner HTML translations.
    • Scaled-down HTML banner previews are displayed on the BannersEdit.aspx page.

Note also that there is an Application Setting in the ‘Technical Settings’ grouping called ‘Cache Version Banners’. This setting allows front-end Banners to be uncached automatically without uncaching all other site content. The value of this setting is incremented automatically when a Banner is inserted or updated on the BannerEdit.aspx page and when a Banner is scheduled to activate or deactivate.

See the How To Add or Edit a Banner topic in this section for more detailed information.



How To Guides (2)

To add or edit a banner, follow these steps:

  1. Go to Interface & Design > Banners in the IRP Admin left navigation menu.
    To add a new banner click the Add New Banner button above the Search bar.
    To edit a banner click the Edit button beside the banner that you want to edit.
  2. Enter or edit the following details. If you see an asterisk (*) beside a setting it means that the setting is required.
    Note: The settings that you see depend on the Banner Location setting that you select (making it a basket, private sale, promotional or mobile banner and so forth), so you might not see all of the settings that are described in the table below.
  3. SettingDescription
    Basic Banner Details
    Banner ID The unique IRP identifier for this banner. This is generated automatically when you add a banner.
    Active Active banners will appear on the front end of the website for customers to see. Inactive banners will not appear on the front end.
    Archived This setting is visible only if you are editing a banner that has been archived. You can archive Banners when they are not being used (typically inactive) and unlikely to be reactivated. This will exclude them from the Admin banner search results by default and can be used to keep the number of banners manageable. Note that archived banners cannot be active. If you want to un-archive the banner, uncheck the box and click the Update Banner button.
    Banner Location The location where the banner will be displayed. For more details on the locations, see the overview section above this ‘How To’ topic.
    Private Sale If this banner is a private sale banner, this is the private sale that it relates to.
    Brand If this is a brand-category or brand-specific banner, the brand component of this relationship.
    Category If this banner is category-specific, this is the category that it relates to.
    Department The department or tab that this banner will appear under. Select ‘All Departments’ for the banner to display under all department tabs.
    Banner Name The IRP Admin name for the banner. This will only be visible in the back end.
    Content Type Banners can display an image or custom HTML content. For more information, see the main help topic above.
    Upload New Banner Click the Browse button to quickly upload a banner image. Note that adding a banner image will overwrite any previously-uploaded banner images. Also, language-specific banner images must be in the same format as the main banner image, e.g. .jpg, .gif, .png. etc.
    Current Banner This shows the currently uploaded banner image.
    Schedule Activation This feature allows a banner to be activated at a specific time in the future. This allows you to cater for out-of-hours sales go-live preparation, for example. Select the day, hour and minute when this should happen. Note that the selected date must be in the future. If you want the banner to be activated at a future point, leave the banner set to Inactive.
    An 'uncache' is performed when a scheduled banner is activated or deactivated so that it will be immediately updated on the front end.
    Note that if the banner is for a Promotion then the drop-down menu will be replaced with the following statement: ‘Promotional Banners are scheduled according to the Promotion Schedule’ and you will be able to click an Edit Promotion button.
    Schedule Deactivation This feature allows a banner to be deactivated at a specific time in the future (Activation and Deactivation times cannot be the same). This allows you to cater for out-of-hours sales go-live preparation, for example. Select the day, hour and minute when this should happen. Note that the selected date must be in the future. If you want the banner to be deactivated, set it to Active.
    An 'uncache' is performed when a scheduled banner is activated or deactivated so that it will be immediately updated on the front end.
    Note that if the banner is for a Promotion then the drop-down menu will be replaced with the following statement: ‘Promotional Banners are scheduled according to the Promotion Schedule’ and you will be able to click an Edit Promotion button.
    Key Information
    Always Show Banner Check this box if an ‘All Departments’ banner should override a department- or tab-specific banner.
    Weight The order in which banners will appear in relation to other banners of the same type. Banners with a higher weight value will take precedence over banners with a lower weight value. For example, if you had three 'Top' Banners, one with a Weight of 3, one with a Weight of 2 and one with a Weight of 1, the one with the Weight of 3 would show first, followed by the one with the Weight of 2 and finally the one with the Weight of 1.
    Width (px) The width of the banner in pixels. This setting is populated automatically with the optimal width according to the Banner Location that you have chosen in the Basic Banner Details section. For example, for an ‘Add To Basket’ banner, the optimal width is 300, for a ‘Heading’ banner, the optimal width is 750, and so forth. We recommend that you leave these values at their default optimal values. If you do change them, make sure that you check how the banners look on your website and adjust the size as necessary.
    Height (px) The height of the banner in pixels. This setting is populated automatically with the optimal height according to the Banner Location that you have chosen in the Basic Banner Details section. For example, for an ‘Add To Basket’ banner, the optimal height is 200, for a ‘Heading’ banner, the optimal height is 50, and so forth. We recommend that you leave these values at their default optimal values. If you do change them, make sure that you check how the banners look on your website and adjust the size as necessary.
    Stretch Banner Checking this box will stretch the banner to 100%. When this is not ticked, the banner will display with the width of the image, which may or may not be what you want – so always double check how it looks. Note that 'Banner Repeat' (see next) will override Banner Stretch if you select both.
    Banner Repeat The axis that a banner will repeat on (x, y or both).
    Background Colour The optional background colour of the banner. This is beneficial only when the banner is not stretched or repeated.
    Background Style Left This is the CSS style to appear to the left of the banner. This may contain fully-referenced background images. This is optional, and overrides any background colour specified.
    Background Style Right This is the CSS style to appear to the right of the banner. This may contain fully-referenced background images. This is optional, and overrides any background colour specified.
    Link Address The URL that will open when someone clicks on a banner. You can click the Get Link button to generate a link. Click the Translate link in order to tranlsate the link into any active language in your system. Enter the text or click the Get link button to generate your link and then save your changes. When the banner is clicked in the web interface it should refer users to the link depending on the language set on the page.
    Open link in new Browser Window Check this box to allow any link related to the banner to open in a new window.
    Animation Settings
    Animation Type The type of animation effect when transitioning from this banner to the next (Fade in, Slide in Vertically or Slide in Horizontally).
    Display Time (Secs) The amount of time in seconds that a banner will display for, before transitioning to the next banner.
    Transition Time (Secs) The amount of time in seconds that the banner transition takes.
    Other Information
    Alt Text The alternative, or tool-tip text, to appear for banners for each specific language,
    Display Header The display header to appear on right-sided banners.

  4. Click the Insert Banner button or the Update Banner button to insert the banners at the locations that you have selected.
  5. If you are editing a banner and you want to archive the banner, click the Archive Banner button at the bottom of the page:
  6. Archive banner button

  7. If you want to delete a banner, click the Delete Banner button at the bottom of the page.
  8. If you want to add images for specific languages or restrict the countries that certain images can be displayed in, follow the remaining steps below.

Configuring Specific Languages and Countries for Banners

  1. On the main Banners page, click the Edit button beside the banner that you want to edit.
    The Edit Banner screen is displayed:

    Edit banner screen
  2. If you want to add images for specific languages, click the Language Specific Images tab at the top of the screen.
  3. Click the Browse button beside each language to locate and upload an image.
  4. Click the Upload or Delete Selected Images button or the Update Banner button to save your changes.
  5. If you want to archive a banner, click the Archive Banner button.
  6. If you want to restrict the countries that certain images can be displayed in, click the Country Restrictions tab at the top of the screen.
  7. Use the Add or Remove buttons to select countries in the ‘Add Country Restrictions’ and ‘Countries This Banner Will Show In’ boxes.
    NOTE: If you want to show a sequence of banners in every country but you also want to include in the sequence one or more banners that are country-specific (for example, UK-only), then, for the banners which you want to display in all countries, you need to manually select all of the countries in the ‘Add Country Restrictions’ box (hold down the Shift key) and add them to the ‘Countries This Banner Will Show In’ box (instead of leaving them set to ‘All Countries’). Then, to configure the country-specific banner(s) (in this example, UK-only), you should add ONLY ‘United Kingdom’ (plus Channel Islands, etc. if necessary) to the ‘Countries This Banner Will Show In’ box for each of the country-specific banners. After you save your changes and uncache the site, always check that the banners are displaying on the front end as you expect them to. For example, change your country settings and confirm that the country-specific banners are shown only for the correct countries and not others.
  8. Click the Update Banner button to save your changes.
  9. If you want to archive a banner, click the Archive Banner button.
  10. Remember, if you want to see the banners on the front end of your site, to make the banners active and to click the Uncache button.

Related Application Settings

Enable Brand Banner Selectors
If enabled, multiple Brand Banners will be selectable through fully stylable selector Buttons.
Enable Category Banner Selectors
If enabled, multiple Category Banners will be selectable through fully stylable selector Buttons.
Enable Top Banner Selectors
If enabled, multiple Top Banners will be selectable through fully stylable selector Buttons.


Copyright © 2019 IRP Commerce. Use of this website constitutes acceptance of the IRP World Terms of Use, IRP Privacy Policy and IRP Cookie Policy
IRP Commerce is a Trading Name of Export Technologies Limited. Concourse 2, Catalyst, Belfast, BT3 9DT, UK. Registered in Northern Ireland, Number: NI 041856. VAT Number: GB 888249658
A Deloitte Fast 50 Company six times: 2010, 2011, 2012, 2013, 2014 & 2018    Deloitte.