If your package includes the online storefront, Point of Rental is already hosting a storefront for you on the web where customers can request quotes and even pay for reservations. To get the Online Storefront or to learn more, contact our Sales team.

Topics in this article include

• Storefront 2.0

  • Branding

  • Navigation

  • Product Types

  • Product Images

  • Custom CSS

  • Enhanced Cart View

  • Improved Checkout

• Scenarios to Consider Before Using “New Look”  Storefront

• Edit Front End Configuration Definitions

• Instructions for Embedding Front End in Your Site

Storefront 2.0

For a video overview of what storefront 2.0 can do watch here.

Setup

1. Read the “Scenarios to Consider” below and plan for your storefront accordingly.

2. Now that you have read the considerations below go to Configuration > Front End Configuration > and enable Essentials Catalog and Checkout 2.0 - (it’s the 3rd line down)
   

Example | Product Listing Page (PLP)

Below is an example of the Storefront Catalog.

Branding

As with any website, branding is a key thing to consider when migrating your site from a legacy version or starting completely fresh. Storefront 2.0 includes many new features, including multiple colors in the header(s), automated icon button colors, and an additional logo input that looks great on colored backgrounds (different from the printing logo you have already put in).

Themes

You can create a theme by going to Configuration > Themes > Create New or Select an Existing Theme to Edit. Colors are controlled in the Themes section.  Instead of only one color option in the header, the header now has a header color and a nav (navigation) bar color.  These can be set to any color, light or dark, or the same for both. In the example above, the header color is dark blue, the nav bar color is medium grey, and the button color is set to green.  The date selector and cart icon are automated to white, and the text in the nav bar is automated to black.

When Storefront 2.0 is enabled and you view a theme, the default preview of the theme is for the “New Look.”

Button Colors

Most icon and button colors are auto-magically set to contrast the background color to make it easier for your consumers to read. You won’t find dark grey buttons on a black background, for example, as we have set most buttons to default to white or black to make it easier for your users to navigate the site.

The key button colors to set are the “action” buttons, which are the Add to Cart and other important functions. They are labeled Title/Heading Color and Category Text Highlight. It is recommended to set these as the same color.  

💡Pro Tip: For best branding, set these to be one of your company colors.

Background Color

You still have full control of your site and are able to choose a site background color. HOWEVER, we strongly recommend that you select white, or Light Theme.  IF- you choose a different color, make sure that ALL of your product images are PNG graphics with a transparent background.  Having background colors behind your images tends to make your site look poor and outdated.  When you use a white background, specifically JPEG product images with a white background appear perfectly fine.

💡Pro Tip: select Light Theme, we recommend it.  Trust us, you'll see why.

Settings

Make sure the checkbox for Front End is set and that you save your theme by clicking Save in the lower right corner.  

Logos

In addition to the existing logo set for display on a white background found in Configuration > Company Configuration > Printing Options, there is an additional logo option that is perfect for displaying on a colored background. If you are transitioning from the legacy version to 2.0, the Storefront logo will be set to mirror the Printing Logo.

The Printing Logo below would not display correctly on a dark blue background as the object (dark blue triangle) on the left would not be visible.

To use your logo on a dark background, the setup below a new logo would need to be uploaded where the first object is white, so it displays correctly against the background.

The storefront logo is located in Configuration > Front End Configuration, just above where you selected Essentials Catalog and Checkout 2.0.

💡Pro Tip: It is recommended that you load your logo in a PNG graphic format with a transparent background to avoid the white background that usually appears with a JPEG image.

To See Your Changes

To view your changes, click refresh in your browser when you go to the live site.  Essentials auto-publishes your changes.

💡Pro Tip: Best practice is to have two browsers open (on two monitors if you have them), one for the configurations and one for the active site.  Again, you will need to refresh the active site to view the changes that you make. 

Navigation

