Hi, it comes from global variables that bigcommerce uses that pulls the data from the database. For example, the four products that display now come from the variable %%Panel.HomeFeaturedProducts%%
The other two tabs would come from the global variables %%Panel.HomeSaleProducts%% and %%Panel.HomeNewProducts%%
So basically the ajax, or whatever coding needed to do the switching just has to swap out those three variables. Those variables pull in all the corresponding products from the database.
Here is the default.html file that is currently used for the home page. You can see that it is fairly simple but there are lots of these global variables wrapped in %% that bring in other sections of content and code.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
%%Panel.HTMLHead%%
<body>
<div id="Header_Default">%%Panel.Header%%</div>
<div id="homebackground">
<div id="homebanner">
<a href="http://www.mixnob.com">
<img width="980" height="283" alt="Featured Product" src="http://www.mixnob.com/templates/__custom/images/homebanner.jpg">
</a>
</div></div>
<div id="Container">
<div id="hometribanner">
<a href="http://www.mixnob1.com">
<img width="326" height="140" alt="Featured Product" src="http://www.mixnob.com/templates/__custom/images/hometribanner1.jpg">
</a></div>
<div id="hometribanner">
<a href="http://www.mixnob2.com">
<img width="326" height="140" alt="Featured Product" src="http://www.mixnob.com/templates/__custom/images/hometribanner2.jpg">
</a></div>
<div id="hometribanner">
<a href="http://www.mixnob3.com">
<img width="328" height="140" alt="Featured Product" src="http://www.mixnob.com/templates/__custom/images/hometribanner3.jpg">
</a></div>
<div id="Wrapper">
%%Panel.WrapperBanner%%
<div class="Content Widest" id="LayoutColumn1">
<!--%%Panel.HomeSlideShow%%
<div class="hero clearfix">
<div class="hero_slider">
%%Banner.TopBanner%%
</div>
<a id="slide_prev" class="prev" href="#"><</a>
<a id="slide_next" class="next" href="#">></a>
</div>
%%Discount.FreeShippingEligibility%%
%%Panel.HomeFeaturedProducts%%
<!--%%Panel.HomeSaleProducts%%-->
<!--%%Panel.HomeNewProducts%%-->
%%Banner.BottomBanner%%
</div>
<br class="Clear" />
</div>
%%Panel.Footer%%
</div>
</body>
</html>