How To Hide A Newly Uploaded Product From The Home Page

The HomeNewProducts panel on the home page will show all the new products that have been added to your store. The downside is that you cannot hold back some of those new products from showing on the home page. This can result in a product with limited appeal pushing out a more popular product from the panel list.

There is a way around this and it involves some Javascript to make changes to the HomeNewProducts panel to hide certain products. Find out how to do it by following the instructions below.

Instructions

1. Navigate to your control panel and go to Setup & Tools -> Settings, click on the Display tab and then set the New Products setting to 20. This will make the panel show 20 products.

2. Save the changes, and then navigate to Design -> Theme Files/Edit HTML & CSS and open the default.html file.

3. Add the following code before the </body> tag:

   
   <script type="text/javascript">
   $(document).ready(function(){
   
   $("#HomeNewProducts li:contains(KEYWORD)").hide();
   
   });
   
   </script >
   
   

   Replace KEYWORD with your own text. For example, if you want to hide a product named "Pants" you would replace KEYWORD with Pants like this:

   
   <script type="text/javascript">
   $(document).ready(function(){
   
   $("#HomeNewProducts li:contains(Pants)").hide();
   
   });
   
   </script >
   
   

   You can also hide the products based on their position in the list. So if you want to hide the first two products in the panel you would use this code:

   
   <script type="text/javascript">
   $(document).ready(function(){
   
   $("#HomeNewProducts li:lt(2)").hide();
   
   });
   
   </script >
   
   

4. Save the changes to the file.

How It Works

The code uses jQuery to hide the products based on the name or the position in the panel. Just be careful that you make the product list long enough to capture the products that you do want to show on the home page. For example, if you have a limit of five products and you added three new products, you will need to change the setting from five to eight to accommodate the new products. You can do that from the Setup & Tools -> Settings page, just click on the Display tab and then set the New Productsvalue.

Troubleshooting

If the product is not hidden... then make sure you are setting the name correctly. The :contains selector is case-sensitive, so if you want to match Pants you will need to use Pants and not pants with a lowercase p.

If the script is still not working and you applied the advice above... then check your default.html file and look for the home new products panel. It should look like this: %%Panel.HomeNewProducts%%. Add it to the template file if it is not there and save the changes.

If you have other questions, comments, or modifications... contact our Bigcommerce developers!