The second key consideration is navigation.  It’s how your customers move around the site and find products.  Previously, Essentials only had one level of navigation and used tags as subcategories.  In Storefront 2.0, with the use of Front End Custom Menu options, you can set up four levels of navigation and still use tags.

To get there, go to Configuration > Front End Custom Menu Setup. You will be prompted to Save any changes you make to the left-side configuration before moving on.  If you get things out of order and want to go back to the way you started, click ‘Cancel’, and you will revert back to your last saved configuration.  Moving categories with Folders moves all of the “child” items within the folder.

💡Pro Tip: Use this powerful new capability to make your site easier to navigate!  Tags can be used across categories while adding navigation here provides an easier way for your customers to move around your site.

Category Modifications

You can now do most of your category modifications using the pencil or Edit icon from this page.  This is where you can assign products to display within a category.  You can select the whole category or select only certain items to display.

Selecting Products to be in Multiple Categories

By clicking on any Category Edit icon, you can choose which products to assign to which category.  This is where you can choose a product to be displayed in more than one category.

To help you identify where individual products are being displayed we added a breadcrumb trail to the Inventory page to show where products are displayed, so you know exactly what shows up where.  The blue text breadcrumb shows the full hierarchy of the product.

Product Types

The third thing to consider is understanding your product types.  Product types would be how products can nest within each other or how items are related to each other.  This is not related to kits but can also be used within kits.

Variants

Variants have received a powerful upgrade in Storefront 2.0 in the way products are displayed.  Variants are best described in reference to sizes.  It can be sizes of safety gloves, skis, footwear, sandpaper, or hardware like nuts and bolts. Instead of having the same image displayed for every single size, you can group them together with variants being the various sizes.  This makes the Product Listing Page (PLP), the display of searched products or category selection, streamlined for the consumer.  Then, on the Product Detail Page (PDP), the consumer sees the size options available for easy selection.  Clicking on the size shows the specific inventory of each size if you have Inventory Display turned on.

Optional Items

By far one of the most exciting and important features of Storefront 2.0 is the way we now display Optional or Suggested Items.  As you know, Units Per Transaction (UPT) is one of the key metrics of any retail success.  When you go through a drive-through and order a burger, the follow-up question is always, “Do you want fries with that?”  That is one of the most common UPT questions.  For a website, these are the optional items and suggested items.

The key upgrade that we made in Storefront 2.0 is a new hover state to the items now in a “tile” format.  The legacy view was just a text list of the items.  The new format shows a tile of the item, with inventory displayed below.  Hovering over the item shows the product image, short description, and pricing if dates have been selected.

The example below shows a kit with all the components.

Drilling a little further, when you click on a particular item, like the Wading Boot, it also shows the sizes and inventory available.  This is a very powerful feature that allows your user to stay on one page and order a large variety of items, including sizes and/or colors.

Sales Results

Of course your results may vary, but one of our beta testers reported a 40% increase in Optional Items added to orders!  The visual representation of the product added greatly to the effectiveness of this feature.

💡Pro Tip: Whenever you have an item where the same picture is used to show different items, think about setting them up as Variants. Items with variants can also be included in kits. Technically, we can handle kits within kits from a display standpoint.

Product Images

Over the last year, we have made great improvements to the product image display. Just a year ago, product images were only 220x220. We now support up to 1000x1000. Products displayed on the PDP are 600x600 and can be enlarged to 1000x1000.

💡Pro Tip: To take better advantage of the screen real estate provided, you can upload higher-resolution images (recommended 1000 x 1000) to replace your old images.

Custom CSS

We worked with our CSS expert, who helped create much of our customer’s custom CSS, and we solved the things he was asked to do most often.  We think you’ll find that much of your custom CSS was created to get the Product Detail Page to look better.  Beta customers have reported that the new design is way better than the custom work they had done.

