Hotcakes Product Grid Module


Have you ever wanted to display a specific set of products on a certain page, no matter who was viewing it?  Perhaps that page wasn't even part of the "store" but was maybe part of your support area or blog.  You might be showing all of your related books on a marketing landing page, just in case you might be able to convert a sale in addition to getting your customer to fill out a form.  The product grid module allows you to select specific products from your catalog and display them in a grid style format.


The following prerequisites will be necessary to accomplish the goals of this article:

Getting Started

The information provided here is based upon the default configuration of Hotcakes and the default viewset. Your views may have more or less functionality, depending on how it was implemented by your technical team.

Product Grid Module

The product grid module is not placed for you anywhere on your site. If you wish to use it, you should add it to one or more pages, as desired. When you add this module to a page, it will begin working immediately without any configuration required.

The example above has only two products selected, and is being displayed as two columns.  This may or may not want your store to display selected products the same way, but your designer can easily adjust that.  We could be displaying 10 products with 10 columns, or with 2 columns.  Everything is completely up to you.

Module Settings

This module has settings that are unique to how it works on your site for you and your customer.  If you're not already familiar with how module settings work, you should see the module settings documentation to learn more.

View Settings

These are the standard view settings you'll see across all of the store-oriented modules.

Setting Description
View This read-only setting will simply show you the view that was selected before viewing the current settings.
Select a View If you wish to change the view that's being used to display the featured products, select the alternative view.  By default, you'll only see "Index" as an option, unless your design team has created and added alternatives for you.

Choose Products

This section allows you to use the common product picker control to look for products, and select them to be displayed in the grid.  Please see the product picker control documentation to learn more about how the search works.

Once you see one or more products you'd like to have in the product grid, check the checkbox next to its name.  When you've checked all of the products you intend to add, click the "Add Selected Products" button.

Products to Display

Initially, you won't see anything in this grid.  You'll need to select one or more products first, and they'll begin to show here.

The grid allows you to sort the products by clicking the respective up and down links.  You can also remove a product from the grid by clicking the delete link.

Setting Description
Number of Columns You'll have 3 columns by default, but you can put any integer value above 0 here.  If your value doesn't match an expected format, it will be returned to 3.  This value is used to help determine the width of each column when displayed on the page.  For example, a 3 column layout will be 33% per column.

Viewset View Location

You'll find the views for this module in the following location in your viewset:



Have more questions? Submit a request

Need More Help?

Do you need more assistance with this article? Please review your support options.