PowerReviews Application by Kibo eCommerce

Configuration Guide

Current Version: 2.0.0 (September 2017)
Install: Kibo eCommerce App Marketplace
More Info: Version History

PowerReviews provides ratings and reviews that help increase buyer confidence and stimulate sales for your products. With PowerReviews, customers can leave ratings, write reviews, and ask questions directly on your product pages. PowerReviews is also capable of syndicating product reviews from all major retailers and search engines, increasing the reach of the reviews on your storefront.

The PowerReviews Application by Kibo eCommerce seamlessly integrates your PowerReviews account with your storefront so that you can start displaying and generating reviews on your product and category pages. You can import product reviews from PowerReviews to Kibo eCommerce and display the average ratings for products as a facet on your site.

Application Features:

Install the App

You can install the PowerReviews Application by Kibo eCommerce directly from the Kibo eCommerce App Marketplace:

  1. Go to: www.kibocommerce.com/marketplace
  2. In the Search field, enter: PowerReviews
  3. Click the app icon.
  4. On the app page, click Install Now.

Configure the Application

To integrate your PowerReviews services with Kibo eCommerce, review the configuration requirements to ensure you have everything you need to be successful before you begin, and then complete the steps in this section.

Configuration Requirements

Note: If you are switching from a third-party site to Kibo eCommerce and want to transfer your reviews, contact PowerReviews or an implementation engineer.

Obtain PowerReviews Account Credentials

Note your PowerReviews account credentials. You will enter these credentials in Kibo eCommerce.

  1. Log in to your PowerReviews account.
  2. Click Configuration > Configure Reviews to display the general configuration settings for your PowerReviews account.
  3. Note the Merchant Group ID, Merchant ID, Site ID, FTP Site, FTP username, FTP password, and ZIP File Name.

Note: FTP Site, username, and/or password are only required if importing average ratings.

Configure the App

  1. In Admin, go to System > Customization > Applications.
  2. Click Mozu PowerReviews Enterprise Application.
  3. Click the Configuration link to open configuration settings.
  4. Open the Settings tab.
  5. Click Add Merchant Group to add your PowerReviews account information to Kibo eCommerce:
    1. Enter the Merchant Group ID.
    2. Enter the FTP Username.
    3. Enter the FTP Password.
    4. In the PowerReview Import Frequency drop-down, choose a frequency for importing content from PowerReviews to your Kibo eCommerce site.
    5. Click Show Advanced Settings.
    6. Enter the FTP Location using the FTP site from your PowerReviews account.
    7. Enter the FTP Port.
    8. Enter the PowerReview Import Filename using the ZIP file name from your PowerReviews account.
    9. Enter the zip file name provided by your PR representative..
  6. Click Add Mozu Site to configure PowerReviews for your storefront:
    1. Select your storefront from the Mozu Site drop-down.
    2. Enter the Merchant ID.
    3. Enter the Merchant API Key.
    4. Note: PowerReviews requires a new API key for version 2.0.0. If you did not receive a new API key or do not know your Merchant API Key, contact your PowerReviews representative.

    5. Enter the Locale to match your site settings.
    6. Select the Rating Attribute for the site and locale.
    7. Enter product codes in the Regex field for products that have product codes containing unsupported characters.
  7. Click Save to save changes to the Kibo eCommerce Site configuration.
  8. Click Save to save changes to the Merchant Group configuration.

Enable the App

After configuration, enable the PowerReviews Application in Kibo eCommerce and extend the PowerReviews theme to your storefront using Site Builder.

To enable the app:

  1. In Admin, go to System > Customization > Applications.
  2. Click Mozu PowerReviews Enterprise Application.
  3. Click Enable App.

Update Your Theme

The PowerReviews Application requires widgets and a new template page in your Kibo eCommerce theme. You can download the required code from GitHub.

Note: The Mozu/Integration-PowerReviewsWidgets GitHub repository is private. Contact Kibo eCommerce Support with your GitHub username to request access to this repo.Note: Products will be automatically added to PowerReviews when a shopper visits it for the first time.

The sample code on GitHub includes the following basic components that support the PowerReviews integration:

This section assumes you are familiar with Kibo eCommerce theme development. Consult your theme developer or Kibo eCommerce Professional Services if you need help implementing these theme modifications.

Modify and Merge the Code from GitHub

The files in the Mozu/Integration-PowerReviewsWidgets repository include some placeholders where you can modify the code to customize your integration. For example, we provide several override.css files you can use to override the default styling of your PowerReviews widgets. We also include a modified category.hypr template that pulls the powerreviews.js functionality into your Category pages, but you do not need to update this file if you only want to show reviews on Product pages. You also can modify the Display widgets to support tabs. A sample implementation of this is provided in the next section.