💡Pro Tip: Copy and paste your custom CSS at the bottom of your Themes page to a Word or Google doc and then remove it.  Try out Storefront 2.0 without your custom CSS and add it back in as needed.  Sites that do not do this will have problems with the way products are displayed!

Enhanced Cart View

Previously, the Cart was just the page before the checkout process began.  Taking a clue from other successful eCommerce sites, we have a much-improved look and feel of the Cart.

Customers can modify dates and quantities and also see the separate totals for rental and retail items.

Improved Checkout

At the core of any eCommerce site is the ability to check out effectively.  This area of the site has seen significant improvements!!!  It’s all on one page, so your customer knows exactly what to do and what they have left to do to checkout.  Whether your site is set up just to get the information from them and you follow up with a call, or whether your business needs to take the consumer completely through to an online payment and reservation.

The left side of the page is configured to walk the consumer through each step, while the right side provides the financial and item summary.  The user can see the effect of each change made.

There is nothing to set up to utilize the new checkout's performance. It is all updated, and the setup is automatic.

Scenarios to Consider Before Using “New Look”  Storefront

Customers using a sub-domain

Customers with a sub-domain are where your site may be built with WordPress e.g. the site resides at HigherRentals.com (HigherRentals is a fictitious site and will be used as an example throughout our documentation), and when you click on the Rentals tab in your navigation, it takes you to higherrentals.pointofrentalcloud.com

Issues: No problem using Storefront 2.0 quickly

Considerations: Might need to spend a little time modifying Category navigation with the Front End Custom Men configuration

Custom CSS: We recommend you copy and save your custom CSS if you have any, to a separate file and start clean with the new interface and add as needed

Estimated Set Up Time: 10-30 minutes

Risk: very low

Category Sites

Many Essentials customers have their home page set up as the product category image page. These sites typically use the domain.pointofrentalcloud.com web address.

Issues: No problem using Storefront 2.0 quickly

Considerations: Might need to tweak the Category navigation with the Front End Custom Men configuration

Custom CSS: Most of these sites do not have custom CSS.  If you do, we recommend copying and saving and starting fresh without it, and adding as needed.

Estimated Set Up Time: 10-30 minutes

Risk: very low

Embedded Sites

Customers using Essentials with an embedded site may experience some issues switching to Storefront 2.0. We have taken great care to provide the very best layouts and user experience for both desktop and mobile. However, it will be different from what you have already integrated, so your iFrame will need to be adjusted to work with the new web structure.

Issues: You may encounter issues as you transition to the new format. It is doable, but it does take some time. We recommend doing this during a non-peak business time.

Considerations: Google’s support of iFrame is limited in time (currently, Google is quoting 12-18 months of additional support time), so it might be wise to consider other options. We recommend you consider de-embedding and instead using our customization options to provide a seamless experience between a general marketing page and the storefront.

Custom CSS: We recommend you copy and save your custom CSS if you have any, to a separate file and start clean with the new interface, and add as needed

Estimated Set Up Time: 1 - 3 days

Risk: medium-high

Full Sites - Custom or Self-Supporting

Customers wanting, or with, a full site, either self-supporting or custom (we build it for you) will enjoy the full power of Storefront 2.0.  From custom menus and homepages, you’ll have the power and ease of use of Essentials at your fingertips.

Issues: None

Considerations: We are building more tools for you to self-service your site, or we can build it for you. Please contact support if you are interested in Point of Rental building a custom website for you.

Custom CSS: Little to none is needed to have a dynamic, powerful e-commerce site

Estimated Set Up Time: 4 - 14 days for a custom website, you can work at your own pace for self-supporting

Risk: Extremely low

 
Edit Front End Configuration Definitions

 If you are a Multi-Location Setup, several configurations are available to you. They are listed with multi-store before them. 
 

Instructions for Embedding Front End in Your Site

If you want to integrate the customer front end into your existing website, you will find instructions on the right-hand side of the screen. There are instructions if you have a custom site and also a place to download our WordPress plugin.