The rarely used On Sale panel often goes unnoticed because it’s not called by the default.html template in BigCommerce. Here’s an overview of how to add it, and set up items so they appear in the panel.
Setting up your Sale products
The first thing we need to do is put some items on sale. This is easy; head on over to the Products tab in your store control panel and hit View Products. Find the product you want to put on sale and click the edit button.
Under the main details tab of the edit screen, scroll down to the Pricing & Pre-Order Options section and then click the More Price Options link. You’ll see a few more price fields appear. We now just have to fill in a couple of extra prices. Set the Retail Price field to reflect the existing price of the item, and the Sale Price field to the new reduced price. Now save your new prices, and there you have it, the item is now on sale. Easy! Repeat for as many items you wish to promote.
Adding the “on sale” panel
Now that we have some sale items set up, the next thing we need to do is add the “On Sale” panel to the store front. Head over to Design, and then click the Template Files tab. Locate default.html and click Edit. Under the main content div tag, add the following Panel call:
Now save the changes to your template.
Viewing the new panel
All that’s left to do is check your new panel is appearing. Visit your main store page and take a look. You should now see a new panel displaying the discounted products. I’m planning to show you how to make these sale items more prominent with a “you save x%” badge in a later article. As always, drop any questions into the comments below this post.