Product panels are a way of showcasing products on your storefront. They can be used to:
- display your best selling products
- share your newest products and inform customers of the latest additions
- suggest related products for upselling and cross selling opportunities
- provide insight to customers by showing products other customers have viewed or purchased
- promote specific product lines or brands
The Featured Products panel displays products that you have marked as Featured. It's a great way to bring your customers' attention to products that are on sale, in-season, back in stock, or just worthy of extra attention. The featured products offers more flexibility than other product panels by allowing you to select which products to display.
You can also choose how many featured products you want to display at a time; the featured products panel will shuffle which products are actually displayed. Note: there is not a way to display products in a static order.
Selecting Featured Products
1. Go to Products › View. At the top of the list of products, there is a Featured column left of the Action column with white stars under it.
2. To feature a product, click the star to its right. When the star is filled in, it has been marked as Featured.
Click it again to take off the Featured status.
You can also make a product Featured from the Other Details tab when adding or editing a product.
Number of Featured Products to Display
The number of featured products shown in the featured products panel is controlled differently depending on which theme platform you're using (Stencil or Blueprint).
In Stencil themes, the number of featured products is controlled by the Stencil Theme Editor.
1. Go to Storefront Design › My Themes, then click Customize.
2. On the left, scroll down and click the Products section to expand it. Under Number of Featured Products, set the number of featured products you want to show on the home page.
3. Click Save Changes when you're done.
In Blueprint themes, the number of featured products is controlled in your store's Display Settings.
1. Go to Store Setup › Store Settings, then click on the Display tab.
2. Change the number next to Featured Products. If this number is lower than the number of products you have featured, the products displayed will change whenever the page is refreshed.
3. Save your changes.
Referencing the Object/Panel in Theme Files
See our Stencil documentation for detailed information on how the featured products object is referenced in Stencil themes.
The featured products panel is called HomeFeaturedProducts.html. It can be found in the Panels folder of the template files. To reference the panel in an HTML document, insert %%Panel.HomeFeaturedProducts%%. This panel was designed to appear on the home page of a store; you will have to customize it for any other usage.
See our Blueprint documentation for more information on how the featured products panel is referenced in Blueprint themes.
"New Products" Panel
The New Products panel on your homepage displays the most recently added products in your store. It's a great way to promote new product lines and it lets your shoppers know about new additions quickly and easily.
Can I control which products in the New Products panel? Only the most recently added products appear in the New Products panel. Use the Featured Products panel for greater control over which products appear on the homepage.
Number of New Products to Display
The number of new products shown in the new products panel is controlled differently depending on which theme platform you're using (Stencil or Blueprint).
For Stencil themes, the new products panel is controlled with the Stencil Theme Editor.
1. Go to Storefront Design › My Themes.
2. Click Customize.
3. The Stencil Theme Editor will open in a new window/tab. On the left, scroll down and click Home Page to expand it.
4. Scroll down to Number of New Products, then click the drop-down to select the number of new products to display on the homepage. To remove the panel completely, select Disable.
5. When you're finished, click Save Changes.
Depending on your theme, the new products panel will automatically adjust to fit whatever screen it's on. If the area is too small, the panel will break into "pages" with next/back arrows.
For Blueprint themes, the new products panel is controlled in your store's Display Settings.
1. Go to Store Setup › Store Settings.
2. Under Display Settings, enter the number of New Products you want to display on the homepage. To remove the panel completely, set it to 0.
3. When you're finished making changes, click Save.
Referencing the Panel/Object in Theme Files
See our Stencil documentation for information on how the new products panel/object is referenced in Stencil themes.
The new products panel is called HomeNewProducts.html. It can be found in the Panels folder of the template files. To reference the panel in a template file, insert %%Panel.HomeNewProducts%%. This panel was designed to appear on the homepage of a store; you will have to customize it for any other usage.
See our Blueprint documentation for more information on how the new products panel is referenced in Blueprint themes.
Customers Also Viewed
- Location: Product page
- Panel (Blueprint): %%Panel.SimilarProductsByCustomerViews%%
- Summary: Customers who viewed this product also viewed these products.
This panel shows products that were viewed by customers who also viewed the current product. It sometimes won't populate for newer stores, because it needs products to reach a certain view count in conjunction with one another before it has enough data. Once the store has seen some traffic — around 100 views per product — it can start populating the products.
This panel can be enabled or disabled in the Display Settings under Enable 'Customers Also Viewed'? Beneath it, the Products Related by Views setting allows you to set the number of products.
Using a Stencil theme? In some Stencil themes, such as Cornerstone, this setting can be located in the Theme Editor under the Product section.
You May Also Like
- Location: Add-to-Cart pop-up (Fastcartthickboxcontent.html)
- Global (Blueprint): %%GLOBAL_SuggestedProductListing%%
- Summary: Products that are similar based on name and description.
This panel shows suggested products based on the same algorithm used by Related Products; i.e. similar product names and descriptions.
Similar Products by Category
- Location: Product page
- Panel (Blueprint): %%Panel.ProductByCategory%%
- Summary: Links to categories this product belongs to.
The similar products panel displays the categories that your product belongs to. This panel shows you only the category name and a link to the category, not individual products or pictures of the product.