A NEW ERA OF INTELLIGENT QUANTITATIVE ECOMMERCE - THAT WORKS FOR YOU ECOMMERCE - THAT WORKS FOR YOU
Knowledge Base
+
Admin Messages (1)
+
Common Tasks (1)
+
Insights (1)
+
Interventions (1)
+
Languages (1)
+
Questions & Answers (1)
+
Reviews (1)
+
Site Scripts (1)
+
Web Services (1)

IRP Interface Fixed Position Elements

The IRP interface is extremely flexible and allows for many different design specifications. By using CSS and IRP Application Settings, you can easily adapt the look and feel of the site to your design needs.

You should also be aware of a few fixed positional elements that must exist throughout the site. This is true of the Desktop and Mobile site Headers, Product Listing pages, Product pages (‘Model’ pages), the Basket and Checkout pages and several other areas. Outlined below are the areas with these elements that can be styled with CSS but that are fixed within the structure of the site layout and should not be moved.


Desktop Site


Header

The header area of an IRP site includes the site logo, search bar, country settings and some other possible elements:

IRP Site Header
  • Site Logo
    This is fixed to the top-left corner. However, if necessary, you can make it stretch to the top of the page by enabling the Application Setting called ‘Logo Stretches To Top Of Page’.
  • Search Bar
    This is fixed to the top-middle of the page with the Search button on the right of the bar.
  • ‘Your Basket’ link
    This is fixed to the top-right corner, under the Country/Currency/Language Settings bar.

It is possible to reposition the container that holds the following elements using CSS but their default positions are at the top-right of the page:

  • Country/Currency/Language Settings bar
    This is fixed to the top-right corner. However you can choose whether it opens as a drop-down menu or as a pop-up lightbox using the ‘Set Settings Display Style’ Application Setting.
  • ‘My Account’ link
    This is fixed to the top-right side of the page, to the left of the Country/Currency/Language Settings bar. You can choose whether or not to add an icon for the link using the ‘Show Top Nav Icon For My Account’ icon.
  • ‘Log Out’, Help & Wish List
    When a customer is logged in to the site, there will be a ‘Log Out’ button fixed to the right of the Country/Currency/Language Settings bar. In addition, if you have enabled Site Help or the Wish List feature, links for these will be shown beside the ‘My Account’ link.

Product Listing Pages

Product Listing pages include the following:

  • Brands.aspx
  • BrandCategory.aspx
  • Categories.aspx
  • Promotions.aspx
  • Offers.aspx
  • SearchResults.aspx

These pages can be displayed either in a Gallery View or a List View and you can allow customers to select either view if you enable the ‘Show List Choice’ Application Setting.

The Gallery View layout is as follows:

IRP Front End Product Listings Gallery View

The List View layout is as follows:

IRP Front End Product Listings List View

You can define several settings for how the products appear in both Gallery and List Views using the ‘Product Listing’ Application Settings.

Note that if you have configured Product Customisations, the front end page for the customisation (.aspx?CustomiseModel=True) also uses a fixed structure.

Product and Kit Pages

The layout of the Models page (Models.aspx) incorporates several elements including products with images, descriptions, reviews, product information, Q&A and stock options. There are two options available — you use the ‘Set Models Display Style’ Application Setting to define the default display style of the Models.aspx page (either 1 or 4) (this setting is called ‘Models Page Display Style’ under Application Settings > Product Settings):

Option 1 (‘Flowing’) shows the Add to Basket control situated to the right of the Model image. Other elements such as the Model’s Description, Also Bought, Recommendations, Reviews, Questions & Answers and Size Charts (if present) follow below the image and Add to Basket control:

IRP Front End Models Display Style 1

You can also choose whether to show the ‘other elements ’ that appear under the Add to Basket control as a series of tabs (Option 2) or as stacked one on top of the other (Option 1) using the ‘Set Model Tabs Display Style’ Application Setting (this setting is called ‘Other Elements Display Style’ under Application Settings > Product Settings).

Option 4 (‘Tabbed’) shows the Add to Basket, Model Description, Reviews, Questions & Answers and Size Charts (if present) in one block, each available by clicking a series of tabs relating to each element:

IRP Front End Models Display Style 4

Note that the above layout description applies also to the Kits.aspx and KitsConfirm.aspx pages.

You use the ‘Set Add To Basket Display Style’ Application Setting to define the default Add to Basket display style to be used on the Models.aspx pages on your site:

Option 1 displays lists of all active Stock Options one after the other:

IRP Front End Stock Option Layout 1

Option 2 displays a drop-down list for all active Stock Options:

IRP Front End Stock Option Layout 2
IRP Front End Stock Option Layout 2 - Expanded

Basket and Checkout

The layout of the Basket area is fixed in a table structure, as shown in the following example:

IRP Front End Basket Layout

However there are several Application Settings that you can use to alter what is displayed to customers. There are also numerous Settings in the ‘Add to Basket’ group of Settings.

Likewise the Checkout area has a fixed layout structure, for example:

IRP Front End Checkout Layout

The layout of the other tabs that you can see in the screen capture above (Billing Address, Delivery Address, Post Details, Payment Details and Place Order) follow a similarly fixed pattern.

Account Pages

There are several account pages that also have a fixed layout — any of the pages with links on the /MyAccount/MyAccount.aspx page have this, including:

  • My Account Home (/MyAccount/MyAccount.aspx)
  • Log In (/MyAccount/Login.aspx)
  • Order History (/MyAccount/OrderList.aspx)
  • Change Address Details (/MyAccount/EditAccountDetails.aspx)
  • Change Email / Password (/MyAccount/EditPasswordDetails.aspx)
  • Forgotten Password (/MyAccount/Password.aspx)
  • Email Subscriptions (/MyAccount/EmailSubscriptions.aspx)
  • Stock Notifications (/MyAccount/StockNotifications.aspx)
  • Order Details (/MyAccount/OrderDetails.aspx)
  • Become a Partner (PartnerSetUp.aspx)

