Browse by Topic

Product Panels

Product panels are a way of showcasing products on your storefront. They are most often used to display your best selling products or related products for upselling and cross-selling specific product lines or brands. They are a great way to promote your newest products and inform customers of the latest additions. Read below to learn more about how each panel is used and how it can be added to your theme.

 
 

Most Popular Products/Top Sellers

Some themes have a section on the home page that features the store's top-selling products. This is an easy way to dynamically market your best-performing products right on your homepage.

Example of a Top Sellers/Most Popular Products panel

The products that appear in this section are chosen dynamically from store sales data. They cannot be added manually.

Products are ranked by the total number of units sold and not by the number of orders. For example, a product that has a single order for a quantity of 100 will rank higher than another product that has 99 orders for a quantity of one.

Stock sold in other channels (like eBay, Amazon, Facebook, Pinterest, Square) are included in these calculations but not orders that have been canceled, refunded or used for testing purposes. If you want more control over which products appear on the home page, consider using the Featured Products panel.

Configuring Most Popular Products / Top Sellers

The number of products shown in the Most Popular Products panel is controlled differently depending on which theme platform you are using (Stencil or Blueprint).

Stencil themes

Go to StorefrontMy Themes and click Customize to open the Stencil Theme Editor.

Highlighted Customize button in the My Themes section

On the left, scroll down to Home Page, click to expand it, and locate the Number of Most Popular Products panel. Here you can specify the amount to display or disable it entirely. When you're finished, click Save then Publish.

Most Popular Products panel settings

Blueprint themes

Go to Store SetupStore Settings, click the Display tab, and locate the Top Selling Products setting. Here you can change the display number or enter 0 to disable the panel. When you're finished, click Save.

Top Selling Products panel settings

Referencing the Object/Panel in Theme Files

Stencil Themes

See our Stencil documentation for detailed information on how the most popular products panel/object is referenced in Stencil themes.

Blueprint Themes

The Top Sellers panel is called SideTopSellers.html. It can be found in the Panels folder of the template files. To reference the panel in an HTML document, insert %%Panel.SideTopSellers%%.

This panel was designed to appear on product listing pages such as the home page and category pages. You will have to customize it for any other usage. See our Blueprint documentation for more information on Blueprint themes and panels.

 
 

"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.

User-added image

 

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).

Stencil

For store using Stencil themes, the new products panel is controlled with the Stencil Theme Editor.

1. Go to Storefront DesignMy Themes.

2. Click Customize.

User-added image

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.

New products panel with next/back arrows and page indicator highlighted

Blueprint

For stores using Blueprint themes, the new products panel is controlled in your store's Display Settings.

1. Go to Store SetupStore 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.

User-added image

3. When you're finished making changes, click Save.

Referencing the Panel/Object in Theme Files

Stencil

See our Stencil documentation for information on how the new products panel/object is referenced in Stencil themes.

Blueprint

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.

Customers Also Viewed panel

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.

Enable Customers Also Viewed?

 

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.

You Might Also Like

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.

Similar products

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.

 
 

FAQ

Can I change the product panel headers?

Yes. If you're using a Blueprint theme, both Featured Products and New Products can be changed by editing your template files.

  • Featured Products — Go to Storefront › My Themes and click Edit HTML/CSS. Locate, then replace the %%LNG_FeaturedProducts%% variable with whatever text you would like to display in its place.
  • New Product — Go to Storefront › My Themes and click Edit HTML/CSS. Locate, then replace the %%LNG_NewProducts%% variable with whatever text you would like to display in its place.

Was this article helpful?