The GitHub readme includes a full list of the files you can add or modify to support PowerReviews in your Kibo eCommerce theme. You can run the git diff command in any command-line shell to see the differences between the sample implementation and your own theme.

Build and Apply the Theme

  1. Use the Kibo eCommerce Theme Generator or run Grunt to build the theme.
  2. Upload the resulting ZIP file to Dev Center.
  3. Install the updated theme to your sandbox.
  4. In Admin, go to Main > Site Builder > Themes.
  5. Click the dots next to the new theme and select Apply.

Edit Your Site in Site Builder

After you update your theme with the sample code from GitHub and apply the new theme you to your site, you are ready to modify your live site in Site Builder.

Add a Write a Review Page

Complete the following steps after adding the /templates/pages/write-a-review.hypr file to your theme:

  1. In Admin, go to Main > Site Builder > Editor.
  2. Select your site from the top bar.
  3. In the site tree, go to Single Pages, click the three dots, and select Add Page.
  4. Add a Write a Review page by entering Write a Review for the Page Title, accepting the default Page Url, and selecting Write a Review from the template drop-down.
  5. Click Save.

Add Review Widgets to Product Pages

Note: PowerReviews widgets may not display on your live site until after the first import of PowerReviews content.

  1. In Admin, go to Main > Site Builder > Editor.
  2. In the site tree, expand Templates and select Product.
  3. Switch to Widgets in the site tree and drag either the PowerReviews Snippets or PowerReviews Display widget into a dropzone.

  4. Typically, you add Snippets to the top of a page or in the sidebar, to alert shoppers to reviews without taking up valuable screen space. You can add Displays to the bottom of the page so shoppers can read full-text content without leaving your site.
  5. Choose a widget type in the configuration dialog.
  6. (Optional) If you want shoppers to see the review and Q&A sections in the same display on separate tabs, enable Is Tab Enabled? and use Tab Code to enter JavaScript that specifies which tab to activate when the user clicks a link to the display.
    Note: You must modify your widget code to support tabbed displays.For example, the following sample code would display the tabs defined earlier in this topic:
    
    	var tabItems = $('.cd-tabs-navigation a');
    	var tabItem = $('.cd-tabs-navigation');
    	var tabContentWrapper = $('.cd-tabs-content');
    	var selectedTab = tabItem.find('a[data-content=\"'+tabName+'\"]');
    	var selectedContent = tabContentWrapper.find('li[data-content=\"'+tabName+'\"]');
    	tabItems.removeClass('selected');
    	selectedTab.addClass('selected');
    	selectedContent.addClass('selected').siblings('li').removeClass('selected');
    				
    The function activateTab(tabName) in pr-product-reviews.hypr uses this code. The method itself is invoked by powerreviews.js (in GitHub at scripts/widgets/powerreviews.js). Note: When creating tabs, makes sure any instances of tabName match across all your code (in the Tab Code, in powerreviews.js, and in pr-product-reviews.hypr).
  7. Click Save.

Add the ROI Beacon to Your Checkout Page

The ROI Beacon measures how product reviews and Q&A affect sale conversions:

  1. In Admin, go to Main > Site Builder > Editor.
  2. In the site tree, expand Templates and select Checkout.
  3. Switch to Widgets in the site tree and drag PowerReviews ROI Beacon to any dropzone. This widget is not visible to shoppers on your live site.

Use the App

Import Data

You can import reviews data for your products using the configuration page for the PowerReviews Application:

  1. In Admin, go to System > Customization > Applications.
  2. Click Mozu PowerReviews Enterprise Application.
  3. Click the Configuration link to open configuration settings.
  4. On the Import tab, click Import Now.

After you import data for the first time, Kibo eCommerce automatically imports data based on the settings you set during configuration. For example, if you configure your settings at 10 am to import data every four hours, the imports occur six times a day at 2 am, 6 am, 10 am, 2 pm, 6 pm, and 10 pm. To view imported ratings for each product, use the Catalog page in Admin (go to Main > Catalog > Inventory and search for a product). A Rating field displays in the Properties section, showing a calculated average of all PowerReviews shopper ratings entered through your storefront, or syndicated from external sites if your PowerReviews account provides syndication services. The PowerReviews storefront theme uses the Rating property as one option to facet and filter products on your storefront.

Congratulations! You can now preview PowerReviews functionality on your storefront.