Adding 'Shop By Brand' Features to your Online Store

You can add a variety of Shop by Brand features to your website, using built-in features or even more features with the Improved Layered Navigation add-on. Some features of Improved Layered Navigation are described below. Additional information is available in the User Guide starting on page 36.

First, it's important to understand where the brand information comes from in Counterpoint. The brands that display on your website are determined by the Vendor source setting on the Items tab of Setup / Ecommerce / Control in Counterpoint. If none of the built-in choices work with your data, you may need a Custom Mapping File to customize which field from Counterpoint you want to use for Brands in your online store.

 

Navigation

'Shop By Brand': In top-level navigation

BUILT-IN FEATURES:

Create a top-level category in Counterpoint named Shop by Brand, and then add-sub-categories for each brand as desired. In Counterpoint, select Setup / Ecommerce / Categories to add or edit the categories used online.

 

WITH IMPROVED LAYERED NAVIGATION:

Create a Dynamic List of all Brands

Select CMS / Pages, and create a new page, for example, brands. Add the following to the page content area (be sure to use text view, not WYSIWYG view, when pasting code snippets):

{ {block type=amshopby/list attribute_code=manufacturer header="All Brands" columns=2 template=amasty/amshopby/list.phtml}}

If you also want a block of featured brand logos, add this:

{ {block type=amshopby/featured attribute_code=brands template=amasty/amshopby/featured.phtml}}

IMPORTANT: When copying and pasting the above code snippet, you MUST remove the spaces between the {{ characters.

 

Category Landing Pages

Display Brand: Under product name

BUILT-IN FEATURES:

In NRO, select System / Configuration / NCR Retail Online / Theme Settings > Product Options, and then change Show Brand to Yes to display the brand name on category thumbnail pages, under the product name.

 

Display Brand: Left navigation

BUILT-IN FEATURES:

To hide or display brands (or any attribute) in the left column, in NRO select Catalog / Attributes / Manage Attributes and select the Brand attribute.

Change Use in Layered Navigation to No to hide the brands, or Filterable (with results) to show the brands in the left navigation.

WITH IMPROVED LAYERED NAVIGATION:

Select Catalog / Improved Navigation / Filters and select the Brand attribute to fine-tune the layout.

 



 

Brand landing page: Show all products from BrandX

BUILT-IN FEATURES:

Whether you have a brand logo in your footer area or promo ads on your home page, you may need to land on a page of all products from a specific brand. For example, if you need all the Niko brand products from the Men's category, navigate to the Men's page on your site and click the Niko filter on the left. Copy and paste that URL to use as your landing page, for example http://demo.nrostores.com/men.html?brand=17

Or, if you need Niko brand products from across all categories (Men, Women, and Home Decor), go to your site and search for "Niko" and use the search results URL as the link to a brand landing page, for example http://demo.nrostores.com/catalogsearch/result/?q=niko. Tip: Make sure your Brand attribute is marked as 'used in search'.

'Search result' style landing page are the fastest way to create a landing page of products that share a common keyword. But note that your "Niko" search results could also include "Nikon" cameras too. If you require more robust features, check out Improved Layered Navigation.

 

WITH IMPROVED LAYERED NAVIGATION:

Brand landing pages are created automatically, however you may wish to add content areas to the page, or configure additional options.

To create a brand landing page (or landing page for any attribute):

  1. Select CMS / Static Blocks and create a block of content to display at the top of the specificed brand page (for example, a paragraph of text to display at the top of the Nike page).
  2. Select Catalog / Improved Navigation / Pages
  3. Click the Add Page button
  4. Enter 1 for Number of Attribute Selections. In most cases, you will enter 1. In some cases you may wish to create an attribute landing page that is based on more than one attribute. For example, if you wanted a landing page of all Nike products (brand=nike) for women (gender=woman) that are made in the USA (origin=usa), you would enter 3 and then fill in the selection filters and values accordingly for all 3 attributes (brand, gender, and origin).
  5. Click Save & Continue (if you click Save instead of Save & Continue, click on the record to open it back up for additional configuration options).
  6. Enter the Filter and Value for this page, and optionally enter meta information or add a content block to the top of the page

 

 

 

Item Detail Pages

Display Brand on item detail pages

BUILT-IN FEATURES:

To hide or display brands (or any attribute) on the Additional Info tab on item detail pages, in NRO select Catalog / Attributes / Manage Attributes and select the Brand attribute. Change Visible on Product View Page on Front-end to Yes to show the brand on the Additional Info tab.

WITH IMPROVED LAYERED NAVIGATION:

Add Brand Logos to Item Detail Pages

Important! You must also have ncr_producticons in order to dynamically display logo images on item detail pages. Please contact the Professional Services team for assistance.

  1.  Select CMS / Static Blocks and create a new static block, i.e., Product Page - Display Brand Logo.



  2. Copy and paste the following HTML code into the content area of the static block. Use the code view not the WYSIWYG view for this step:

    <div id="icons">
    <div id="icon-brand">
    { {widget type="ncr_producticons/widget_link" display_option="all" stock_method="always" product_icon="dynamic" attr_code_icon="brand" icon_folder="icons/brands" icon_ext="png" icon_link_dynamic="/shop-by/brand-#brand#.html" product_text_option="none" popup="tooltip" popup_block_id="tooltip-brand" }}
    </div>
    </div>

    <style>
    #icon-brand {margin-bottom:10px;}
    </style>

    <script type="text/javascript">
        jQuery('#icons').insertAfter('.product-shop .product-name');
    </script>

    IMPORTANT: When copying and pasting the above code snippet, you MUST remove the spaces between the {{ characters.

  3. Select CMS / Widgets and create a new widget, i.e., Product Page - Display Brand Logo, and attach the static block created in step 2 on the Widget Options tab.


  4. Select System / Cache Management and click the Clear Cache button
  5. Select CMS / Images & Other Files and create a new sub-folder for icons / brands (folder names must match this exactly)


  6. Upload brand logo image files into the icons / brands directory under CMS / Images & Other Files
  7. Images must be .png files 
  8. Images must be named icon-brand.png where brand matches the brand name exactly, excluding any spaces or special charaters. For example, the image name for the Seven Sisters brand would be icon-sevensisters.png)