Documentation: NRO Product Blocks
To create the block and make it appear on the place you want, please follow these steps:
1. Select a page or static block to display a Product Block
Go to CMS / Pages or CMS / Static Blocks.
Click the Show/Hide Editor button to display the content in code view (you will not see the WYSIWYG buttons while in code view).
Click the Insert Widget button.
From the list of widget types, select NRO Product Block.
2. Configure the Product Block
- Most Viewed
- Highest Rated
See More About Block Types below.
Category Filter: Select a category if you want to restrict the products in the block to a specific category. For example, ‘bestselling women’s dresses’ or ‘newest home décor’ or ‘shoe sale’.
Display Category Name: If using a category filter, optionally display the category name above the product block.
- Grid View: a static block of products in one or more rows
- List View: vertical list of products
- Slider: a single row of products that automatically 'slides' to display additional products
Total # of Products to Display: Default is 12. Maximum of 50.
# of Products Per Row: Grid View only. Default is 3. Maximum of 50.
Thumbnail Size: Select Custom Size to change the default thumbnail size.
Thumbnail Width (in pixels): Enter the product thumbnail image width in pixels (e.g. 232). Height will be determined dynamically, based on actual image dimensions. Default is 232. Maximum width is 500.
Product Image Hover Text: For example, More Details or Top Seller.
Product Images Only: Select No if you wish to also display additional details, including:
- Add to Cart Button
- Price (regular and sale prices)
- SKU (Counterpoint item number)
- Wislist and Compare links
CSS Handle: Optional. If you want to add custom CSS for this specific widget, provide a unique CSS handle (e.g. 'widget1', 'widget2', etc.). For example, if you have a product block on the home page and another on a category page, you may want to style them differently.
Cache Lifetime (seconds): Enter the number of seconds for the cache lifetime. Leave blank for default of 86400 (24 hrs). To update instantly, refresh the 'Blocks HTML Output' cache.
- Bestsellers: Display your bestselling items – based on how often each item was purchased
- Most Viewed: Display items with the most views – based on how often each item was viewed, which may be similar to how often it was purchased
- Highest Rated: Display items with the highest ratings
- Featured: Display items that share a common attribute (must be a Yes/No attribute). Use any existing Yes/No attribute, or create a new attribute just for this tab. For example, create a new Yes/No attribute named 'Featured' and assign it to the Default attribute group (or others). Then select Catalog / Manage Products and bulk update the new 'featured' attribute for multiple items at once.
- New: Display newest arrivals – based on product date settings
- Sale: Display sale items
Any block type can be filtered by category.
Editing an Existing Product Block
Once a product block has been configured, you can't access the configuration window again. You can manually edit the code, or insert a new block and start over. TIP: If manually editing the code, enter 1 for true/yes and 2 for false/no.
To maintain optimum site performance, this extension caches (i.e., remembers) the products in each block. The products are refreshed based on your settings in the Cache Lifetime field in the Product Block configuration window. If this field is blank (which is the recommended default), the products will be refreshed every 24 hours, or 86400 seconds. To instantly update the data in the product blocks, select System / Cache Management, and refresh the 'Blocks HTML Output' cache.
Built-In New/Sale Slider vs. NRO Product Blocks
The Celebrity theme includes a built-in slider on the home page for featuring your latest arrivals and sale items — you can continue to use it if you choose. However, the NRO Product Blocks offer more configuration options and ability to filter by category. In most cases, you may wish to replace the built-in sliders with one or more product blocks on your home page. You can do this by simply deleting the single line of code from the home page contents area that references the built-in slider. Need help? We offer professional services to help you configure your new add-ons with your existing content.
Example 1: Best Selling Slider on Category Page
Live Example: http://demoextras.nrostores.com/men.html
To add a product block to the top of a category page, first create a static block under CMS / Static Blocks.
Add a best selling "slider" product block to the new static block. In this case, the width of the content area is 713px, so the thumbnails are sized at 168px to fit four across.
Once the product block has been added to the static block, select Catalog / Manage Categories and select a category. On the Display Settings tab, change the Display Mode to Static Block and Products and select your new static block to display at the top of the category page.
Example 2: Home Page Grids, Multiple Product Blocks Grouped by Tabs
Live Example: http://demoextras.nrostores.com
To add multiple product blocks in a tabbed layout, first create a static block under CMS / Static Blocks. Add a new "grid view" product block for each tab. You can start with the sample code below and modify according to your needs.
Next, select CMS / Pages and select the page where the tabs will be displayed. In the code view, select Insert Widget > CMS Static Block and select your new static block.
Working with tabs and multiple blocks requires strong HTML and CSS skills. Need help? We offer professional services to help you configure your new add-ons with your existing content.