Wish List

If you have enabled the Wish List feature, the Wishlist.aspx page has a fixed layout, for example:

IRP Front End Wish List Layout

Private Sale

The PrivateSale/Listing.aspx page also has a fixed layout. There are several features you can configure this page using either configuration settings on the PrivateSaleEdit.aspx page or Application Settings in the ‘Private Sale’ grouping. Here is an example of the layout:

IRP Private Sale Layout

Auto-generated Site Map & Brand List Pages

The SiteMap.aspx and BrandList.aspx pages are mostly auto-generated and include a fixed layout.

Navigation Areas

When you enable the left, right or bottom navigation areas using Application Settings, you should keep them in their default positions. Once enabled, there are many ways of adjusting what appears in these areas using Application Settings, Admin section configuration settings and CSS. There is also the option to force the top navigation to always remain at the top of the interface using the ‘Enable Fixed Top Navigation Desktop’ and ‘Fixed Top Navigation Include Heading Banners’ Application Settings.

Reviews and Q&As

Product Review areas and Q&A areas also incorporate a fixed layout using a grid structure containing rows for each element.


Mobile Site


Many of the fixed elements described previously for the Desktop site apply also to the Mobile site.

Mobile Header

The header area of an IRP mobile site includes the site logo, search bar, basket and some other possible elements:

IRP Mobile Site Header
  • Site Logo
    This is fixed to the top-middle of the page.
  • Search Bar
    This is fixed to the top-middle of the page with the Search button on the right of the bar. The bar is positioned directly under the site logo and occupies 100% width of the screen.
  • Basket link
    This is fixed to the top-right corner, to the right of the Country/Currency/Language Settings link (if enabled for the top of the page).
  • Country/Currency/Language Settings link
    This is fixed to the top-right corner if you have enabled the ‘Show Mobile Top Settings Link’ Application Setting. The link takes the form of a flag of the country. Note that these settings are always displayed in the bottom-right corner of the mobile screen, so if you have enabled ‘Show Mobile Top Settings Link’, the settings will show at both the top and the bottom of the screen.
  • Mobile Menu
    If you have enabled the ‘Enable Mobile Menu’ Application Setting, a ‘hamburger’ menu button will be fixed at the top-left of the screen.

It is possible to reposition the container that holds the following elements using CSS but their default positions are at the top-right of the page:

  • ‘Sign In’ & ‘My Account’ link
    When a customer is not logged in to the site, there will be a ‘Sign In’ button fixed at the very top-right of the screen. If the customer is signed in, a ‘My Account’ link will be shown in the same position. (Note that to log out, the customer selects a ‘Log Out’ button at the bottom of the mobile menu (if this is enabled).)

Mobile Product Listing Pages

On the mobile site, products are always shown one under the other, with the image on the left and the other elements on the right, for example:

IRP Mobile Front End Product Listings

This applies to all of the Mobile Product Listing pages, including:

  • /Mobile/MobileBrands.aspx
  • /Mobile/MobileBrandCategory.aspx
  • /Mobile/MobileCategories.aspx
  • /Mobile/MobilePromotions.aspx
  • /Mobile/MobileOffers.aspx
  • /Mobile/MobileSearchResults.aspx

Mobile Product and Kit Pages

The layout of the Mobile Models and Kit pages uses a fixed layout with the stock options appearing one under the other and the Description at the bottom. Option text is on the left and the Add to Basket control is on the right:

IRP Mobile Model Page Layout

Mobile Basket and Checkout

The layout of the mobile Basket area is fixed in a table structure, as shown in the following example:

IRP Mobile Front End Basket Layout

Likewise the Checkout area has a fixed layout structure, for example:

IRP Mobile Front End Checkout Layout

The layout of the other checkout sections (Billing Address, Delivery Address, Post Details, Payment Details and Place Order) follow a similarly fixed pattern on the mobile site.

Mobile Top Navigation

You have the option to force the top navigation to always remain at the top of the mobile interface using the ‘Enable Fixed Top Navigation Mobile’ Application Setting.

Mobile Account Pages

There are several account pages that also have a fixed layout — any of the pages with links on the /Mobile/MyAccount/MyAccount.aspx page have this, including:

  • My Account Home (/Mobile/MyAccount/MobileMyAccount.aspx)
  • Order History (MyAccount/MobileOrderList.aspx)
  • Change Address Details (/MyAccount/MobileEditAccountDetails.aspx)
  • Change Email / Password (/MyAccount/MobileEditPasswordDetails.aspx)
  • Forgotten Password (/MyAccount/MobilePassword.aspx )
  • Email Subscriptions (/MyAccount/MobileEmailSubscriptions.aspx)
  • Stock Notifications (/MyAccount/MobileStockNotifications.aspx)
  • Loyalty Scheme (/MyAccount/MobileLoyaltyScheme.aspx)
  • Order Details (/Mobile/MyAccount/MobileOrderDetails.aspx)

More Information

For more information about the IRP mobile site, see the IRP Mobile Website Overview in the IRP Knowledge Base.


Trade Site


Many of the fixed elements described previously for the standard Desktop site apply also to the Trade site. Your IRP Account Manager can point out these elements. There is no mobile version of the Trade site.




Copyright © 2018 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, a Deloitte Fast 50 Company six times: 2010, 2011, 2012, 2013, 2014 & 2018   Deloitte.